【2025年最新】Next.jsをGCP Cloud RunにGitHub Actionsで自動デプロイする完全ガイド

【2025年最新】Next.jsをGCP Cloud RunにGitHub Actionsで自動デプロイする完全ガイド
著者: nero15
開発

Next.jsアプリをGCP Cloud Runにデプロイする際、毎回「あれ、どのAPIを有効化するんだっけ?」「サービスアカウントの権限設定はどうだったかな?」と忘れてしまうことがありました。

特に新規プロジェクトを立ち上げる際、GCPプロジェクトの作成からGitHub Actionsによる自動デプロイまでの一連の流れを毎回調べ直すのは非効率です。

そこで、自分自身の備忘録として、また同じ課題を抱えるエンジニアの役に立つように、この記事をまとめることにしました。

※この記事は実際に運用しているアプリケーションをベースに書いていますが、すでに何度も改修を繰り返しており、記憶ベースで書いている部分も含まれます。そのため、このフロー通りに進めれば100%スムーズにデプロイできることを保証するものではありません。環境やプロジェクトの状況によっては、追加の設定や調整が必要になる可能性があります。

この記事のゴール

この記事を読み終えると、以下のことができるようになります:

  1. GCPプロジェクトをゼロから作成して、必要なAPIを有効化できる
  2. サービスアカウントを正しく設定して、GitHub Actionsからデプロイできるようにする
  3. Next.jsアプリをCloud Run対応にする(Dockerfile、cloudbuild.yml作成)
  4. GitHub Actionsワークフローを設定して、mainブランチへのpushで自動デプロイできるようにする
  5. 実際にデプロイを実行して、Cloud Run上でアプリが動作することを確認できる

この記事で扱わないこと

以下のトピックは記事が長くなりすぎるため、別記事で詳しく解説予定です:

  • カスタムドメイン設定とDNSマッピング(お名前.comやムームードメインでの設定)
  • 環境変数の詳細な管理方法(開発環境・本番環境の切り替え)

