Help us understand the problem. What is going on with this article?

ScottyでSPAをS3+Cloudfrontに簡単デプロイ

More than 3 years have passed since last update.

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です:ok_hand:

IzumiSy
Elmエンジニャー / https://dev.to/izumisy
https://izumisy.work
fringe81
Fringeは、最新のテクノロジーとプロフェッショナルによるサービスにより、社会課題に仮説を立てて市場に広げていくことで、数十年という長期的なスパンで価値を生み出し続け、より良い世界を創る集団です。 既存の領域に限らず、時流を読み、仮説を生み出し、テクノロジーの力で優れたサービスを生み出し続けます。
https://www.fringe81.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away