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

undefined

はじめに

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/graphqldocker 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_ROLEanonymous

参考

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

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

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

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

cd hasurahasura metadata export

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

cd hasuradocker 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: myadminsecretkeyvolumes:  db_data: null

まとめ

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


クラウドアンドビルド株式会社

Cloud and Build, Inc.

クラウドアンドビルド株式会社は、Google Cloud パートナー企業です。

GCP 導入から開発・コンサルティングまでワンストップでお任せください。

お問い合わせ

デジタル変革を開始しますか?

お気軽にお問い合わせください。

contact_at_cloudandbuild.jp
所在地

〒104-0061

東京都中央区銀座2-14-8

ML20191021

Designed by Freepik
© 2020 Cloud and Build, Inc.