Nuxt.jsのSSRモードとGoogle App Engine（GAE）をつかうとウェブアプリがお手軽につくれそうだったので試してみました。

Nuxt.jsのインストール

公式ドキュメントの create-nuxt-app でセットアップ

今回はGAEでサーバサイドレンダリングしたいので、セットアップ時にSSRモードを選択
インストールには、Yarn を使いました

Nuxt.jsにデプロイ用設定

Nuxt.jsのルートディレクトリにGAEの設定ファイルをつくります
ドキュメントを参考にしました。（ https://ja.nuxtjs.org/docs/2.x/deployment/appengine-deployment/ ）

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'

基本は公式のサンプルのままですが少し変更しました

runtimeですが、公式ではnodejs10を指定していましたが、この記事を書いている時点でGAEにnodejs14がリリースされていたので、バージョンを変更して14を指定しました。
instance_class、今回は練習なので最小構成のF1です。

Google App Engine の作成

公式ドキュメント

1.上記ドキュメントの[始める前に]の項目にある準備が終わったら
2.Nuxt.jsのルートドキュメントで初期化コマンド

$ gcloud app create --project=[YOUR_PROJECT_ID]

3.ビルドしてデプロイするためのファイルを書き出す

$ yarn build

4.デプロイ

$ gcloud app deploy

5.（以下のコマンドで開けます）

$ gcloud app browse

以上でデプロイ完了
すでにGAE上でNuxt.jsが起動して、ブラウザから閲覧できるようになっているはずです。
フルマネージド型のサーバーレスプラットフォームとはよく言ったもので、サーバ周りをまるっと担ってくれます。
とても手軽で便利です。

Cloud Buildを使ってgithubリポジトリから自動的にデプロイ

さらにCloud Buildを使うと、githubにpushしたタイミングなどで自動的にデプロイできます。
トリガーは色々設定できますが、自分は決められた名前のtagをpushしたタイミングで発火するようにしました。

公式ドキュメント

デプロイ前に自動処理

自動デプロイの設定が終わったら、デプロイ時に一緒に実行してほしい処理を設定していきます。
cloudbuild.yaml というファイルで指示しておくと、デプロイ時に自動実行してくれます。

今回は

ビルド（Nuxt.jsからデプロイ用ファイルを書き出す）
環境変数の設定（リポジトリに保存したくない情報などをGAEに設定する）

の2点を実行するように設定しました。

ビルド

ビルドコマンドでデプロイ用の静的JSファイルなどを作成します。

環境変数の設定

GAEで使う環境変数は app.yaml の env_variables に書いておくとGAE環境に設定することができます。
しかし、自動デプロイのためには app.yaml をリポジトリにアップロードしないといけないので、DB接続情報などオープンにしたくない情報を保存するのに不安が残ります。
そこで、CloudBuildに変数を設定しておき、デプロイ前にapp.yamlに書き出すようにします。

今回つくったcloudbuild.yamlです。これをプロジェクトのルートに設置します。

cloudbuild.yaml

steps:
  - name: 'gcr.io/cloud-builders/gcloud'
    entrypoint: /bin/sh
    args:
      - '-c'
      - |
        cat << EOF > secret.yaml
        env_variables:
          DB_USER: $_DB_USER
          DB_PASSWORD: $_DB_PASSWORD
          DB_NAME: $_DB_NAME
        EOF
  - name: node
    entrypoint: yarn
    args:
      - 'install'
  - name: node
    entrypoint: yarn
    args:
      - 'build'
  - name: gcr.io/google.com/cloudsdktool/cloud-sdk
    id: Deploy
    entrypoint: gcloud
    args:
      - app
      - deploy
      - '--appyaml=${_APP_YAML}'
      - '--project=${PROJECT_ID}'
      - '--version=${_VERSION}'
      - '--quiet'

options:
  substitutionOption: ALLOW_LOOSE
substitutions:
  _APP_YAML: 'app.yaml'
  _VERSION: '${COMMIT_SHA}'

CloudBuidに設定した変数に合わせて env_variables: のところを書き換えます。


    env_variables:
        GAEの環境変数名: $_CloudBuild変数名
        GAEの環境変数名: $_CloudBuild変数名

みたいな書き方でGAEに送り込みたい環境変数の分だけ設定します。
それを、secret.yaml に書き出して、app.yaml にincludeするという仕組みです。（下でやります）

これで

CloudBuildの変数を環境設定ファイルに書き出し
Nuxtをビルド
デプロイ

が実行されます。

app.yaml修正

app.yamlの末尾に追加します。
cloudbuild.yamlで生成した環境変数をGAE設定ファイルにインクルードします。
これで、GAEデプロイ時に環境変数が設定されます。

app.yaml

...

includes:
  - secret.yaml

CloudBuild 参考サイト

Cloudbuildの設定で下記のサイトがとても参考になりました。

Nuxt.jsでAPIサーバを構築

サーバ側の構築と開発環境ができたので、あとはNuxt.jsをつかってアプリを作っていきます。

Nuxt.jsはSSRモードで構築するとserverMiddlewareが使えます。
サーバ側で動作する共通処理を実装できるので、これをつかって簡単なAPIサーバーが構築できます。
他のフレームワークや外部のサーバーを使わなくても、GAEとNuxt.jsだけで全部できるのでお手軽です。

serverMiddleware

Nuxt.js serverMiddlewareのドキュメント
カスタム API エンドポイント
を参考に作ります。

サンプルコードのままだと、express周りの使い方がすこし古いようでしたので新しいバージョンに合わせて修正しました。
ついでにTypeScriptで書き直しました

server-middleware/rest.ts

import express from 'express'

const app = express()

app.use(express.urlencoded({ extended: true }))
app.all('/getJSON', (_req: express.Request, res: express.Response) => {
  res.json({ data: 'hello world' })
})

module.exports = app

Nuxtの設定ファイルを記述

nuxt.config.js

serverMiddleware: [
  { path: "/api", handler: "~/server-middleware/rest.ts" },
],

これで、/api/getJSON がAPIサーバーとしてルーティングされて、JSONを返すようになりました。

/api/getJSON

{
  "data" : "hello world"
}

簡単なAPIサーバーならNuxtだけで作れます。

さいごに

とりあえず基本的なところのみでDBとの接続とかもしたんですがまとめていません。
GAEとNuxt.jsだけでウェブアプリケーションとその開発環境がつくれそうです。
いまさらだけどクラウドって楽しいですね。いろいろいじっていきたいです。