Amplify-CLI + Reactで超絶簡単ホスティング

今回は、Amplify-CLIを利用したWebアプリのホスティングを紹介します。（自身の備忘録として。）
手順は公式を参考に。

Amplify

アプリ作成の前にAmplifyの簡単なご紹介を。Amplifyは、WebやiOS、Androidといったフロントエンドとバックエンドの両方のアプリケーションリリースプロセスを自動化してくれるAWSのサービスです。Webのコンソールから設定するAmplify ConsoleとCLIがありますが、今回はCLIのご紹介を。

事前準備

amplify-cliのインストールと設定

npm install -g @aws-amplify/cli
amplify configure

create-react-appのインストール

npm install -g create-react-app

プロジェクト作成

Reactプロジェクトの作成

create-react-app my-project

amplifyの初期設定

cd my-project
amplify init

amplify-cliがインタラクティブに設定情報を聞いてくるので、回答していきます。
例えば以下のような感じ(基本的には、"return"だけでOK)

? Enter a name for the project my-project
? Enter a name for the environment dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you're building javascript
Please tell us about your project
? What javascript framework are you using react
? Source Directory Path:  src
? Distribution Directory Path: build
? Build Command:  npm run-script build
? Start Command: npm run-script start
Using default provider  awscloudformation

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html

? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use default

ここまで答えると、以下のようなメッセージが表示され、プロジェクトの初期化が始まります。

⠹ Initializing project in the cloud...

ホスティング

ホスティング情報追加

amplify add hosting

amplify-cliがインタラクティブに設定情報を聞いてくるので、回答していきます。
今回は、SSL公開にしてみます。

? Select the environment setup: PROD (S3 with CloudFront using HTTPS)
? hosting bucket name my-project-xxxxxxx
? index doc for the website index.html
? error doc for the website index.html

アプリを公開

amplify publish

実行すると、こんな感じで確認メッセージが表示されます。

Current Environment: dev

| Category | Resource name   | Operation | Provider plugin   |
| -------- | --------------- | --------- | ----------------- |
| Hosting  | S3AndCloudFront | Create    | awscloudformation |
? Are you sure you want to continue? Yes

無事Publishが完了すると、以下のようにEndpointが表示されます。（cloudformationで色々リソース作っているみたいなので、結構時間かかります。私の環境だと大体20分くらいかな。）

frontend build command exited with code 0
✔ Uploaded files successfully.
Your app is published successfully.
https://xxxxxxx.cloudfront.net

早速アクセスしてみます。

あれれ？？なんか期待しないURLにリダイレクトされてしまいます。。。このURLはS3の静的ホスティングのURLのようなので、S3の設定を確認してみます。

確かに、Static website hostingの設定が有効になっています。
このままでも動作はしますが、これだとS3のバケット名を知っている人はだれでも、非SSLでアクセスできてしまいセキュリティ上よろしくありません。また、CloudFront + WAFでIP制限とかをかけていきたいのでこの設定は無効にしておき、CloudFrontからの接続のみを許可するようにします。

設定はウェブホスティングを無効にするだけです。

設定変更後、無事CloudFrontのEndpointからのみアクセスできるようになりました。

補足：静的ホスティング設定を無効にした後も、静的ホスティングのURLにリダイレクトされる場合はCloudFrontのキャッシュが効いている可能性があります。
amplify publish --invalidateCloudFrontを実行、またはCloudFront DistributionsのInvalidationを作成して、キャッシュをクリアしてみてください。（反映までに時間がかかる（２０分くらい？）ので、気長に待ちましょう）

その他

amplify add hostingするとエラーページやTTLの設定なども良しなにしてくれますが、以下のコマンドでそれらを変更することもできます。
詳しくはこちらを参照。

amplify hosting configure

> Website
  CloudFront
  Publish

"Website" オプション
静的ホスティング用のS3バケットの設定。indexページとerrorページのファイル名を変更可能。初期値はどちらもindex.html

"CloudFront" オプション
CloudFront（CDN）の設定。キャッシュ動作のTTL(Time To Live)を変更可能。またエラーレスポンスをカスタマイズできる。

"Publish" オプション
publish対象外のファイルパターンを指定可能。（例えば、.gitignoreファイルなど）。このオプションで指定した名前にマッチしたパターンのディレクトリやファイルを配信対象から除外することができる。

まとめ

amplify-cliを使うと、たった４ステップ（+ひと手間）だけで簡単にWebアプリをホスティングできてしまいます。超絶簡単ですね。

• create-react-app "project name"
• amplify init
• amplify add hosting
• amplify publish (+ S3設定)