[Advent Calendar 2021][Day11]Nuxt3をCloud Runにデプロイする

はじめに

Advent Calendar 2021のDay11。今回は、Nuxt3をCloud Runにデプロイしていきます。当初は、GoogleAppEngineにデプロイするよう考えていたのですが、下記の記事を読んで少し特殊な対応が必要そうなのがわかりました。Cloud Runのほうがストレートにできそうということで、予定変更です。

参考

https://zenn.dev/ytr0903/articles/81c8bed9a60702

Nuxt3をCloud Runにデプロイする

Nuxt3のDockerfileを作成する

FROM node:14.17.0 as builder
ARG GRAPHQL_URL

WORKDIR /app

COPY package.json yarn.lock ./
RUN yarn install \
    --prefer-offline \
    --frozen-lockfile \
    --non-interactive \
    --production=false

COPY . .
RUN GRAPHQL_URL=$GRAPHQL_URL yarn build

FROM node:14.17.0
WORKDIR /app

COPY --from=builder /app/package.json /app/package.json
COPY --from=builder /app/.output /app/.output
ENV NUXT_HOST 0.0.0.0
ENV NUXT_PORT 8080

CMD ["yarn", "start"]

GRAPHQL_URLを引数にとって、実行時にHasuraGraphQLのエンドポイントとして利用するようにします。

環境変数でエンドポイントを設定する

環境変数でエンドポイントを設定できるよう修正します。

nuxt3-app/nuxt.config.ts

export default defineNuxtConfig({
+    publicRuntimeConfig: {
+        graphqlURL: process.env.GRAPHQL_URL,
+    },
})

nuxt3-app/plugins/urql.ts

    const client = createClient({
-       url: 'http://localhost:8080/v1/graphql',
+       url: nuxt.$config.graphqlURL,
        exchanges: [
            dedupExchange,
            ssr,

Nuxt3のDockerイメージのビルド・デプロイする

Dockerイメージをビルドしてデプロイします。--build-argの値は、HasuraのCloud Runのエンドポイントを指定します。

docker build -t asia-northeast1-docker.pkg.dev/cloudandbuild-advent-calendar/advent-calendar/nuxt3-app . --build-arg=GRAPHQL_URL=https://hasura-graphql-7nqeahsy2q-an.a.run.app/v1/graphql
docker push asia-northeast1-docker.pkg.dev/cloudandbuild-advent-calendar/advent-calendar/nuxt3-app

Cloud Runでサービスを作成する

Hasuraのときと同様にCloud Runのコンソール画面から先程PushしたDockerイメージを指定してサービスを作成します。んー、ちゃんと動きません。。 CORSに関するエラーとHasuraのパーミッションに関するエラーが確認できたので、修正していきます。

Hasuraの修正

CORSに対応する

下記の記事にCORSの設定について書かれています。下記の環境変数を設定すると良さそうです。とりあえず全部許可で設定しておきます。カスタムドメインなど使っていれば、それを指定すべきでしょう。


HASURA_GRAPHQL_CORS_DOMAIN	*

参考

https://hasura.io/docs/latest/graphql/core/deployment/graphql-engine-flags/config-examples.html

匿名ユーザーを許可する

下記の記事にを参考にします。HASURA_GRAPHQL_UNAUTHORIZED_ROLEという環境変数を設定すると認証されていない匿名のユーザーロールを設定できるようです。


HASURA_GRAPHQL_UNAUTHORIZED_ROLE	anonymous

参考

https://hasura.io/docs/latest/graphql/core/auth/authentication/unauthenticated-access.html

匿名ユーザーに権限を与える

HasuraのコンソールにアクセスしてテーブルのPermissionタブを開きます。そこでEnter new roleのテキストフィールドに前述で指定した匿名ユーザ名のanonymousを入力し、insert, select, update, deleteの許可設定が出来ます。とりあえず、calendarsとparticipants tableのselectのみ許可しておきます。

メタデータの更新が行われるので、exportしておきます。

cd hasura
hasura metadata export

HasuraのDockerイメージのビルド・デプロイする

cd hasura
docker build -t asia-northeast1-docker.pkg.dev/cloudandbuild-advent-calendar/advent-calendar/hasura-graphql .
docker push asia-northeast1-docker.pkg.dev/cloudandbuild-advent-calendar/advent-calendar/hasura-graphql

その他

CloudSQLのインスタンス変更

共用インスタンスの512MBメモリのインスタンス（db-f1-micro）を使っていましたが、さすがに小さすぎるようで、接続不良が発生していました。共用インスタンスの1.7GBメモリのインスタンス（db-g1-small）に変更しました。

docker-composeの変更

前回Dockerfileを使って、Migration可能にしました。ローカルのDocker-Composeでも同じものを使いたいので変更します。また、ローカルのボリュームをマウントするとDocker ビルドするときに権限エラーがでて不都合がありました。ローカルのボリュームをマウントしない方法に変更します。

version: '3.6'
services:
  postgres:
    image: postgres:12
    restart: always
    volumes:
      - db_data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgrespassword
    ports:
      - "5432:5432"
  graphql-engine:
    build: hasura
    ports:
      - "8080:8080"
    depends_on:
      - "postgres"
    restart: always
    environment:
      ## postgres database to store Hasura metadata
      HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgrespassword@postgres:5432/postgres
      ## enable the console served by server
      HASURA_GRAPHQL_ENABLE_CONSOLE: "true" # set to "false" to disable console
      ## enable debugging mode. It is recommended to disable this in production
      HASURA_GRAPHQL_DEV_MODE: "true"
      HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
      ## uncomment next line to set an admin secret
      # HASURA_GRAPHQL_ADMIN_SECRET: myadminsecretkey
volumes:
  db_data: null

まとめ

今回は、Nuxt3をCloud Runにデプロイしました。次回は、Firebase Authenticationを利用してユーザ登録・削除機能を作っていきます。