WEB・アプリ開発

Middlemanで作ったサイトをAmazon S3にデプロイする手順

Middlemanで生成したサイトをAmazon S3にデプロイする手順をご紹介します。既に同じような記事はありますが、ちょっと古かったり抜け落ちたりしていることが多いので、今回改めて書いてみました。

なお、そもそもS3でのバケットの作成や独自ドメインで使う設定方法を知りたい方は下の記事をご覧下さい。

ムームードメインで取得した独自ドメインをAmazon S3に適用する手順ムームードメインでドメインを取得し、AmazonのS3のWEBホスティングにそのドメインを適用する手順です。なお、本手順は日本語ドメイン...

おすすめはmiddleman-s3_sync

S3にデプロイするならmiddleman-s3_syncというプラグインをおすすめします。Middlemanのデプロイで最も使われているのは、middleman-deployというプラグインなのですが、かなり原始的なものでサイトを更新するたびに全てのファイルをアップロードします。middleman-s3_syncは変更されたファイルのみ更新してくれますし、処理中のプログレス表示が綺麗で見やすいです。

middleman-s3_syncの導入方法

gemのインストール

Gemfileに以下を記載し、コマンドラインでbundle installを実行します。


Middlemanのバージョン3系を使っている場合は、上のように"~> 3.0"と書いて、middleman-s3_syncも3系が使われるようにする必要があります。既にバージョン4系(現時点ではベータ段階)を使っている場合は、バージョン指定無しでOKです。

2行目のgem 'mime-types'が無いと、後でmiddleman s3_syncというコマンドを実行する時に下のエラーが出ます。


エラーログの全量はこちら

S3の認証情報の記載

Middlemanのプロジェクトのルートディレクトリに.s3_syncというファイルを作成し、以下を記載します。YOURACCESSKEYyourSeCretKeyexample.comの部分はご自身のS3の対象のバケットのものに変更してください。


実はこちらは、config.rbに直接書くこともできます。ただ、センシティブな情報であるため、上のように.s3_syncに書き、このファイルをgitの管理から外すことをお勧めします。.gitignoreに以下を追加します。

config.rbの設定

以下のように追記し、s3_syncをactivateします。


前の手順で.s3_syncを作成していれば、上のようにリージョンの指定だけでOKです。ap-northeast-1は東京リージョンの場合ですので、ご自身が利用するリージョンのものに修正してください。デフォルトのリージョン(おそらくus-west-1)を使う場合は、単に一行activate :s3_syncと書けばよいようです。

S3側のバケットポリシーの設定

S3の管理画面から対象のバケットのプロパティを開く

S3の管理画面step1

アクセス許可をクリック

S3の管理画面step2

「バケットポリシーの編集」をクリック

バケットポリシーがまだ存在しない場合は、「バケットポリシーの追加」となっています。

S3の管理画面step3

ポリシーを入力

このような入力フォームに入力し、「保存」をクリックします。

S3の管理画面step4

入力するテキストは以下です。example.comはご自身が使うバケット名に変えて下さい。

スポンサーリンク

インデックスドキュメントとエラードキュメントの設定

S3では「インデックスドキュメント」と「エラードキュメント」をどのファイルにするか指定できます。

インデックスドキュメント

ルートURLにアクセスされた時に表示するhtmlファイル。通常はindex.html

エラードキュメント

存在しないURLにアクセスされた時に表示するhtmlファイル。

インデックスドキュメントは、middelmanの場合でも通常index.htmlが生成されているのであまり考える必要はないと思います。エラードキュメントは、ご自身のMiddlemanの設定で生成されたファイルを指定してあげる必要があります。

私の場合は、エラードキュメントはsourceディレクトリ直下に以下のような404.slimというファイルで生成しています。(ご自身の好きなpathでOK)


S3側の設定する場所は、対象のバケットのプロパティから「静的ウェブホスティング」をクリックすると表示されます。

directory_indexesを有効にしている場合は、以下の画像のように404/index.htmlというpathになります。していない場合は、404.htmlとなります。

手順のstep5

デプロイが終わった後にでも、存在しないURLにわざとアクセスしてみて、指定したファイルが表示されるか確認してみてください。

このエラードキュメントの設定は、必須事項というわけではないので、手間と感じる場合はしなくても大丈夫です。ただ、この機能はS3が提供してくれてる便利な機能なので、利用したいところです。

デプロイの実行

まず、以下を実行しサイトを生成します。


以下でデプロイを実行します。


正常に終了すれば、大体以下のように表示されます。(通常もっと多いです。)

エラーが発生した場合

もし下のようなエラーが発生した場合、


エラーの全量はこちら

以下のようにopensslを再インストールすると治る場合があります。


現状私の端末でインストールされているのはopenssl-1.0.2e.yosemite.bottle.tar.gzというバージョンです。

変更すると差分だけデプロイしてくれる

何かファイルを変更したり、削除してみてくてください。

そして、middlean buildmiddleman s3_syncを実行すると、


こんな感じで、全部アップロードするのではなく、必要に応じて、追加、更新、削除をしてくれます。何百ページものコンテンツ量になってきた時、通常はデプロイにすごく時間がかかってしまうのですが、middleman-s3_syncを使っていれば最小限のデプロイ時間で済みます。

まとめ

いかがでしたでしょうか。MiddlemanはS3と非常に相性がよいことがおわかりいただけるのではないかと思います。S3は金額も月10円レベルと非常にお安いので、もうMiddlemanとS3の組み合わせは、手放せなくなりますね。

バージョン情報

  • middleman (3.4.0)
  • middleman-s3_sync (3.3.4)
  • mime-types (2.6.2)

参考