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を有効化しておきます。
nuxt.config.jsの変更
nuxt.config.jsにserverオプションを追加します。
hostはlocalhostや127.0.0.1ではなく、0.0.0.0に設定する必要があります。
・nuxt.config.js
cloudbuild.yamlを作成する
cloudbuild.yamlの書き方は以下の公式サイトを参考にしています。
コンテナイメージをビルドして、Container Registryにプッシュしています。その後、Container RegistryからCloud Runにデプロイしています。
参考：
・cloudbuild.yaml
Dockerfileを作成する
次にNuxt.jsのアプリをコンテナ化するためにDockerfileを作成します。
参考：
・Dockerfile
gcloud initした後に以下のコマンドでcloudbuild.yamlのコマンドが走ります。
成功すると、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
