[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/graphqldocker push asia-northeast1-docker.pkg.dev/cloudandbuild-advent-calendar/advent-calendar/nuxt3-appCloud 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 hasurahasura metadata exportHasuraの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を利用してユーザ登録・削除機能を作っていきます。
