GatsbyJSをGAEにデプロイする

GatsbyJS をGoogle App Engine にデプロイする方法の備忘です。

app.yaml と cloudbuild.yaml を設定してCloud Buildのコマンドを叩くことでデプロイします。

Google App Engine の設定

まずは app.yaml の設定です。

基本は Hosting a static website on Google App Engine  |  App Engine standard environment for PHP  |  Google Cloud を参考にします。

ルーティングの都合上、拡張子を指定しない場合のリクエストは index.html にマッピングさせます。

runtime: php55
api_version: 1

handlers:
# file with extensions (e.g. .html)
- url: /(.*\..*)
  static_files: public/\1
  upload: public/(.*)

- url: /(.*)/
  static_files: public/\1/index.html
  upload: public/(.*)/index.html

- url: /
  static_files: public/index.html
  upload: public/index.html

- url: /(.*)
  static_files: public/\1/index.html
  upload: public/(.*)/index.html

skip_files:
  - node_modules/
  - src/
  - \.cache/
  - package\.json
  - yarn\.lock

Google Cloud Build の設定

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']

権限の設定

Google Cloud Build はデフォルトではAppEngineにデプロイする権限を持たないのでいい感じに設定してあげる必要があります。

appengine.serviceAdmin と appengine.deployer のroleを <project_number>@cloudbuild.gserviceaccount.com に設定してあげます。

Terraformを使った例では以下のようになります。

resource "google_project_iam_binding" "appengine-service-admin" {
  project = "${var.gcp_project}"
  role    = "roles/appengine.serviceAdmin"

  members = [
    "serviceAccount:${var.gcp_project_number}@cloudbuild.gserviceaccount.com",
  ]
}

resource "google_project_iam_binding" "appengine-deployer" {
  project = "${var.gcp_project}"
  role    = "roles/appengine.deployer"

  members = [
    "serviceAccount:${var.gcp_project_number}@cloudbuild.gserviceaccount.com",
  ]
}

Deploy

gcloudコマンドを叩くことでデプロイが完了します。

$ gcloud builds submit . --config=cloudbuild.yaml

プログラマのためのGoogle Cloud Platform入門 サービスの全体像からクラウドネイティブアプリケーション構築まで