Cloud BuildでReactアプリをGAEにデプロイする

こんにちはかみむらです。以前AWS Amplify ConsoleにReactアプリをホスティングする記事を書きました。
code-log.hatenablog.com

今回はGAE(Google App Engine)にホスティングします。GAEとはGoogleが提供するPaaSです。nodejsや、Go、Pythonなど、様々な言語に対応しています。特にGAEのエッジキャッシュは非常に強力で、設定ファイルのapp.yamlに数行記述するだけで設定が出来てしまいます。。今回はキャッシュ設定はしないので、気になる方はドキュメントを読んでみてください。

cloud.google.com

そして、CloudBuildでGAEへのデプロイを自動化します。実際にGAEをプロダクション環境で使うためにはCI/CDサービスを利用すると思います。CloudBuildはGoogleが提供しているCIサービスで、GAEとの連携も簡単です。

それでは実際にやってみます。

前提

GCPでクレジットカードが登録済みであることが必須です。課金設定を有効にしてください。
console.cloud.google.com

node.jsのパッケージマネージャに yarnを使います。開発時のyarnのバージョン

$ yarn --version
1.15.2

今回書いたソースの雛形はこちらにあります。
github.com

プロジェクトの作成

プロジェクトはcreate-react-appをベースにしていきます。コマンドラインで上で簡単にプロジェクトの雛形を作成してくれます。

$ npx create-react-app my-app

プロジェクトが作成されたら無事に動くか確認してみましょう。アプリを起動して、localhost:3000にアクセスしてみます。

$ cd my-app
$ yarn start

無事に起動しました。これがデプロイするプロジェクトのベースになります。

f:id:kamimura-dev:20191123103907p:plain

GAEのデプロイ設定

ここからはGAEにデプロイするため下準備をしていきます。app.yamlのファイルを作って、下記の内容を書きます。ここではビルドされたindex.htmlファイルをハンドラーで読み込むようにしています。
app.yaml

runtime: nodejs10
handlers:
- url: /
  static_files: build/index.html
  upload: build/index.html
  secure: always
- url: /
  static_dir: build

Cloud Buildの設定ファイルを作成

続いて、cloudbuild.yamlを作成します。これはCloud Buildでビルドするための設定ファイルになります。

こちらの設定は非常に単純で、yarnで依存関係をインストール後に、ビルドさせます。こちらは現在package.jsonのscriptsに設定されているbuildコマンドが走ります。そして、gcloudでGAEにデプロイします。

cloud.google.com

cloudbuild.yaml

steps:
- name: 'gcr.io/cloud-builders/yarn'
  args: ['install']

- name: 'gcr.io/cloud-builders/yarn'
  args: ['run', 'build']

- name: 'gcr.io/cloud-builders/gcloud'
  args: ['app', 'deploy', 'app.yaml']