Firebase HostingでホスティングしたNuxt.jsプロジェクトを一部Cloud RunでSSRする方法を紹介します。なおFirebase HostingとCloud Runは同じプロジェクト内で作成する必要があります。
目次
Nuxt.jsのアプリをコンテナ化し、Container Registryに登録し、Cloud Runにデプロイする方法
Cloud BuildとCloud Runの有効化
まずはCloud Build APIとCloud Run APIを有効化しておきます。
1 2 | # Cloud Buildの有効化 $ gcloud services enable cloudbuild.googleapis.com |
1 2 | # Cloud Runの有効化 $ gcloud services enable run.googleapis.com |
nuxt.config.jsの変更
nuxt.config.jsにserverオプションを追加します。
hostはlocalhostや127.0.0.1ではなく、0.0.0.0に設定する必要があります。
・nuxt.config.js
1 2 3 4 5 6 7 | export default { server: { port: 3000, // default: 3000 host: '0.0.0.0', // default: localhost, timing: false } } |
cloudbuild.yamlを作成する
cloudbuild.yamlの書き方は以下の公式サイトを参考にしています。
コンテナイメージをビルドして、Container Registryにプッシュしています。その後、Container RegistryからCloud Runにデプロイしています。
参考：
・cloudbuild.yaml
1 2 3 4 5 6 7 8 9 10 11 12 13 | steps: # Build the container image - name: 'gcr.io/cloud-builders/docker' args: ['build', '-t', 'gcr.io/test-staging/nuxt-ssr', '.'] # Push the container image to Container Registry - name: 'gcr.io/cloud-builders/docker' args: ['push', 'gcr.io/test-staging/nuxt-ssr'] # Deploy container image to Cloud Run - name: 'gcr.io/google.com/cloudsdktool/cloud-sdk' entrypoint: gcloud args: ['run', 'deploy', 'nuxt-ssr-test', '--image', 'gcr.io/test-staging/nuxt-ssr', '--region', 'asia-northeast1', '--platform', 'managed', '--port', '3000'] images: - gcr.io/test-staging/nuxt-ssr |
Dockerfileを作成する
次にNuxt.jsのアプリをコンテナ化するためにDockerfileを作成します。
参考：
・Dockerfile
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | FROM node:14 # https://docs.docker.jp/engine/reference/builder.html#workdir WORKDIR /usr/src/app COPY package.json ./ RUN npm install COPY . . # https://docs.docker.jp/engine/reference/builder.html#expose # EXPOSE 命令はコンテナの実行時に、所定ネットワーク上のどのポートをリッスンするかを指定 EXPOSE 3000 RUN npm run build CMD [ "npm", "run", "start" ] |
gcloud initした後に以下のコマンドでcloudbuild.yamlのコマンドが走ります。
1 | $ gcloud builds submit |
成功すると、Container Registryにコンテナイメージが登録され、Cloud Runにコンテナがデプロイされていることが確認できます。
・Container Registry
・Cloud Run
Cloud Runにデプロイしたリソースにメンバーとロールの追加
Cloud Runにデプロイしたままでは、デプロイしたアプリは誰もアクセスすることができません。
アクセスできるようにするために、Cloud Runにデプロイしたリソースにメンバーとロールを追加します。
ここでは全てのユーザが見れるようにメンバーを「allUsers」にし、ロールを「Cloud Run起動元」で追加します。「allUsers」すると、デプロイしたリソースは一般公開され、インターネット上から誰でもアクセスできる状態になるため、注意していください。
保存後、Cloud Runに記載されているURLにアクセすることができるようになります。
Firebase HostingからCloud Runにリクエストをリダイレクトする
Firebase HostingでホスティングしたNuxt.jsプロジェクトを一部Cloud RunでSSRします。Cloud RunでSSRしたいリソースをfirebase.jsonのrewritesに追加します。
今回の場合は、/testsをCloud Runのリソースを使うようにします。つまり、/testsへのアクセスがあった場合にFirebase Hostingのリソースを使わずに、Cloud Runのリソースを使うようリクエストをリダイレクトします。
なおFirebase Hostingの/testsのリソースは空にしておかないと、正常にリダイレクトされないので注意しましょう。
serviceIdは先ほどデプロイしたCloud Runのサービス、regionはCloud Runで使用しているリージョンを選択します。後はfirebase.jsonをデプロイして完了です。
・firebase.json
1 2 3 4 5 6 7 8 9 10 11 12 13 | ... "rewrites": [ { "source": "/tests", "run": { "serviceId": "nuxt-ssr-test", "region": "asia-northeast1" } } ], ... |