Netlify、 Surge、 Firebase HostingなどなどSPAをデプロイするためのホスティング・サービスはたくさんありますが、要件によってはAWSのスタックでS3+Cloudfrontを使ったシングル・ページ・アプリケーションの運用が必要になることもありますよね。
とはいえこのスタックだと、デプロイに必要なツールは揃っていないので、AWS SDKとGulpやGruntなどのタスクランナーを使ったフローを自前で容易しないといけない場合が多いです。面倒くさいですね。こんなときはScottyをつかいましょう。
Scottyとは
Deploy static websites and single page apps to AWS S3 and CloudFront with a single command
ScottyはAWS S3とCloudfrontへ静的なウェブサイトやシングル・ページ・アプリケーションをデプロイするためのツールで、それ以外の機能（たとえばロールバックやメンテナンスモードなど）はありません。
インストール
公式ではグローバル・インストールしています。
$ npm install -g scottyjs
特定のプロジェクトだけで必要なのであれば、devDependencyにしてもいいでしょう
$ npm install -D scottyjs
使い方
グローバルインストールしたのであれば、そのまま起動するだけです。
$ scotty --spa --source ./build
devDependencyとして追加したのであれば、package.jsonにデプロイコマンドを追加しておきましょう。
{
...
"scripts": {
...
"deploy": "npm run build && scotty --spa --source ./build"
}
}
npmが5.2以上であれば、npxを使って実行することもできます。
$ npx scotty --spa --source ./build
オプション
Scottyは最低限デプロイに必要なオプションがいくつか用意されているので紹介します。
--source
- デプロイするディレクトリを指定するためのオプションです。
- たとえばcreate-react-appの場合だと、
npm run buildで生成されるプロダクション・ビルドが/build以下に吐かれるので、この場合--source ./buildのように指定します。
--spa
- シングル・ページ・アプリケーションとしてデプロイするためのオプションです。
- このオプションを指定すると、エラー・ドキュメントも
index.htmlとして指定されます。
--website
- 静的なウェブサイトとしてデプロイするためのオプションです。
- 上の
--spaオプションの逆で、エラー・ドキュメントがerror.htmlに指定されます。
--bucket
- 対象となるバケットを指定します。これが指定されていないと、インタラクティブモードで実行時にバケットを選択する必要があります。
--region
- 対象となるリージョンを指定します。これが指定されていない場合、上と同じくインタラクティブモードでの選択が必要になります。
--nocdn
- ScottyはデフォルトでCloudfrontのディストリビューションをデプロイ後に作成します。これを無効にするオプションです。
- このデフォルトで作成されるディストリビューションだとPrice Classが
Use All Edge Locationに指定されないのがちょっと微妙です。
--update
- すでにバケットが存在している状態でこのオプションを指定しないと、毎回インタラクティブモードで「すでにバケットあるけど上書きする？」と利かれることになるので、毎度デプロイのたびに更新する場合にはこのオプションをつけましょう。
所感
とりあえずサクッとSPAをS3+Cloudfrontな環境にデプロイするのにはわりと使いやすいツールだなという気持ちです。最初はbapistranoというロールバックなどcapistranoと近い機能を持つフロントエンド・デプロイツールを検討していたのですが、メンテされない感があったのと、実際に使ってみると挙動が芳しくなかったのでこちらのScottyにしました。
コードベースもわりとキレイに作られているのと、仮に問題があってもPRを送りやすそうなのがGoodです