Middlemanで作った静的サイトをAmazon S3で公開してみる

目次

1. 1. Amazon S3とは？
2. 2. Amazon S3のバケットを作る
3. 3. Middlemanでプロジェクト作成とその設定

ちょっと久しぶりになりますが技術のことを書く。

Amazon S3とは？

アマゾン ウェブ サービス

ブログもちょっとしたサイトもほとんどMiddlemanを使って構築しているわけだけど、
Github Pagesだけじゃなくアマゾン ウェブ サービス（Amazon Web Services）もべっりだったりする。

以前に比べると日本語化もかなり進んでいたり無料利用枠があるのではじめるのにそこまでハードルは高くない。
ただクレジットカード登録と電話でのPIN番号認証があるのでやたらめったらとアカウント作るってわけにはいかないだろう。

日本語のドキュメントも充実している。

AWS の使用開始ドキュメント

Amazon S3 (クラウドストレージサービス)

S3というと負荷分散のために画像や映像ファイルを置いておく場所のイメージがあったと思うんだけど
もちろんそういう使い方が主流だと思うけど今はちょっと違うように思う。

Amazon S3のバケットを作る

AWSのサービスからS3を選んでS3 Management Cosole画面へ。
左上の「バケットを作成」を押す。
バケット名とリージョンを選択して右下の「作成」を押すとバケットが作成される。

バケットのプロパティで静的ウェブサイトホスティングを有効にすることができる。
インデックスドキュメント、エラードキュメントそれぞれを設定して「保存」を押して設定を反映させる。

このままではアクセス件がなくアップロードしたファイルを見ることができないので「さらにアクセス許可を追加する」を押す。
被付与者を全員、「リスト」にチェックをいれて「保存」を押して設定を反映させる。

AWS S3の設定は以上となる。
またアクセスキーとシークレットキーが必要になるがAWS マネジメントコンソールのアカウント名のプルダウンから「認証情報」を選択して「セキュリティ認証情報」からアクセスキーを作成するなどして入手しておく。

Middlemanでプロジェクト作成とその設定

$ middleman init some_project

Middleman Syncというパッケージを使うと静的ファイルのビルドとファイルのアップロードがコマンドひとつでできる。
Gemfileを開いて以下を追記する。

gem 'middleman-sync'

bundle installでパッケージのインストール。

$ bundle install

config.rbを開いて以下を追記する。

activate :sync do |sync|
  sync.fog_provider = 'AWS' #ストレージプロバイダ（AWS, Rackspace, Google）
  sync.fog_directory = 'bucket-name' #バケット名
  sync.fog_region = 'bucket-region-name' #バケットの地域名（AWSの場合us-east-1, us-west-1, eu-west-1, ap-southeast-1）
  sync.aws_access_key_id = 'super' #アクセスキー
  sync.aws_secret_access_key = 'secret' #シークレットキー
  sync.existing_remote_files = 'keep' #既存のリモートファイルを消すのかそのままなのか（keep, delete）
  sync.gzip_compression = false #gzip圧縮したもので置き換えるかどうか（true, false）
  sync.after_build = true #ビルド後に自動でアップロードするかどうか（true, false）
end

設定は完了したのでソースをビルドしてS3に反映させる。

$ middleman build

完了したらS3に反映されているので確認する。 S3 Management Cosoleのバケットのプロパティ「静的ウェブサイトホスティング」のエンドポイントがURLとなり、それで確認できる。