[Middleman 3][Amazon S3]初めてのMiddleman：Amazon S3にビルドされたファイルを同期する

この記事は書かれてから1年以上経過しており、内容が古い場合があります。

前回の記事初めてのMiddleman：サイトにブログ機能を追加するでブログ機能の導入について覚えました。今回はこちらの記事Middleman + Foundation + Amazon S3 でのBlogサイト構築(9)Amazon S3へのデプロイを参考にAmazon S3へビルド結果を同期してみたいと思います。

AWS（Amazon Web Services）のアカウント作成やAmazon S3の設定方法については説明を省くので参考にしている記事を読んで設定してください。

Amazon S3へ同期するには

Amazon S3に同期するにはMiddlemanの拡張機能Middleman::S3Sync（middleman-s3_sync）を使います。

Gemfile

GemfileにMiddleman::S3Syncを追記します。

source "https://rubygems.org"

gem 'middleman'
gem 'middleman-blog'
gem 'middleman-livereload'

# For feed.xml.builder
gem 'builder'

gem 'middleman-s3_sync'

gem 'bourbon'
gem 'neat'

インストール

$ bundle install
Fetching gem metadata from https://rubygems.org/........
Fetching additional metadata from https://rubygems.org/..
Resolving dependencies...
Installing CFPropertyList 2.3.0
Using i18n 0.6.11
Using json 1.8.2
Using minitest 5.5.1
Using thread_safe 0.3.4
Using tzinfo 1.2.2
Using activesupport 4.1.9
Using addressable 2.3.6
Installing ansi 1.4.3
Using sass 3.4.11
Using thor 0.19.1
Using bourbon 4.1.1
Using builder 3.2.2
Using bundler 1.7.6
Using hitimes 1.2.2
Using timers 4.0.1
Using celluloid 0.16.0
Using chunky_png 1.3.3
Using coffee-script-source 1.9.0
Using execjs 2.2.2
Using coffee-script 2.3.0
Using multi_json 1.10.1
Using compass-core 1.0.3
Using compass-import-once 1.0.5
Using rb-fsevent 0.9.4
Using ffi 1.9.6
Using rb-inotify 0.9.5
Using compass 1.0.3
Using eventmachine 1.0.5
Using http_parser.rb 0.6.0
Using em-websocket 0.5.1
Using erubis 2.7.0
Installing excon 0.44.1
Installing fission 0.5.0
Installing formatador 0.2.5
Installing mime-types 2.4.3
Installing net-ssh 2.9.2
Installing net-scp 1.2.1
Installing fog-core 1.28.0
Installing mini_portile 0.6.2
Installing nokogiri 1.6.6.2
Installing fog-xml 0.1.1
Installing fog-atmos 0.1.0
Installing fog-json 1.0.0
Installing ipaddress 0.8.0
Installing fog-aws 0.1.0
Installing inflecto 0.0.2
Installing fog-brightbox 0.7.1
Installing fog-ecloud 0.0.2
Installing fog-profitbricks 0.0.1
Installing fog-radosgw 0.0.3
Installing fog-sakuracloud 1.0.0
Installing fog-serverlove 0.1.1
Installing fog-softlayer 0.4.0
Installing fog-storm_on_demand 0.1.0
Installing fog-terremark 0.0.3
Installing fog-vmfusion 0.0.1
Installing fog-voxel 0.0.2
Installing fog 1.27.0
Using tilt 1.4.1
Using haml 4.0.6
Using hike 1.2.3
Using uber 0.0.13
Using hooks 0.4.0
Using kramdown 1.5.0
Using listen 2.8.5
Installing map 6.5.5
Using padrino-support 0.12.4
Using padrino-helpers 0.12.4
Using rack 1.6.0
Using rack-test 0.6.3
Using middleman-core 3.3.7
Using sprockets 2.12.3
Using sprockets-helpers 1.1.0
Using sprockets-sass 1.3.1
Using middleman-sprockets 3.4.1
Using uglifier 2.7.0
Using middleman 3.3.7
Using middleman-blog 3.5.3
Using rack-livereload 0.3.15
Using middleman-livereload 3.4.2
Installing pmap 1.0.2
Installing ruby-progressbar 1.7.1
Installing unf_ext 0.0.6
Installing unf 0.1.4
Installing middleman-s3_sync 3.0.41
Using neat 1.7.1
Your bundle is complete!
It was installed into ./vendor/bundle

