これからはじめるGulp #21：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュ

はじめに

前回のこれからはじめる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:
[email protected] node_modules/gulp-awspublish
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected] ([email protected])
├── [email protected] ([email protected])
├── [email protected] ([email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])
├── [email protected] ([email protected], [email protected], [email protected], [email protected])
└── [email protected] ([email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected], [email protected])

キーファイルを用意する

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（21）：gulp-awspublishプラグインを使ったAmazon S3への静的Webサイトパブリッシュの転載です。