Closed9

Next.jsをCloud Runへデプロイする

kokushinkokushin

既存のNext.jsプロジェクトをCloud Runへデプロイする場合のメモです。
(開発環境での運用向け)

kokushinkokushin

Dockerfile をルートディレクトリに作ります。
Node.jsのバージョンは適宜変更してください。

FROM node:18-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app

# Install dependencies based on the preferred package manager
COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* ./
RUN \
  if [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi


# Rebuild the source code only when needed
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry during the build.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN \
  if [ -f yarn.lock ]; then yarn run build; \
  elif [ -f package-lock.json ]; then npm run build; \
  elif [ -f pnpm-lock.yaml ]; then corepack enable pnpm && pnpm run build; \
  else echo "Lockfile not found." && exit 1; \
  fi

# Production image, copy all the files and run next
FROM base AS runner
WORKDIR /app

ENV NODE_ENV production
# Uncomment the following line in case you want to disable telemetry during runtime.
# ENV NEXT_TELEMETRY_DISABLED 1

RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs

COPY --from=builder /app/public ./public

# Set the correct permission for prerender cache
RUN mkdir .next
RUN chown nextjs:nodejs .next

# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static

USER nextjs

EXPOSE 3000

ENV PORT 3000

# server.js is created by next build from the standalone output
# https://nextjs.org/docs/pages/api-reference/next-config-js/output
CMD HOSTNAME="0.0.0.0" node server.js

kokushinkokushin

.dockerignore ファイルを作成。

Dockerfile
.dockerignore
node_modules
npm-debug.log
README.md
.next
.git
kokushinkokushin

next.config.js に output: "standalone" を追記。

/** @type {import('next').NextConfig} */
module.exports = {
  output: "standalone",
};
kokushinkokushin

app.json (不要かも) を一応作成。

{
  "name": "nextjs",
  "options": {
    "allow-unauthenticated": true,
    "memory": "256Mi",
    "cpu": "1",
    "port": 3000,
    "http2": false
  }
}
kokushinkokushin

ここまでのファイルの変更をGitHubへプッシュしておきます。

kokushinkokushin

Cloud Run へアクセスし、「サービスを作成」をクリック。
https://console.cloud.google.com/run
※サービス利用登録、請求先登録は済ませておいてください

下記設定を行います。

  1. 「リポジトリから継続的にデプロイする」にチェック
  2. 「Cloud Build の設定」をクリック
  3. リポジトリプロバイダ「GitHub」を選択
  4. デプロイする対象のリポジトリを選択
  5. 「次へ」クリック
  6. トリガー設定するブランチを選択
  7. ビルドタイプ「Docker」を選択
  8. 保存
  9. 認証「未認証の呼び出しを許可」を選択
  10. 「コンテナ、ボリューム、ネットワーキング、セキュリティ」をクリック
  11. コンテナポート「3000」と入力
  12. envが必要な場合は「変数とシークレット」から設定
  13. 「作成」をクリック

これで暫く待つとNext.jsアプリがデプロイされます!

kokushinkokushin

ISRは使えません、あしからず。
Route Handlersなどは問題なく動きます。

デフォルト設定だとコンテナにアクセスがないときは休眠するので、立ち上がりに時間がかかります。
あくまで開発環境として動かす想定です。
本番向けの運用はメモリやその辺りの設定を変更してください。

Vercelよりも低コストで運用できますね。素晴らしい!

このスクラップは2024/05/22にクローズされました