前提条件

  • GCPアカウント作成済み
  • GitHubリポジトリ作成済み
  • Next.js 15プロジェクトがローカルで動作している
  • gcloud CLIがインストール済み(インストール方法

完成後のディレクトリ構造

この記事で作成するファイルは以下の通りです:

my-nextjs-app/
├── .github/
│   └── workflows/
│       └── deploy.yml          # 🆕 GitHub Actionsワークフロー
├── app/
│   ├── layout.tsx
│   └── page.tsx
├── public/
├── Dockerfile                  # 🆕 Dockerイメージ定義
├── cloudbuild.yml              # 🆕 Cloud Build設定
├── next.config.ts              # ✏️ 修正(output: 'standalone'を追加)
├── package.json
├── pnpm-lock.yaml
└── tsconfig.json

新規作成するファイルは3つ、修正するファイルは1つです。


1. GCPプロジェクトの作成

1-1. GCPコンソールからプロジェクトを作成

  1. Google Cloud Console にアクセス
  2. 画面上部の「プロジェクトを選択」→「新しいプロジェクト」をクリック
  3. プロジェクト情報を入力:
    • プロジェクト名: my-nextjs-app(任意)
    • プロジェクトID: my-nextjs-app-12345(グローバルで一意である必要があります)
    • 組織: 個人利用の場合は「組織なし」でOK
  4. 「作成」をクリック

1-2. プロジェクトIDとプロジェクト番号を控える

作成したプロジェクトのダッシュボードで以下を確認してメモしておきます:

  • プロジェクトID: my-nextjs-app-12345
  • プロジェクト番号: 123456789012(後で使用します)

スクリーンショット 2025-10-13 0.23.42.png

1-3. gcloud CLIでプロジェクトを設定

ターミナルで以下を実行してプロジェクトを切り替えます:

# GCPにログイン(初回のみ)
gcloud auth login

# プロジェクトを設定
gcloud config set project my-nextjs-app-12345

# 設定確認
gcloud config list

2. 必要なAPIの有効化

GitHub ActionsからCloud Runにデプロイするには、以下の4つのAPIを有効化する必要があります。

2-1. APIの一括有効化

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  containerregistry.googleapis.com \
  artifactregistry.googleapis.com

2-2. 各APIの役割

API役割
Cloud Run API
(run.googleapis.com)
Cloud Runサービスの作成・管理・デプロイに必要
Cloud Build API
(cloudbuild.googleapis.com)
Dockerイメージのビルドプロセスを実行
Container Registry API
(containerregistry.googleapis.com)
ビルドしたDockerイメージを保存(GCR)
Artifact Registry API
(artifactregistry.googleapis.com)
新世代のイメージレジストリ(推奨)

2-3. 有効化されたAPIを確認

gcloud services list --enabled

上記4つのAPIが表示されればOKです。


3. サービスアカウントの作成と権限設定

GitHub ActionsとCloud Buildがリソースにアクセスできるよう、サービスアカウントを作成して権限を付与します。

3-1. GitHub Actions用サービスアカウントの作成

gcloud iam service-accounts create github-actions \
  --display-name="GitHub Actions Deployment" \
  --project=my-nextjs-app-12345

3-2. GitHub Actions用サービスアカウントに権限を付与

以下の4つのロールを付与します:

# 1. Cloud Run管理者(サービスのデプロイ・管理)
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:github-actions@my-nextjs-app-12345.iam.gserviceaccount.com" \
  --role="roles/run.admin"

# 2. Cloud Build編集者(ビルドの実行)
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:github-actions@my-nextjs-app-12345.iam.gserviceaccount.com" \
  --role="roles/cloudbuild.builds.editor"

# 3. Storage管理者(イメージのプッシュ・取得)
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:github-actions@my-nextjs-app-12345.iam.gserviceaccount.com" \
  --role="roles/storage.admin"

# 4. サービスアカウントユーザー(他のサービスアカウントを使用)
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:github-actions@my-nextjs-app-12345.iam.gserviceaccount.com" \
  --role="roles/iam.serviceAccountUser"

3-3. JSON鍵ファイルの生成

GitHub ActionsからGCPにアクセスするための認証鍵を生成します:

gcloud iam service-accounts keys create ~/my-nextjs-app-github-actions-key.json \
  --iam-account=github-actions@my-nextjs-app-12345.iam.gserviceaccount.com \
  --project=my-nextjs-app-12345

生成された~/my-nextjs-app-github-actions-key.jsonは次のステップで使用します。

3-4. Cloud Build用サービスアカウントに権限を付与

Cloud BuildがCloud Runにデプロイできるよう、Cloud Buildのデフォルトサービスアカウントにも権限を付与します:

# プロジェクト番号を設定(手順1-2で控えた番号)
PROJECT_NUMBER="123456789012"

# Cloud Run管理者権限を付与
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:${PROJECT_NUMBER}@cloudbuild.gserviceaccount.com" \
  --role="roles/run.admin"

# サービスアカウントユーザー権限を付与
gcloud projects add-iam-policy-binding my-nextjs-app-12345 \
  --member="serviceAccount:${PROJECT_NUMBER}@cloudbuild.gserviceaccount.com" \
  --role="roles/iam.serviceAccountUser"

4. GitHub Secretsの設定

生成したJSON鍵をGitHub Secretsに安全に保存します。

4-1. JSON鍵の内容を確認

cat ~/my-nextjs-app-github-actions-key.json

出力された内容全体をコピーします。

4-2. GitHub SecretsにJSON鍵を登録

  1. GitHubリポジトリのページを開く
  2. SettingsSecrets and variablesActions
  3. New repository secretをクリック
  4. 以下の2つのシークレットを作成:

スクリーンショット 2025-10-13 0.26.39.png

Secret 1: GCP_SA_KEY

  • Name: GCP_SA_KEY
  • Value: 手順4-1でコピーしたJSONの内容全体を貼り付け
{
  "type": "service_account",
  "project_id": "my-nextjs-app-12345",
  "private_key_id": "...",
  "private_key": "-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n",
  ...
}

Secret 2: GCP_PROJECT_ID

  • Name: GCP_PROJECT_ID
  • Value: my-nextjs-app-12345(あなたのプロジェクトID)

5. Next.jsアプリのCloud Run対応

5-1. next.config.ts の設定

Cloud Runで動作させるためにnext.config.tsを修正します:

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // Cloud Run用にスタンドアロンビルドを有効化
  output: 'standalone',

  // ポート設定(Cloud Runはデフォルトで8080を使用)
  // 環境変数PORTが設定されていればそれを使用
};

