サーバーサイド処理が必要なアプリをCloud Runで本番運用できるようになる

まず自分のケースが Cloud Run を必要とするかを確認しましょう。上記に1つも当てはまらない場合は Vercel で十分です。

Google Cloud のプロジェクトは「作業スペース」のようなものです。リソース・課金・権限がプロジェクト単位で管理されます。

【Windows 版】

【Mac 版】

手順は Windows 版と同一。ブラウザ上の操作のため差異なし。

クレジットカードを登録しますが、無料トライアル中は請求されません。新規登録の場合、$300 分の無料クレジット（90 日間有効）が自動付与されます。

【Windows 版 / Mac 版 共通】

【Windows 版 / Mac 版 共通】

Cloud Run と Artifact Registry を使うために必要な API を有効化します。

【Windows 版】

Google Cloud コンソール上部の「Cloud Shell を有効にする」アイコンをクリックするか、gcloud CLI をローカルにインストールして以下を実行します。

gcloud services enable run.googleapis.com
gcloud services enable artifactregistry.googleapis.com
gcloud services enable cloudbuild.googleapis.com
gcloud services enable secretmanager.googleapis.com

ローカルに gcloud CLI をインストールする場合

# インストール後、コマンドプロンプトまたはPowerShellで実行
gcloud init
gcloud auth login
gcloud config set project YOUR_PROJECT_ID

【Mac 版】

# Homebrew 経由でインストール
brew install --cask google-cloud-sdk
gcloud init
gcloud auth login
gcloud config set project YOUR_PROJECT_ID

Docker は「アプリと動作環境をまとめた箱（コンテナ）」を作るツールです。この箱ごとサーバーに送ることで、「手元では動くのにサーバーでは動かない」問題をなくせます。

【Windows 版】

docker --version
docker compose version

【Mac 版】

1. 同サイトで「Download for Mac」をクリック（Apple Silicon と Intel で異なるインストーラーがある）
2. .dmg ファイルを開いて Applications フォルダにドラッグ
3. Docker Desktop を起動

wsl --install
wsl --set-default-version 2

Vite で作成した SPA アプリの Dockerfile を作成します。「マルチステージビルド」は2段階の処理です。1段目で Node.js を使ってビルド、2段目で nginx という Web サーバーで完成ファイルだけを提供します。これにより最終イメージに Node.js が含まれず、軽量で安全になります。

【Windows 版 / Mac 版 共通】

プロジェクトのルートディレクトリに Dockerfile というファイルを作成する（Cursor で開いて作成可）：

# ---- Stage 1: Build ----
FROM node:20-alpine AS builder

WORKDIR /app

# 依存関係のインストール（キャッシュ最適化）
COPY package*.json ./
RUN npm ci

# アプリのビルド
COPY . .
RUN npm run build

# ---- Stage 2: Serve ----
FROM nginx:alpine

# nginx の設定ファイルをコピー（STEP 2-3 で作成）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# ビルド成果物を nginx の公開ディレクトリにコピー
COPY --from=builder /app/dist /usr/share/nginx/html

EXPOSE 8080

CMD ["nginx", "-g", "daemon off;"]

React Router などの SPA ルーティングに対応する nginx の設定ファイルを作成します。try_files $uri $uri/ /index.html; がないと、直接 URL にアクセスした際に 404 エラーになります。

【Windows 版 / Mac 版 共通】

プロジェクトのルートディレクトリに nginx.conf を作成する：

server {
    listen 8080;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    # SPA 用: 存在しないパスは index.html に転送
    location / {
        try_files $uri $uri/ /index.html;
    }

    # キャッシュ設定: ハッシュ付きのアセットは長期キャッシュ
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # ヘルスチェック（Cloud Run 用）
    location /health {
        return 200 'OK';
        add_header Content-Type text/plain;
    }
}

デプロイ前にローカルで動作確認します。

【Windows 版】

コマンドプロンプトまたは PowerShell でプロジェクトのルートに移動し：

# イメージをビルド
docker build -t my-app:local .

# コンテナを起動してテスト
docker run -p 8080:8080 --name my-app-test my-app:local

ブラウザで http://localhost:8080 にアクセスしてアプリが表示されることを確認する。

# 確認後、コンテナを停止・削除する
docker stop my-app-test
docker rm my-app-test

【Mac 版】

ターミナルで同じコマンドを実行する。

【Windows 版 / Mac 版 共通】

# リポジトリを作成（リージョンは asia-northeast1 = 東京を推奨）
gcloud artifacts repositories create my-app-repo \
  --repository-format=docker \
  --location=asia-northeast1 \
  --description="Docker images for my app"

または Google Cloud コンソール → 「Artifact Registry」→「リポジトリを作成」から GUI で作成することもできます。

【Windows 版】

gcloud auth configure-docker asia-northeast1-docker.pkg.dev

Docker configuration file updated. と表示されれば成功。

