【Nuxt.js】Firebase Hosting + Cloud RunでSSRする方法

【Nuxt.js】Firebase Hosting + Cloud RunでSSRする方法

GCP

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を作成します。

参考:

How to deploy NuxtJS on Google Cloud Run?
ja.nuxtjs.org

 

・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