Nuxt3 サイトを Google Cloud Run にデプロイする方法（Dockerfile サンプル付き）
Nuxt 3 では、様々なホスティングサービスへのデプロイを最小限の設定で行えるよう、あらかじめいくつかの選択肢が用意されています。
しかし、これらのサービスにしかデプロイできないというわけではもちろんなく、node.js が動く環境であればデプロイ可能です。
今回はそんなNuxt3のアプリケーションを、GCPのGoogle Cloud Runにデプロイするまでの流れを書いてみます。
Google Cloud Run とは
Google Cloud Run は、複数あるGCPのサーバーレスサービスの中でも比較的新しく登場したサービスで、AWSでいうAWS App Runner に相当するものです。
Cloud Run は、Google のスケーラブルなインフラストラクチャ上でコンテナを直接実行できるマネージド コンピューティング プラットフォームです。
イメージしづらい方向けに誤解を恐れずに最小限の説明をすると、Dockerfileの設定に従って良い感じにサイトを運用してくれるサービスです。手順を見て頂ければわかりますが、Dockerfileを作れば後は簡単にデプロイまで進むことができます。
（Docker の説明は割愛しますが、今回の記事では Docker がよくわからなくてもデプロイに進めるように記載しているのでご安心ください。）
サイトを公開するまでの手順
Nuxtアプリケーションの構築
Nuxt 3のサイト構築そのものについてはこの記事では取り扱わないので、初期化のみ行います。
npx nuxi init nuxt-app
code nuxt-app
yarn install
preset が用意されていないので nuxt.config.ts はデフォルトで大丈夫です。
Dockerfile の作成
Cloud Run を Nuxt 2 にデプロイする際の Dockerfile のサンプルが公開されているので、それをベースに Nuxt 3 向けに調整しています。
FROM node:16-bullseye-slim
WORKDIR /usr/src/app
COPY package.json yarn.lock ./
RUN yarn
COPY . .
EXPOSE 8080
ENV HOST=0.0.0.0
ENV PORT=8080
RUN yarn build
CMD [ "yarn", "start" ]
この時点で Docker Desktop を使ってローカルで起動することもできますが割愛。
このファイルをトップディレクトリに保存したら、GitHub にリポジトリを作成してアップします。（Private Repository で構いません）
Google Cloud Run へのデプロイ設定
まず、GCPを使ったことがない場合は、Cloud SDK のインストール、プロジェクトの作成などを済ませます。以下のページを見ると一通りわかると思います。
まずは以下のコマンドで Cloud Build と Cloud Run を有効化します。（ダッシュボードから該当サービスのページを開いて有効化することもできますが、Cloud SDK を入れておいて損はないと思うのでここでは割愛します）
# Enabling Cloud Build
$ gcloud services enable cloudbuild.googleapis.com
# Enabling Cloud Run
$ gcloud services enable run.googleapis.com
Google Cloud Build は GCP版のCIサービスのようなもので、GitHub と連携してデプロイ設定を行うために必要になります。
次に、Google Cloud Runのページにアクセスします。
「サービスの作成」をクリックします。
「ソース リポジトリから新しいリビジョンを継続的にデプロイする」を選択し、その下の「SETUP WITH CLOUD BUILD」を選択します。
Manage connected repositories で GitHub アカウントと連携させ、リポジトリの閲覧権限をCloud Build に渡して、ソースリポジトリを選択して「次へ」をクリックします。
参照するブランチと、コンテナイメージの参照ファイルである Dockerfile が正しく設定されていることを確認したら「完了」。
あとは元々選択されている設定のまま、サービス名を入力し、お好みでリージョンを変えたりして「作成」を押します。認証は未認証のアクセスも許可します（「ウェブサイトを作成する場合」という説明があるので迷わないかと思います）。
この画面に遷移して設定が完了するのを待ちます。（このスクリーンショットではDockerfile の記述に不備があり一度ビルド失敗しています…）
設定を修正して push すると自動的に再デプロイが行われます。
これでデプロイは完了です！ ページ上部に表示されている URL からサイトを表示できるはずです。
おまけ：デプロイ設定を cloudbuild.yaml でコード管理する
Cloud Build のトリガー一覧 から、先ほど作成されたトリガーを確認できます。
作成されたトリガーを開くと、どこで Cloud Run のサービスを指定しているのか一見わかりづらいのですが、構成 > ロケーション を見ると、インラインで設定ファイルが記述されています。
この「エディタを開く」を選択することで内容を確認でき、ここと環境変数の組み合わせでデプロイ先や設定が細かく指定されていることがわかります。
①この中身をそのままコピーする
②リポジトリに cloudbuild.yaml というファイルを作成して、コピーした内容を貼り付ける
③ファイルを保存してコミット・プッシュする
④構成 > ロケーション をリポジトリに変更する
という流れで、Cloud Build のデプロイ設定も GitHub で管理することができます。
また、同じページの「イベント」を変更することで、リリースタグ や Webhook イベントなど別のトリガーで実行することもできます。複数の条件でデプロイしたい場合はトリガー一覧から複製することも可能です。
Firebase Hosting との接続
Cloud Run のコンテンツは Firebase Hosting を通して配信できます。
Firebase Hosting と Cloud Run を連携させることで、コンテンツのキャッシュ管理などがしやすくなり、設定もわかりやすくなります。
事前に npm install -g firebase-tools コマンドで Firebase CLI を使えるようにしておきます。
firebase init hosting コマンドで進めることもできますが、やることとしてはトップディレクトリに .firebaserc と firebase.json ファイルを作るだけです。
{
"projects": {
"default": "{project_name}"
}
}
ここでは最初に作成したプロジェクト名を指定します。（Firebase と GCP のプロジェクトは共通です）
{
"hosting": {
"rewrites": [
{
"source": "**",
"run": {
"serviceId": "{service_name}",
"region": "asia-northeast1"
}
}
]
}
}
serviceId では Cloud Runの「サービスの作成」の「サービス名」に入力した名前を入れて、regionに指定したリージョンを書きます。
sourceは "**" と書くことで全てのURLへのアクセスを Cloud Run に流すことができます。
firebase deploy コマンドでデプロイを行います。完了したら https://{project_name}.web.app でアクセスできます。
Firebase は Hosting から Cloud Run にリダイレクトさせているだけなので、一度設定をデプロイした後は、更新のたびにデプロイする必要はありません。（Cloud Run 側が再デプロイされれば自動で更新が反映されます）
以上でデプロイは完了です！
Nuxt 3 のデプロイ先に Cloud Run を選ぶメリット
Cloud Runを選ぶメリットは、設定の手軽さと拡張性のバランスだと感じました。
さすがにVercelやNetlifyなどのサービスに比べるとステップは多いですが、Dockerfile を作って GitHub にアップした後はブラウザ上でポチポチ進めているだけで設定が完了するというのはかなり体験として良いです。Dockerfile も一度作ってしまえば全ての Nuxt 3 サービスで使い回せるので、かなり使いやすい方だと思います。
特に、GCPにデプロイする場合の選択肢として、Firebase FunctionsとGoogle App EngineとCloud Runを全部試しましたが、Cloud Run が最も扱いやすかったです。
Firebase Functions のようなコールドスタート問題もなく、料金も高すぎるわけではない（おそらく通常の使い方なら無料で収まる）ため、基本的には Cloud Run を選んで良さそうです。
また、Vercel や Netlify の Freeプランだと商用利用や通信量の制限があったりしますが、Cloud Runであれば従量課金なので、無料枠を超える使い方でも数円～数十円で収まったりします。本格的なNuxt3 サイトを運用する場合はぜひ Cloud Run を使ってみてください。
この記事が Cloud Run（およびDockerfile）を使ったサイト構築・公開を行おうとしている方の参考になれば幸いです！
参考にさせて頂いた記事
Nuxt 3 にデプロイするシリーズ
これまでに書いたNuxt3関連記事
Discussion