gcloud auth login
gcloud auth configure-docker asia-northeast1-docker.pkg.dev

tag は Docker イメージに「どこに送るか」という宛先ラベルを付ける作業です。push は実際にそのレジストリ（倉庫）にイメージを送信します。

【Windows 版 / Mac 版 共通】

YOUR_PROJECT_ID は自分のプロジェクト ID に置き換えてください（Google Cloud コンソールの上部に表示されています）。

# イメージにタグを付ける
docker tag my-app:local \
  asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest

# Artifact Registry に Push
docker push \
  asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest

Push 完了後、Google Cloud コンソールの「Artifact Registry」でイメージが登録されていることを確認する。

デプロイが完了すると Service URL が表示されます。その URL でアプリが公開されています。

【Windows 版 / Mac 版 共通】

gcloud run deploy my-app \
  --image asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest \
  --platform managed \
  --region asia-northeast1 \
  --allow-unauthenticated \
  --port 8080

gcloud run services describe my-app --region asia-northeast1

Secret Manager を使うと、API キーがコードや Docker イメージに含まれず、サーバーが起動するときだけ読み込まれます。これが最も安全な方法です。

【Windows 版 / Mac 版 共通】

# Secret Manager にシークレットを作成
echo -n "YOUR_ACTUAL_API_KEY" | gcloud secrets create GEMINI_API_KEY \
  --data-file=- \
  --replication-policy=automatic

# Cloud Run のサービスアカウントを確認
gcloud run services describe my-app \
  --region asia-northeast1 \
  --format "value(spec.template.spec.serviceAccountName)"

# Secret Manager アクセス権を付与（SERVICE_ACCOUNT は上記コマンドで取得した値）
gcloud secrets add-iam-policy-binding GEMINI_API_KEY \
  --member="serviceAccount:SERVICE_ACCOUNT" \
  --role="roles/secretmanager.secretAccessor"

# Cloud Run のデプロイに Secret を環境変数として設定
gcloud run services update my-app \
  --region asia-northeast1 \
  --update-secrets=GEMINI_API_KEY=GEMINI_API_KEY:latest

アクセスがないときはコンテナを0台に落とすことで費用を最小化できます。最小0インスタンスにすると初回アクセス時に数秒の「コールドスタート」が発生します。

【Windows 版 / Mac 版 共通】

gcloud run services update my-app \
  --region asia-northeast1 \
  --min-instances 0 \
  --max-instances 10 \
  --concurrency 80 \
  --cpu 1 \
  --memory 512Mi

gcloud run services update my-app \
  --region asia-northeast1 \
  --min-instances 1

【Windows 版 / Mac 版 共通】

DNS 設定の確認は講座06 STEP 4-3 の whatsmydns.net と同じ手順で行います。

タグに日時を含めることで、どのバージョンのイメージが本番で動いているかを追跡できます。問題が起きたら古いタグのイメージに戻すことでロールバックできます。

【Windows 版 / Mac 版 共通】

# 1. コードを修正後、Docker イメージを再ビルド
docker build -t my-app:local .

# 2. ローカルで動作確認（任意）
docker run -p 8080:8080 my-app:local

# 3. 新しいタグ（バージョン管理のためにタグを使う）
DEPLOY_TIME=$(date +%Y%m%d-%H%M%S)
docker tag my-app:local \
  asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:$DEPLOY_TIME
docker tag my-app:local \
  asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest

# 4. Artifact Registry に Push
docker push asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:$DEPLOY_TIME
docker push asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest

# 5. Cloud Run にデプロイ
gcloud run deploy my-app \
  --image asia-northeast1-docker.pkg.dev/YOUR_PROJECT_ID/my-app-repo/my-app:latest \
  --region asia-northeast1

シェルスクリプトにまとめる（推奨）

プロジェクトルートに deploy.sh を作成すると毎回のデプロイが1コマンドで完了します：

#!/bin/bash
set -e

PROJECT_ID="YOUR_PROJECT_ID"
SERVICE_NAME="my-app"
REGION="asia-northeast1"
REPO="my-app-repo"
IMAGE_BASE="$REGION-docker.pkg.dev/$PROJECT_ID/$REPO/$SERVICE_NAME"
TAG=$(date +%Y%m%d-%H%M%S)

echo "Building Docker image..."
docker build -t $SERVICE_NAME:local .

echo "Tagging and pushing image..."
docker tag $SERVICE_NAME:local $IMAGE_BASE:$TAG
docker tag $SERVICE_NAME:local $IMAGE_BASE:latest
docker push $IMAGE_BASE:$TAG
docker push $IMAGE_BASE:latest

echo "Deploying to Cloud Run..."
gcloud run deploy $SERVICE_NAME \
  --image $IMAGE_BASE:latest \
  --region $REGION

echo "Deploy complete!"

chmod +x deploy.sh
./deploy.sh