Next.jsで、アプリを色々作っているのですが、他の人に共有するためにCloud Runで簡単な公開をします。

やりたいこと

以下のようにNext.JSの静的アプリケーションをCloud Runでホスティングします。

開発環境

Macbook Air Apple M1
macOS Sonoma 14.3.1

GCPでの作業

GCPの初期設定

gcpコマンドに迷ったらここを参照

Cloud Runで、Next.jsアプリのホスティング

基本的にこちらを参考にCloud Run へのホスティングを実施

Cloud Buildの有効化

$ gcloud services enable cloudbuild.googleapis.com --project <gcpのプロジェクトID>

Cloud Runの有効化

$ gcloud services enable run.googleapis.com --project <gcpのプロジェクトID>

example >>>
$ gcloud services enable run.googleapis.com --project nextjs-blog-395615

Cloud Buildで、コンテナイメージのビルド

$  gcloud builds submit --tag gcr.io/<gcpのプロジェクトID>/<アプリケーション名>  --project <gcpのプロジェクトID>

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

デプロイ

$ gcloud run deploy <アプリケーション名> --image gcr.io/<gcpのプロジェクトID>/<アプリケーション名>  --platform managed  --project <gcpのプロジェクト名> --region=asia-northeast1 --allow-unauthenticated

example >>>
$ gcloud run deploy nextjs-blog --image gcr.io/nextjs-blog-395615/nextjs-blog  --platform managed  --project nextjs-blog-395615 --region=asia-northeast1 --allow-unauthenticated

これで、Cloud Runにデプロイが完了します。

Cloud Storageから、Staticファイルを引っ張ってくる設定

以下を参考に、3Dモデルなどのファイルサイズの重いファイルをCloud Storageから引っ張ってくるようにする。

今回はクライアントサイドアプリからの実行のため、全てのアクセスを許可する設定にしていますが、不特定多数のアクセスの可能性があるため高額になるリスクがあります

まずは、Cloud Storageに特定のファイルをアップロード

Cloud Storageのアクセス権でパブリックアクセスを許可

クライアントから直接Cloud Storageにアクセスするため、各Staticファイルのアクセス権を編集します。

アクセス権に、以下を設定して、すべてのユーザがアクセス可能な状態にします。

エンティティ： Public
名前： allUsers
アクセス権： Reader

Cloud StorageにCORSを設定する

Webアプリのため、Cloud Storageのファイルにアクセスすると、CORSエラーに引っかかります。
なので、Cloud Storage側のCORSの設定を以下を参考に実施します。

config.json
jsonにてCORSを設定します。

originに、許可するURLを設定します。

[
    {
      "origin": ["http://localhost:8080"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 300
    }
]

適用

Cloud Storageに設定を反映します

gsutils cors set cors.json gs://<Cloud StorageのURL>

CORSの反映には少し時間がかかります。

完成

これで、Next.jsのクライアントサイドアプリを、Cloud Runにデプロイして運用を始めることができました。

今後、Firebase Authenticationで、特定のGoogle アカウントからのみのアクセスを許可する形で実施できればと思います。

初心者のGCP：Cloud Run編