Create React Appで作成したReactアプリをGoogle App Engineにデプロイする際の設定

Create React Appで作成したReactアプリをGAEにデプロイする際に、少し設定ファイルの工夫が必要だったので共有します。

ざっくりした手順

1. yarn run buildやnpm run buildでリリースビルドを作成
2. app.yamlでデプロイ時の設定を指定
3. gcloud app deployでGAEにデプロイ

通常これらはCI上で行われるべきものですが、手元の開発環境でも実行できます。
(今回、手順3.の詳細は説明しません)

yarn buildでリリースビルドを作成

Create React Appで作成したReactアプリでは、buildコマンドを実行することで、簡単にリリースビルドを作成することができます。
リリースビルドの成果物はだいたい以下のような構造になっています。

build
├ static
  └ js
    ├ ~~~~.js
    ├ ...
    └ ~~~~.js
├ asset-manifest.json
├ favicon.ico
├ manifest.json
├ ...
└ service-worker.js

cssがある場合はstaticの下にcssディレクトリができるかもしれません(未確認)

app.yamlでデプロイ時の設定を指定

URLとリリースビルドの成果物のマッピングを行うため、handlersの設定が必要です。
設定ファイルを以下のようになります。

runtime:nodejs10instance_class:F1automatic_scaling:max_instances:1min_instances:1default_expiration:'30d'handlers:-url:/staticstatic_dir:build/static-url:/(.*\.(json|ico|js))$static_files:build/\1upload:build/.*\.(json|ico|js)$-url:.*static_files:build/index.htmlupload:build/index.html

handlersの設定では、

• /staticにはリリースビルド成果物のbuild/staticマッピング
• /(.*\.(json|ico|js))$にはリリースビルド成果物のbuild/.*\.(json|ico|js)$をマッピング
  • 正規表現を使っています(ここでは拡張子がjson, ico, jsのいずれかのファイルのみアップロードしてマッピングしています)
• 上記以外のURLには、build/index.htmlをマッピングします
  • この設定がないと、アドレスバーから直接特定の子ページに移動する際、404エラーが発生する場合があります

なお、お試し用なので、マシンタイプをF1に、インスタンスをオートスケールしないように設定しています。
それがこの部分です。

instance_class: F1

automatic_scaling:
  max_instances: 1
  min_instances: 1

また、default_expirationではキャッシュを指定します(ここではキャッシュ期間を30日に指定しています)

gcloud app deployでGAEにデプロイ

後は、以下のコマンドを叩けば手元のbuildディレクトリ以下のファイルがGAEにデプロイされます。

gcloud app deploy