export default nextConfig;

5-2. Dockerfile の作成

プロジェクトルートにDockerfileを作成します:

# Dockerfile
# マルチステージビルド: 依存関係のインストール
FROM node:24-alpine AS deps
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm install --frozen-lockfile --prod

# マルチステージビルド: アプリケーションのビルド
FROM node:24-alpine AS builder
WORKDIR /app
COPY package.json pnpm-lock.yaml ./
RUN corepack enable pnpm && pnpm install --frozen-lockfile
COPY . .

# ビルド時環境変数の設定
ARG APP_ENV
ENV APP_ENV=$APP_ENV

# Next.jsビルド(NODE_ENVは常にproduction)
ENV NODE_ENV=production
RUN pnpm run build

# マルチステージビルド: 実行用の軽量イメージ
FROM node:24-alpine AS runner
WORKDIR /app

# 本番環境の設定
ENV NODE_ENV=production

# セキュリティ: 非rootユーザーでの実行
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

# Standalone出力をコピー
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

# 非rootユーザーに切り替え
USER nextjs

# Cloud Runのデフォルトポート
EXPOSE 8080

# 環境変数でポートを設定
ENV PORT=8080
ENV HOSTNAME="0.0.0.0"

# アプリケーションの起動
CMD ["node", "server.js"]

5-3. cloudbuild.yml の作成

Cloud Buildの設定ファイルを作成します:

# cloudbuild.yml
steps:
  # Dockerイメージのビルド
  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'build'
      - '-t'
      - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:latest'
      - '-t'
      - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:$SHORT_SHA'
      - '.'

  # GCRにイメージをプッシュ
  - name: 'gcr.io/cloud-builders/docker'
    args:
      - 'push'
      - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:latest'

  # Cloud Runにデプロイ
  - name: 'gcr.io/cloud-builders/gcloud'
    args:
      - 'run'
      - 'deploy'
      - '${_SERVICE_NAME}'
      - '--image'
      - 'gcr.io/$PROJECT_ID/${_SERVICE_NAME}:latest'
      - '--platform'
      - 'managed'
      - '--region'
      - 'asia-northeast1'
      - '--allow-unauthenticated'
      - '--memory'
      - '1Gi'
      - '--cpu'
      - '1'
      - '--set-env-vars'
      - 'APP_ENV=${_APP_ENV}'

# ビルド設定
options:
  machineType: 'E2_HIGHCPU_8'
  logging: CLOUD_LOGGING_ONLY

timeout: '1200s'

# 置換変数(GitHub Actionsから渡される)
substitutions:
  _SERVICE_NAME: 'my-nextjs-app'
  _APP_ENV: 'production'

6. GitHub Actionsワークフローの作成

.github/workflows/deploy.ymlを作成します:

# .github/workflows/deploy.yml
name: Deploy to Cloud Run

on:
  push:
    branches:
      - main  # mainブランチへのpushでデプロイ

