GulpでCloudFront + S3環境へのフロントエンドデプロイを自動化する

CloudFrontに紐付いたS3に静的ファイル一式を置いた構成はテッパンだと思う． この場合，静的ファイルを更新するためには 1. S3にファイルをアップロードする 2. CFをInvalidateする の手順が必要となる． 滅多に更新が発生しないならともかく，絶賛開発中のプロジェクトの場合にこの操作を何度も手動で繰り返したくない．

本来ならばCIを設定したりwebpackでbuildついでに実行するなどありそうだが，オーソドックスにgulpタスクを書いてみた．

パッケージインストール

$ yarn add gulp gulp-awspublish gulp-cloudfront-invalidate

gulpタスクの記述

const gulp = require('gulp');
const awspublish = require('gulp-awspublish');
const cloudfront = require('gulp-cloudfront-invalidate');

// S3にデプロイするタスク
// dev環境にデプロイする
gulp.task('deploy', function() {
  const key = {
    accessKeyId: '...',
    secretAccessKey: '...',
    region: "ap-northeast-1",
    params: {
      "Bucket": "bucket-name",
    }
  }
  const publisher = awspublish.create(key);

  // deployするもの
  gulp.src(['**/*', '!node_modules/**/*', '!gulpfile.js',  '!package.json', '!README.md', '!yarn.lock', '!.babelrc' ])
    .pipe(publisher.publish())
    .pipe(awspublish.reporter());
});

// CFをInvalidateする
const cfInvalidateSettings = {
  distribution: '...',
  paths: ['/*'], 
  accessKeyId: '...', 
  secretAccessKey: '...',
  wait: true   
}


gulp.task('invalidate', function() {
  return gulp.src('*')
    .pipe(cloudfront(cfInvalidateSettings));
})

実行

$ gulp deploy && gulp invalidate

これで，指定したS3に静的ファイルを設置（存在しないファイルは新規に設置，存在するファイルは差分があれば更新）した後に指定したCFをinvalidateしてくれる． あとは個々の案件に併せてタスクをカスタマイズして，package.jsonのscriptsに良い感じで書いておく． 上記の設定だとinvalidateの完了までwaitする設定になっているが，外すことも出来る．個人的にはしっかりinvalidateが完了したかを見届けたいのでwaitすることにしている．