😺

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

に公開
Google Cloud
React
App Engine
tech

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: nodejs10

instance_class: F1

automatic_scaling:
  max_instances: 1
  min_instances: 1

default_expiration: '30d'

handlers:
  - url: /static
    static_dir: build/static
  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$
  - url: .*
    static_files: build/index.html
    upload: build/index.html
    expiration: '0s'

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

:warning: 追記: キャッシュについて :warning:

default_expirationオプションですべてのファイルのブラウザキャッシュを有効に設定してしまうと、404エラーが発生し、真っ白の画面が表示されることがあります。(なお、default_expirationが指定されていない場合でも、デフォルトでキャッシュ期間が10分に設定されます)

Create React Appのドキュメントによると、build/index.htmlはキャッシュしないようにする必要があるので、明示的にexpirationオプションに'0s'を指定して、キャッシュを無効にします。

gcloud app deployでGAEにデプロイ

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

gcloud app deploy

Discussion