🚝

Next.jsで作ったBlogをCloud Runにデプロイする

2023/08/13に公開

Google Cloud

Next.js

Cloud Run

tech

gcloud CLIを使ってNext.jsでつくったBlogをCloud Buildを行い、Cloud Runにデプロイする方法を説明します。

前準備

gcloud CLIのインストール

Cloud Runにはgcloudを使ってデプロイします。
gcloud CLIのインストールは↓で説明しています。

使用するプロジェクト

Next.jsで作ったブログのサンプルを使います。
※ このサンプルは、SSRからSSGに変えたので、SSRの時のものを使います。

Webブラウザでの作業

GCPプロジェクトの作成

まず、WebブラウザからGCPでプロジェクトを作ります。
gcloudでもプロジェクトは作成できますが、課金情報の設定を行う必要があるので、Webブラウザでサクッと作ってしまってあとはgcloudから操作します。

プロジェクトの選択をクリックします。

プロジェクト名を入れて、作成ボタンを押します。

プロジェクト名を入れて、作成を押します。

プロジェクト名としてnextjs-blogを指定しています。
プロジェクト名からプロジェクトIDが作られますが、プロジェクトIDはGCPの全プロジェクトに対して一意であるので、すでに同じプロジェクト名がある場合は末尾に数字が付きます。

プロジェクトIDは次で使うので、メモしておきます。

gcloudでのAPIの有効化

ここからは、gcloudを使用して作業を行います。

Cloud BuildとCloud Runの有効化

Cloud Buildを使ってビルドを行いCloud Runにデプロイするため、APIの有効化します。
nextjs-blog-395615がプロジェクトIDです。

まずは、Cloud Buildの有効化をします。

$ gcloud services enable cloudbuild.googleapis.com --project nextjs-blog-395615
Operation "operations/acf.p2-257825501034-9c751851-120c-4642-9437-fd8eb1d79e4d" finished successfully.

次にCloud Runの有効化をします。

$ gcloud services enable run.googleapis.com --project nextjs-blog-395615
Operation "operations/acf.p2-257825501034-b882cc9b-4cf7-4dfe-bdfb-3800f71d699f" finished successfully.

Cloud Buildを使ったコンテナイメージのビルド

前準備でcloneした作業ディレクトリに移動して、以下を実行するとファイルがアップロードされてコンテナのイメージが作成されます。

コマンドの構成としては、以下の通りです。

gcloud builds submit --tag gcr.io/プロジェクトID/イメージ名 --project プロジェクトID

 gcloud builds submit --tag gcr.io/nextjs-blog-395615/nextjs-blog  --project nextjs-blog-395615

実行結果は長いので略。

デプロイ

ビルドが成功したらデプロイを行います。

コマンドの構成としては、以下の通りです。

gcloud run deploy サービス名 --image gcr.io/プロジェクトID/イメージ名 --platform managed --project プロジェクトID --region=リージョン --allow-unauthenticated

--allow-unauthenticatedは、認証なしでサービスへのアクセスを許可する設定です。
公開したくないサービスや開発中のサービスにはこのオプションを使用しないよう注意です。

$ gcloud run deploy nextjs-blog --image gcr.io/nextjs-blog-395615/nextjs-blog  --platform managed  --project nextjs-blog-395615 --region=asia-northeast1 --allow-unauthenticated
Deploying container to Cloud Run service [nextjs-blog] in project [nextjs-blog-395615] region [asia-northeast1]
✓ Deploying new service... Done.
  ✓ Creating Revision...
  ✓ Routing traffic...
  ✓ Setting IAM Policy...
Done.
Service [nextjs-blog] revision [nextjs-blog-00001-hik] has been deployed and is serving 100 percent of traffic.
Service URL: https://nextjs-blog-2z6bbc7r5a-an.a.run.app

一番最後にデプロイしたURLが出力されます。
アクセスするとCloud Runで正常に動作していることがわかります。

まとめ

今回は、gcloudをつかったCloud Build、Cloud Runについてまとめました。
Cloud Build、Cloud Runはgcloudの引数で指定していますが、cloudbuild.yamlに設定をまとめて記述する方法もあるようです。