Nuxt（SSR）をGAEに自動デプロイ（Cloud Build）

Nuxtプロジェクトの作成

create-nuxt-app

公式ドキュメント

https://nuxtjs.org/docs/get-started/installation

create-nuxt-appでプロジェクト作成。詳細は多くの記事があるので割愛。

nuxt.config.jsでSSRを指定。

nuxt.config.js

  ssr: true,
  target: 'server',

GAEのデプロイ設定

公式ドキュメント

https://nuxtjs.org/ja/deployments/google-appengine/

プロジェクト直下にapp.yamlを作成。

app.yaml

runtime: nodejs14

instance_class: F1

handlers:
  - url: /_nuxt
    static_dir: .nuxt/dist/client
    secure: always

  - url: /(.*\.(gif|png|jpg|ico|txt))$
    static_files: static/\1
    upload: static/.*\.(gif|png|jpg|ico|txt)$
    secure: always

  - url: /.*
    script: auto
    secure: always

env_variables:
  HOST: '0.0.0.0'

Google App Engineの作成

Cloud SDKのインストール

公式サイト

https://cloud.google.com/sdk/docs/install

Cloud SDK をインストールしていない場合は上記のとおりインストール。

Google App Engineの作成

公式サイト

https://cloud.google.com/appengine/docs/standard/nodejs/quickstart?hl=ja

まずは上記チュートリアルの「始める前に」をすべて終わらせる。

手動でデプロイ

Nuxtプロジェクトをビルドした後、gcloudコマンドでデプロイ

$ yarn build
$ gcloud app deploy
$ Do you want to continue (Y/n)? Y

以上でデプロイ完了
GAE上でNuxt.jsが起動して、ブラウザから閲覧できるようになっているはずです。

Cloud Buildで自動デプロイ

公式ドキュメント

https://cloud.google.com/build/docs/automating-builds/run-builds-on-github?hl=ja

基本的には上記のドキュメントを読めば良い。

Cloud Buildで環境変数を設定する

ビルド時に環境変数を設定したい場合。下記を参考に設定したがundefinedになってしまい・・・・

• https://sanshiro.dev/article/5746980898734080

少しハマったが、build時にCloud Buildの代入変数を読み込むようにしたらOK。

cloudbuild.yaml

steps:
  - name: node:14
    entrypoint: yarn
    args:
      - 'install'
  - name: node:14
    entrypoint: yarn
    args:
      - 'build'
    env:
      - 'ESTAT_APPID=$_ESTAT_APPID'
  - name: gcr.io/google.com/cloudsdktool/cloud-sdk
    id: Deploy
    entrypoint: gcloud
    args:
      - app
      - deploy
      - '--appyaml=${_APP_YAML}'
      - '--project=${PROJECT_ID}'
      - '--version=${_VERSION}'
      - '--quiet'
timeout: 1200s
options:
  substitutionOption: ALLOW_LOOSE
substitutions:
  _APP_YAML: 'app.yaml'
  _VERSION: '${COMMIT_SHA}'

Nuxt(SSR)とGAEで作ったアプリ

アプリ

https://statistics-hyogo.com/

## コード

https://github.com/dicechick373/statistics-hyogo