jobs:
  deploy:
    runs-on: ubuntu-latest

    steps:
      # コードのチェックアウト
      - name: Checkout code
        uses: actions/checkout@v4

      # GCPへの認証
      - name: Authenticate to Google Cloud
        uses: google-github-actions/auth@v2
        with:
          credentials_json: ${{ secrets.GCP_SA_KEY }}

      # gcloud CLIのセットアップ
      - name: Set up Google Cloud CLI
        uses: google-github-actions/setup-gcloud@v2
        with:
          project_id: ${{ secrets.GCP_PROJECT_ID }}

      # Dockerの認証設定
      - name: Configure Docker to use gcloud
        run: |
          gcloud auth configure-docker

      # Cloud Buildでビルド&デプロイ
      - name: Deploy to Cloud Run
        run: |
          gcloud builds submit \
            --config cloudbuild.yml \
            --substitutions _SERVICE_NAME=my-nextjs-app,_APP_ENV=production \
            --project ${{ secrets.GCP_PROJECT_ID }}

      # デプロイ完了後のURL表示
      - name: Get deployment URL
        run: |
          URL=$(gcloud run services describe my-nextjs-app \
            --region asia-northeast1 \
            --format 'value(status.url)')
          echo "🚀 Deployment successful!"
          echo "URL: $URL"

7. デプロイの実行と確認

7-1. デプロイの実行

  1. 上記のファイル(Dockerfilecloudbuild.yml.github/workflows/deploy.yml)をコミット
  2. GitHubにプッシュ:
git add .
git commit -m "feat: add Cloud Run deployment configuration"
git push origin main
  1. GitHub Actionsが自動的に起動します

7-2. デプロイの進行状況を確認

GitHubで確認

  1. GitHubリポジトリの Actions タブを開く
  2. 実行中のワークフローをクリック
  3. 各ステップの進行状況とログを確認

GCPコンソールで確認

  1. Cloud Build履歴を開く
  2. 実行中のビルドをクリックしてログを確認

7-3. デプロイ完了後の確認

デプロイが成功すると、GitHub Actionsのログに以下のようなURLが表示されます:

🚀 Deployment successful!
URL: https://my-nextjs-app-xxxxx-an.a.run.app

スクリーンショット 2025-10-13 0.28.56.png

このURLにアクセスしてアプリが正常に動作していることを確認します。

7-4. Cloud Runサービスの確認

# サービス一覧を表示
gcloud run services list --region=asia-northeast1

# サービスの詳細を表示
gcloud run services describe my-nextjs-app --region=asia-northeast1

まとめ

この記事では、GCPプロジェクトの作成からNext.jsアプリのCloud Runへの自動デプロイまでを解説しました。

ポイントのおさらい

  1. 4つのAPIを有効化: Cloud Run、Cloud Build、Container Registry、Artifact Registry
  2. 2つのサービスアカウントに権限付与: GitHub Actions用とCloud Build用
  3. GitHub Secretsに認証情報を登録: GCP_SA_KEY、GCP_PROJECT_ID
  4. 3つのファイルを作成: Dockerfile、cloudbuild.yml、deploy.yml
  5. mainブランチへのpushで自動デプロイ: GitHub Actionsが自動実行

デプロイフロー全体像

コード変更 → git push → GitHub Actions起動
  ↓
GCP認証 → Cloud Build実行
  ↓
Dockerイメージビルド → GCRにプッシュ
  ↓
Cloud Runにデプロイ → 完了

コスト見積もり

  • Cloud Run: 月2百万リクエストまで無料、小規模アプリならほぼ無料
  • Cloud Build: 1日120ビルド分まで無料、通常のデプロイなら無料枠内
  • Container Registry: ストレージ料金のみ(月数円〜数十円程度)

最終更新: 2025年10月12日

このコンテンツは役に立ちましたか?

サーバー代やコンテンツ制作費として、コーヒー1杯分のサポートをいただけると嬉しいです!

皆様のサポートが継続的なコンテンツ制作の励みになります

Buy me a coffee