config.rb

config.rbにMiddleman::S3Syncの設定を追記します。

# amazon s3 sync
activate :s3_sync do |s3_sync|
  # デプロイ先のS3バケット名
  s3_sync.bucket                     = 'example.com'
  # バケットのリージョン
  s3_sync.region                     = 'ap-northeast-1'
  # AWSのアクセスキー
  s3_sync.aws_access_key_id          = ENV['AWS_ACCESS_KEY_ID']
  # AWSのシークレットアクセスキー
  s3_sync.aws_secret_access_key      = ENV['AWS_SECRET_ACCESS_KEY']
  s3_sync.delete                     = true
  s3_sync.after_build                = false
  s3_sync.prefer_gzip                = true
  s3_sync.path_style                 = true
  s3_sync.reduced_redundancy_storage = false
  s3_sync.acl                        = 'public-read'
  s3_sync.encryption                 = false
end

同期を実行

同期を実行してみます。注意点として、この拡張機能は$ middleman buildでビルドされたbuildディレクトリのファイルをAmazon S3に同期するため、同期前にかならずビルドしておく必要があります。同期コマンドは専用の$ middleman s3_syncが用意されています。

$ middleman s3_sync
== LiveReload accepting connections from http://192.168.1.47:35729
== LiveReload accepting connections from http://192.168.1.47:35729
     s3_sync  Gathering the paths to evaluate.
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     s3_sync                                                                                                                                                   |
Ready to apply updates to stg-devio2015.
     s3_sync  Creating assets/css/common.css
     s3_sync  Creating assets/css/sections/home.css
     s3_sync  Creating assets/fonts/font-awesome/FontAwesome.otf
     s3_sync  Creating assets/fonts/font-awesome/fontawesome-webfont.eot
     s3_sync  Creating assets/fonts/font-awesome/fontawesome-webfont.svg
     s3_sync  Creating assets/fonts/font-awesome/fontawesome-webfont.ttf
     s3_sync  Creating assets/fonts/font-awesome/fontawesome-webfont.woff
     s3_sync  Creating assets/fonts/museo/260242_0_0.eot
     s3_sync  Creating assets/fonts/museo/260242_0_0.ttf
     s3_sync  Creating assets/fonts/museo/260242_0_0.woff
     s3_sync  Creating assets/fonts/stroke7/Pe-icon-7-stroke.eot
     s3_sync  Creating assets/fonts/stroke7/Pe-icon-7-stroke.svg
     s3_sync  Creating assets/fonts/stroke7/Pe-icon-7-stroke.ttf
     s3_sync  Creating assets/fonts/stroke7/Pe-icon-7-stroke.woff
     s3_sync  Creating assets/images/owl/AjaxLoader.gif
     s3_sync  Creating assets/images/owl/grabbing.png
     s3_sync  Creating assets/images/teaser/background.jpg
     s3_sync  Creating assets/images/teaser/background.png
     s3_sync  Creating assets/images/thumbnail-256.png
     s3_sync  Creating assets/js/components/owl.js
     s3_sync  Creating assets/js/components/social_button.js
     s3_sync  Creating assets/js/core/core.js
     s3_sync  Creating assets/js/core/init.js
     s3_sync  Creating assets/js/libs/jquery.min.js
     s3_sync  Creating assets/js/libs/jquery.social.js
     s3_sync  Creating assets/js/libs/owl.carousel.min.js
     s3_sync  Creating blog/2015.html
     s3_sync  Creating blog/2015/02.html
     s3_sync  Creating blog/2015/02/03.html
     s3_sync  Creating blog/2015/02/03/example-article.html
     s3_sync  Creating blog/feed.xml
     s3_sync  Creating blog/index.html
     s3_sync  Creating blog/tags/example.html
     s3_sync  Creating index.html
     s3_sync  Creating speakers/satou-jirou.html
     s3_sync  Creating speakers/suzuki-saburo.html
     s3_sync  Creating speakers/suzuki-shiro.html
     s3_sync  Creating speakers/yamada-tarou.html

同期が完了しました。
ブラウザからアクセスしてサイトが表示されれば同期成功です。Amazon S3でなくともgithub-pageなどで運用しても良いかもしれません。