GulpでAWSのS3に簡単デプロイして静的サイトを作成する

静的なWebサイトを作るって案件があったのですが、わざわざサーバー作るの面倒だよね。
もう全部S3に置いちゃえば良いんじゃない？ってことでファイルを全部S3にアップロードすることにしました。

フロントエンドをビルドするのにgulpを使うので、そのままgulpでデプロイする方法を。

S3バケットとIAMを用意する

公開用にS3のバケットを作成してください。
作成したバケットにアクセスできるように、IAMのポリシーは以下のようにS3への権限を付与します。

IAMポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::{BucketName}",
                "arn:aws:s3:::{BucketName}/*"
            ]
        },
        {
            "Effect": "Allow",
            "Action": "s3:ListAllMyBuckets",
            "Resource": "*"
        }
    ]
}

ここで作成したリージョン名やバケット名、IAMのaccessKeyIdやsecretAccessKeyは後のデプロイタスクで使用します。

npmでgulp-awspublishをインストールする

npmのpackage.jsonにgulp-awspublishを加えます。
npmからgulpを実行できるようにscriptsにbuildとdeployを設定しています。

package.json

{
  "scripts": {
    "build": "gulp build",
    "deploy": "gulp deploy",
  },
  "dependencies": {
    "gulp": "3.9.1",
    "gulp-awspublish": "3.3.0"
  }
}

ターミナルでnpmインストールを実行

$ npm install

S3へのデプロイタスク作成

gulp.jsを作成します。keyに入れる中身は先程作成したS3とIAMの情報を入力してください。

gulp.js

var gulp = require('gulp');
var awspublish = require('gulp-awspublish');

gulp.task('build', function() {
  gulp.src("./origin/*")
      // build task
      .pipe(gulp.dest('./build/'));
});

gulp.task('deploy', function() {
  var key = {
    accessKeyId: "********",
    secretAccessKey: "********",
    region: "ap-northeast-1",
    params: {
      "Bucket": "{BucketName}",
    }
  }
  var publisher =awspublish.create(key);

  gulp.src("./build/*")
      .pipe(publisher.publish())
      .pipe(publisher.sync())
      .pipe(awspublish.reporter());
});

今回は./originに元のファイルを入れておき./buildにビルド済みのファイルを配置し、./buildの中身をS3にアップロードするようにしています。

デプロイタスクを実行

あとはターミナルで実行するだけ

$ npm run build && npm run deploy

[12:08:09] Using gulpfile ~/gulpfile.js
[12:08:09] Starting 'deploy'...
[12:08:10] Finished 'deploy' after 205 ms
[12:08:10] [update]   index.html
[12:08:10] [skip] main.css
[12:08:10] [create] main.js
[12:08:10] [delete] main.png

publisher.sync()を指定しているので、ディレクトリの中身とS3の差分を見て自動で作成・更新・削除・スキップを行ってくれます。

おわり

これでS3の中身を確認して、無事アップロードされていればOKです。
実際に運用するときはGithubとJenkinsも組み合わせてワンクリックでデプロイされるように構築して使っています。

いじょ、簡単便利にS3に静的サイトをデプロイする方法でした。