[メモ] TravisCIでnpm run buildしてからS3にデプロイしてCloudFrontで配信する

vue.jsで作成したちょっとしたものをS3+CloudFrontで公開したくて
色々調べたのでメモ。
ついでに前から気になってたTravisCIも使ってみた

手順メモ

1. travis cli のインストール

$ gem install travis

2. IAM でユーザーを作成する。

S3へのフルアクセスのポリシーをつける。

3. S3 でバケットを作成する。

• バケット名はウェブサイトホスティングで公開するときのFQDNにしておく
• 静的ウェブサイト > ウェブサイトホスティングを有効にする にチェックをつける
  • インデックスドキュメント には index.html を指定

end point が {{バケット名}}.s3.amazonaws.com になるはず

4. .travis.ymlの設定

• .travis.yml ファイルを以下のように作成する

.travis.yml

language: node_js
node_js:
- "6"
before_deploy:
- npm run build
deploy:
  provider: s3
  bucket: {{bucket名}}
  region: ap-northeast-1
  endpoint: {{bucket名}}.s3-ap-northeast-1.amazonaws.com
  skip_cleanup: true
  local-dir: dist
  on:
    branch: master

デプロイ前に npm run build を実行するように指定
npm install , npm test はデフォルトで実行してくれた

• AWS S3へのアクセスキーとシークレットキーを追加する

$ travis --add deploy.access_key_id {{access_key_id}}
$ travis --add deploy.secret_access_key {{secret_access_key}}

.travis.ymlに以下のようにアクセスキーとシークレットキーが追加される

  access_key_id:
    secure: xxxxxxxxx
  secret_access_key:
    secure: xxxxxxxxx

※これを公開してしまっていいのか、よくわからなかった。

これで git push origin master すれば、S3の方にビルドしたファイルをアップロードしれくれる(はず)

5. CloudFront でDistributionの作成

• Origin Domain Name に 先程の S3 のエンドポイントを指定する (プルダウンで候補が表示される)
• Restrict Bucket Access の Yes にチェックをつける
• Origin Access Identity は Create a New Identity を指定する
• Comment は適当に指定
• Grant Read Permissions on Bucket に Yes ~ を指定する(S3のアクセスポリシーを更新してくれる)

• Alternate Domain Names(CNAMEs) に公開する予定のFQDNを指定する
• Default Root Object に index.html を設定

ちょっと時間がかかるがdistributionが作成され、
xxxxxx.cloudfront.net というドメインが作成される

6. Route 53 の設定

Route53 で　設定したいドメインのCNAMEレコードの値に xxxxxx.cloudfront.net を指定する

感想

S3での静的ホスティング, TravisCIでのデプロイが思ってたより簡単だった。
ただaccess_keyとsecret_keyは公開してもいいのかよくわかんなくてもやもやする。。。
github.com で調べたところ大体の人は環境変数から取得しているっぽかった
(ただ一部は公開していた)