daikiojm’s diary

ブログを書くときがやってきたどん！

ScottyでAngularSPAをS3+CloudFrontにデプロイ

Angular AWS 開発環境

CI環境上または、開発環境上でビルドしたファイルをS3にデプロイする際には、s3 syncなどのコマンドを使うことが多いかと思います。
そんな時、Scottyが割と便利だったのでAngular CLIで作成したSPAをデプロイする前提で簡単に使い方を紹介します。

前提

  • AWS credentialsが設定されている
  • デプロイ先のS3バケットは作成済みである
  • Node.js(v6.9以上)が使える
  • Angular CLIがインストールされている

ひとまずやってみる

今回は、ng newした直後のAnguarプロジェクトをng buildした結果生成されるファイルをScottyを使ってデプロイします。

Scottyをグローバルインストール

$ npm install -g scottyjs

ビルド

$ ng build --prod

scottyコマンドを叩きデプロイ

$ scotty --bucket scotty-angular-test --region ap-northeast-1 --spa --update --source ./dist

CloudFrontを作成しない場合

$ scotty --bucket scotty-angular-test --region ap-northeast-1 --spa --update --nocdn --source ./dist

※ 実行時のオプションパラメータはREADMEを参照

f:id:daikiojm:20180313093858p:plain

scottyコマンドを実行した後数分で、CloudFront ウェブディストリビューションの状態が有効になり、CloudFrontに設定されたURLでS3にでデプロイされたAngular SPAにアクセスできるようになります。

npm scriptsにビルド+デプロイコマンドを定義

上記の手順をnpm scriptsにまとめてしまいます。

{
  "name": "scotty-test",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod",
    "deploy": "npm run build && scotty --bucket scotty-angular-test --region ap-northeast-1 --spa --update --source ./dist",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
...

また、Scottyがグローバルインストールされていない環境でも利用できるよう、devDependencyに登録しておきます。(この場合グローバルにインストールされている必要はない)

$ npm install --save-dev scottyjs

所感

現状S3への簡単なデプロイ方法として s3 syncコマンドを使う方法があるけど、Scottyの場合、devDependencyでプロジェクトに追加して、npm scriptsから呼び出せるので別でビルド(orローカル開発)環境にAWS CLIが必要ないのがよい。
「手元でサクッとビルドしてとりあえず確認環境を構築したい!」といった用途に向いているかなぁという印象。

参考