これからはじめる Gulp シリーズこれからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
はじめに
この記事はGulp.js（全俺） Advent Calendar 2014です。
前回のこれからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行するでGulp.jsからjekyllのbuildコマンドを実行してみました。今回はgulp-s3プラグインを使ってAmazon S3（AWS）の静的サイトホスティング機能にデプロイしてみたいと思います。
AWSについて
デプロイ先として利用するAmazon S3はAWSが持つサービスの1つです。AWSはアカウントを作成しクレジットカード登録を済ますことで利用できるようになります。AWSについて詳しく知りたい方はこちらをどうぞ。
AWSとは
アマゾン ウェブ サービスは、企業や組織のより迅速な行動、IT コスト削減、アプリケーション拡張を実現するために役立つ、幅広いクラウドグローバルコンピューティング、ストレージ、データベース、分析ツール、アプリケーション、デプロイサービスを提供しています。
Amazon S3について
Amazon S3を使うことで、静的なWebサイトであれば月に数円程度で運用することができます。実際にこのブログでも利用していて、月6000PV程度でRoute53（DNSサービス）も使って$2.00/月です。静的サイト限定になりますがパフォーマンスの悪いレンタルサーバーを使うよりコストパフォーマンスが高いです。
Amazon Simple Storage Service（Amazon S3）は、安全で耐久性があり拡張性の高いオブジェクトストレージを、開発者や IT チームに提供します。Amazon S3 は、シンプルなウェブサービスインターフェイスにより、ウェブのどこからでもお好みの量のデータを簡単に保存し取得します。Amazon S3 では、実際に使用したストレージ分のみお支払いいただきます。最低料金や初期費用はありません。
gulp-awspublishプラグインについて
gulp-awspublishプラグインはGulp.jsからAmazon S3にファイルをアップロードすることができます。
必要なもの
gulp-awspublishプラグインを使ってAmazon S3にデプロイするには以下が必要です。アカウントの取得方法やS3バケットの作成、IAMアカウントの作成等は説明が長くなってしまうのでこの記事では省きます。
- AWSアカウント（作成）
- Amazon S3バケット
- Amazon S3バケットの静的サイトホスティング設定
- Amazon S3を操作できる権限を持ったIAMアカウント
- IAMアカウントのキーとシークレットキー
deployタスクを作る
gulp-awspublishプラグインを使ってAmazon S3にファイルをデプロイするタスクを作ります。
gulp-awspublishのインストール
まずはgulp-awspublishをインストールします。
$ sudo npm install gulp-awspublish --save-dev
Password:
gulp-awspublish@0.0.23 node_modules/gulp-awspublish
├── pad-component@0.0.1
├── clone@0.2.0
├── mime@1.2.11
├── s3-deleter@0.1.2 (async@0.9.0)
├── s3-lister@0.1.0 (readable-stream@1.0.33)
├── through2@0.6.3 (xtend@4.0.0, readable-stream@1.0.33)
├── event-stream@3.1.7 (stream-combiner@0.0.4, duplexer@0.1.1, from@0.1.3, pause-stream@0.0.11, map-stream@0.1.0, split@0.2.10, through@2.3.6)
├── knox@0.9.1 (stream-counter@1.0.0, once@1.3.1, debug@1.0.4, xml2js@0.4.4)
└── gulp-util@2.2.20 (lodash._reinterpolate@2.4.1, minimist@0.2.0, through2@0.5.1, chalk@0.5.1, vinyl@0.2.3, multipipe@0.1.2, dateformat@1.0.11, lodash.template@2.4.1)
キーファイルを用意する
AWS IAMのキーを持ったファイルを用意します。github等のpublicリポジトリに公開しないように注意してください。
{
"key": "XXXXXXXXXXX",
"secret": "XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",
"bucket": "gulp.nukos.kitchen",
"region": "ap-northeast-1"
}
Gulpタスクを作る
fsモジュールを使ってキーファイルを読み込みます。
var gulp = require('gulp');
var awspublish = require('gulp-awspublish');
var fs = require('fs');
var paths = {
srcDir : 'prd'
}
gulp.task('deploy', function(){
var key = JSON.parse(fs.readFileSync('./aws.json'));
var publisher = awspublish.create(key);
var headers = {
'Cache-Control': 'max-age=315360000, no-transform, public'
};
var srcGlob = paths.srcDir + '/**/*';
gulp.src( srcGlob )
// publisher will add Content-Length, Content-Type and headers specified above
// If not specified it will set x-amz-acl to public-read by default
.pipe(publisher.publish(headers))
// create a cache file to speed up consecutive uploads
.pipe(publisher.cache())
// print upload updates to console
.pipe(awspublish.reporter());
});
タスクを実行する
このブログとほぼ同じものをデプロイしてみます。ファイル数が多いので、一部省いています。
$ gulp deploy
[12:11:59] Using gulpfile ~/Projects/gulp.whiskers.nukos.kitchen/gulpfile.js
[12:11:59] Starting 'deploy'...
[12:11:59] Finished 'deploy' after 10 ms
[12:11:59] [skip] archives.html
[12:11:59] [skip] feed.xml
[12:11:59] [skip] index.html
[12:11:59] [skip] sitemap.xml
[12:12:00] [skip] category/index.html
[12:12:00] [skip] tag/index.html
[12:12:00] [skip] 2014/09/index.html
[12:12:00] [skip] 2014/10/index.html
[12:12:00] [skip] 2014/08/index.html
[12:12:00] [skip] 2014/11/index.html
[12:12:01] [create] 2014/12/index.html
[12:12:01] [create] assets/css/common.css
[12:12:01] [skip] assets/css/common.css.map
[12:12:01] [skip] assets/images/background-shadow.png
[12:12:01] [skip] assets/images/background.png
[12:12:02] [skip] assets/images/favicon.png
[12:12:02] [create] assets/js/app.js
[12:12:02] [skip] assets/js/common.js
[12:12:02] [skip] assets/js/ie.js
[12:12:03] [skip] assets/js/libs.js
[12:12:03] [skip] blog/page3/index.html
[12:12:03] [create] blog/page2/index.html
[12:12:03] [skip] blog/page4/index.html
[12:12:03] [skip] blog/page5/index.html
…
[12:16:26] [skip] uploads/thumb-2x/2014/08/08/byword/thumbnail.png
[12:16:26] [skip] uploads/thumb-2x/2014/08/13/gr/card_mobi.png
[12:16:26] [create] uploads/thumb-2x/2014/08/13/gr/thumbnail.png
すでにアップロードされているファイルは[skip]となり処理が省略されます。差分ファイルだけアップロードされます。これでサイトをデプロイできるようになりました。
今回はここまで。明日は何を紹介しようかな…
シリーズ
- これからはじめるGulp（0）：アドベントカレンダースケジュール
- これからはじめるGulp（1）：bundler, rbenv, nodebrewでGulp環境を作ってみる
- これからはじめるGulp（2）：gulp-sassを使ってSCSSをコンパイルするタスクを作ってみる
- これからはじめるGulp（3）：gulp.watchでファイルの変更を監視しタスクを実行する
- これからはじめるGulp（4）：gulp-connectモジュールを使ったローカルサーバの起動
- これからはじめるGulp（5）：gulp-connectモジュールを使ったLiveReload
- これからはじめるGulp（6）：gulp-plumberとgulp-notifyを使ったデスクトップ通知
- これからはじめるGulp（7）：require-dirモジュールを使ったタスク単位のファイル分割
- これからはじめるGulp（8）：delモジュールとvinyl-pathsモジュールを使ったファイルの削除
- これからはじめるGulp（9）：Ruby版Sassが使えるgulp-ruby-sassへの乗り換え
- これからはじめるGulp（10）：deprecatedになっていたgulp-connectからgulp-webserverへ乗り換える
- これからはじめるGulp（11）：ブラウザ間でスクロールやクリック操作を同期できるBrowserSync
- これからはじめるGulp（12）：gulp-imageminプラグインを使ったJPEG,PNG,GIF,SVGの最適化
- これからはじめるGulp（13）：gulp-changedプラグインで変更されたファイルだけを処理させる
- これからはじめるGulp（14）：gulp-cachedプラグインで変更されたSCSSファイルだけを処理させる
- これからはじめるGulp（15）：gulp-responsiveプラグインを使ったレスポンシブイメージ作成の自動化
- これからはじめるGulp（16）：gulp-image-resizeプラグインを使ってサムネイルやレスポンシブイメージを作る
- これからはじめるGulp（17）：SketchTool（Sketch 3 command line tool）を使ったアートボード・スライスの書き出しとgulp-execプラグインを使ったSketchtoolの呼び出し
- これからはじめるGulp（18）：SketchToolで何ができるのかコマンドと主要なオプションを使ってみる
- これからはじめるGulp（19）：gulp-sketchとgulp-execを使ったSketch 3デザインデータの画像書き出し
- これからはじめるGulp（20）：Node.jsのChild Processモジュールを使ってgulpからjekyllのbuildコマンドを実行する
- これからはじめるGulp（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ
- これからはじめるGulp（22）：gulp-iconfontとgulp-sketchを使ったアイコンフォント作成の自動化
- これからはじめるGulp（23）：gulp-consolidateでgulp-iconfontで作ったアイコンフォントのシンボル一覧HTMLを作る
- これからはじめるGulp（24）：gulp.spritesmithプラグインでSpriteイメージを作る
- これからはじめるGulp（25）：Hologramとgulp-hologramでスタイルガイドを作る
- これからはじめるGulp（26）：Sketch3のサブディレクトリ書き出しに対応したgulp-sketchを試す