nextjs-deployment
Next.jsアプリケーションを本番環境へデプロイするための包括的なパターンを提供します。Dockerコンテナの設定、GitHub Actions CI/CDパイプラインの構築、環境変数の管理、プレビューデプロイの実装、監視・ロギングの設定など、幅広いユースケースで活用できます。スタンドアロン出力、マルチステージDockerビルド、ヘルスチェック、OpenTelemetryによる計装、本番運用のベストプラクティスをカバーしています。
description の原文を見る
Provides comprehensive patterns for deploying Next.js applications to production. Use when configuring Docker containers, setting up GitHub Actions CI/CD pipelines, managing environment variables, implementing preview deployments, or setting up monitoring and logging for Next.js applications. Covers standalone output, multi-stage Docker builds, health checks, OpenTelemetry instrumentation, and production best practices.
SKILL.md 本文
Next.js デプロイ
Next.js アプリケーションを Docker、CI/CD パイプライン、包括的なモニタリングを使用して本番環境にデプロイします。
概要
このスキルは Next.js アプリケーションを本番環境にデプロイするためのパターンとコード例を提供します。Docker でのコンテナ化、GitHub Actions による CI/CD 自動化、環境設定、ヘルスチェック、本番環境モニタリングをカバーしています。コンテナデプロイメント用の standalone 出力モードを使用し、multi-stage Docker ビルドで最適化されたイメージを構築し、OpenTelemetry で可観測性を実現します。
使用タイミング
以下の内容を含むユーザーリクエストの際に有効化してください:
- 「Next.js をデプロイ」、「Next.js をコンテナ化」、「Docker 化」
- 「GitHub Actions」、「CI/CD パイプライン」、「自動デプロイ」
- 「環境変数」、「ランタイム設定」、「NEXT_PUBLIC」
- 「プレビューデプロイ」、「ステージング環境」
- 「モニタリング」、「OpenTelemetry」、「トレーシング」、「ログ」
- 「ヘルスチェック」、「Readiness」、「Liveness」
- 「本番ビルド」、「standalone 出力」
- 「Server Actions 暗号化キー」、「NEXT_SERVER_ACTIONS_ENCRYPTION_KEY」
クイックリファレンス
出力モード
| モード | ユースケース | コマンド |
|---|---|---|
standalone | Docker/コンテナデプロイ | output: 'standalone' |
export | 静的サイト (サーバーなし) | output: 'export' |
| (デフォルト) | Node.js サーバーデプロイ | next start |
環境変数の種類
| プレフィックス | 利用可能範囲 | ユースケース |
|---|---|---|
NEXT_PUBLIC_ | ビルド時 + ブラウザ | 公開 API キー、機能フラグ |
| (プレフィックスなし) | サーバーのみ | データベース URL、シークレット |
| ランタイム | サーバーのみ | 環境ごとに異なる値 |
キーファイル
| ファイル | 用途 |
|---|---|
Dockerfile | Multi-stage コンテナビルド |
.github/workflows/deploy.yml | CI/CD パイプライン |
next.config.ts | ビルド設定 |
instrumentation.ts | OpenTelemetry 設定 |
src/app/api/health/route.ts | ヘルスチェックエンドポイント |
手順
1. Standalone 出力を設定
// next.config.ts
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
output: 'standalone',
poweredByHeader: false,
generateBuildId: async () => process.env.GIT_HASH || 'build',
}
export default nextConfig
2. Dockerfile を作成
完全な multi-stage ビルド、マルチアーキテクチャ対応、最適化については references/docker-patterns.md を参照してください。
# syntax=docker/dockerfile:1
FROM node:20-alpine AS base
FROM base AS deps
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json package-lock.json* ./
RUN npm ci
FROM base AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .
ENV NEXT_TELEMETRY_DISABLED=1 NODE_ENV=production
ARG GIT_HASH NEXT_SERVER_ACTIONS_ENCRYPTION_KEY
ENV GIT_HASH=${GIT_HASH} NEXT_SERVER_ACTIONS_ENCRYPTION_KEY=${NEXT_SERVER_ACTIONS_ENCRYPTION_KEY}
RUN npm run build
FROM base AS runner
WORKDIR /app
ENV NODE_ENV=production NEXT_TELEMETRY_DISABLED=1 PORT=3000 HOSTNAME="0.0.0.0"
RUN addgroup --system --gid 1001 nodejs && adduser --system --uid 1001 nextjs
COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=builder --chown=nextjs:nodejs /app/public ./public
USER nextjs
EXPOSE 3000
HEALTHCHECK --interval=30s --timeout=5s --start-period=5s --retries=3 \
CMD node -e "require('http').get('http://localhost:3000/api/health', (r) => r.statusCode === 200 ? process.exit(0) : process.exit(1))"
CMD ["node", "server.js"]
3. GitHub Actions をセットアップ
テスト、セキュリティスキャン、デプロイメント戦略を含む完全なワークフローについては references/github-actions.md を参照してください。
# .github/workflows/deploy.yml
name: Build and Deploy
on:
push:
branches: [main, develop]
env:
REGISTRY: ghcr.io
IMAGE_NAME: ${{ github.repository }}
jobs:
build:
runs-on: ubuntu-latest
permissions:
contents: read
packages: write
steps:
- uses: actions/checkout@v4
- uses: docker/setup-buildx-action@v3
- uses: docker/login-action@v3
with:
registry: ${{ env.REGISTRY }}
username: ${{ github.actor }}
password: ${{ secrets.GITHUB_TOKEN }}
- id: meta
uses: docker/metadata-action@v5
with:
images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}
- id: generate-key
run: echo "key=$(openssl rand -base64 32)" >> $GITHUB_OUTPUT
- uses: docker/build-push-action@v5
with:
context: .
push: true
tags: ${{ steps.meta.outputs.tags }}
cache-from: type=gha
cache-to: type=gha,mode=max
build-args: |
GIT_HASH=${{ github.sha }}
NEXT_SERVER_ACTIONS_ENCRYPTION_KEY=${{ steps.generate-key.outputs.key }}
4. 環境変数を設定
// src/lib/env.ts
export function getEnv() {
return {
databaseUrl: process.env.DATABASE_URL!,
apiKey: process.env.API_KEY!,
publicApiUrl: process.env.NEXT_PUBLIC_API_URL!,
}
}
export function validateEnv() {
const required = ['DATABASE_URL', 'API_KEY', 'NEXT_PUBLIC_API_URL']
const missing = required.filter((key) => !process.env[key])
if (missing.length > 0) {
throw new Error(`Missing required environment variables: ${missing.join(', ')}`)
}
}
5. ヘルスチェックを実装
// src/app/api/health/route.ts
import { NextResponse } from 'next/server'
export const dynamic = 'force-dynamic'
export async function GET() {
const checks = {
status: 'healthy',
timestamp: new Date().toISOString(),
version: process.env.npm_package_version || 'unknown',
uptime: process.uptime(),
}
return NextResponse.json(checks)
}
6. モニタリングをセットアップ
OpenTelemetry 設定、ログ、アラート、ダッシュボードについては references/monitoring.md を参照してください。
// instrumentation.ts
import { registerOTel } from '@vercel/otel'
export function register() {
registerOTel({
serviceName: process.env.OTEL_SERVICE_NAME || 'next-app',
})
}
7. Server Actions 暗号化を処理
重要: マルチサーバーデプロイ用に一貫した暗号化キーを生成および設定してください:
# キーを生成
openssl rand -base64 32
# GitHub Actions Secrets に NEXT_SERVER_ACTIONS_ENCRYPTION_KEY として設定
このキーがない場合、マルチサーバーデプロイでは Server Actions が「Failed to find Server Action」エラーで失敗します。
ベストプラクティス
- Docker: Multi-stage ビルドを使用、standalone 出力を有効化、非 root ユーザーを設定、ヘルスチェックを含める
- セキュリティ:
.env.localをコミットしない、公開値のみにNEXT_PUBLIC_を使用、NEXT_SERVER_ACTIONS_ENCRYPTION_KEYを設定 - パフォーマンス:
output: 'standalone'を使用、静的アセット用に CDN を有効化、next/imageを使用 - 環境: 環境全体で同じ Docker イメージを使用、環境変数経由でランタイム設定を注入
例
// next.config.ts
const nextConfig = {
output: 'standalone',
poweredByHeader: false,
compress: true,
generateBuildId: async () => process.env.GIT_HASH || 'build',
}
export default nextConfig
# docker-compose.yml
version: '3.8'
services:
app:
build: .
ports:
- "3000:3000"
environment:
- DATABASE_URL=postgresql://db:5432/myapp
- NEXT_PUBLIC_API_URL=http://localhost:3000/api
制約と警告
制約
- Standalone 出力には Node.js 18 以上が必要
- Server Actions 暗号化キーはすべてのインスタンスで一貫している必要がある
- ランタイム環境変数は
output: 'standalone'でのみ機能 - OpenTelemetry はプロジェクトルートの instrumentation.ts を必須とする
警告
- センシティブな値に
NEXT_PUBLIC_プレフィックスを使用しない - マルチサーバーデプロイでは常に
NEXT_SERVER_ACTIONS_ENCRYPTION_KEYを設定 - ヘルスチェックがないと、オーケストレーターが不健康なインスタンスにトラフィックを送信する可能性がある
- ランタイム環境変数は静的エクスポート (
output: 'export') では機能しない
リファレンス
references/docker-patterns.md- 高度な Docker 設定、マルチアーキテクチャビルド、最適化references/github-actions.md- 完全な CI/CD ワークフロー、テスト、セキュリティスキャンreferences/monitoring.md- OpenTelemetry、ログ、アラート、ダッシュボードreferences/deployment-platforms.md- プラットフォーム固有のガイド (Vercel、AWS、GCP、Azure)
ライセンス: MIT(寛容ライセンスのため全文を引用しています) · 原本リポジトリ
詳細情報
- 作者
- giuseppe-trisciuoglio
- ライセンス
- MIT
- 最終更新
- 不明
Source: https://github.com/giuseppe-trisciuoglio/developer-kit / ライセンス: MIT
関連スキル
doubt-driven-development
重要な判断はすべて、本番環境への展開前に新しい視点から対抗的レビューを実施します。速度より正確性が重要な場合、不慣れなコードを扱う場合、本番環境・セキュリティに関わるロジック・取り消し不可の操作など影響度が高い場合、または後でバグを修正するよりも今検証する方が効率的な場合に活用してください。
apprun-skills
TypeScriptを使用したAppRunアプリケーションのMVU設計に関する総合的なガイダンスが得られます。コンポーネントパターン、イベントハンドリング、状態管理(非同期ジェネレータを含む)、パラメータと保護機能を備えたルーティング・ナビゲーション、vistestを使用したテストに対応しています。AppRunコンポーネントの設計・レビュー、ルートの配線、状態フローの管理、AppRunテストの作成時に活用してください。
desloppify
コードベースのヘルスチェックと技術負債の追跡ツールです。コード品質、技術負債、デッドコード、大規模ファイル、ゴッドクラス、重複関数、コードスメル、命名規則の問題、インポートサイクル、結合度の問題についてユーザーが質問した場合に使用してください。また、ヘルススコアの確認、次の改善項目の提案、クリーンアップ計画の作成をリクエストされた際にも対応します。29言語に対応しています。
debugging-and-error-recovery
テストが失敗したり、ビルドが壊れたり、動作が期待と異なったり、予期しないエラーが発生したりした場合に、体系的な根本原因デバッグをガイドします。推測ではなく、根本原因を見つけて修正するための体系的なアプローチが必要な場合に使用してください。
test-driven-development
テスト駆動開発により実装を進めます。ロジックの実装、バグの修正、動作の変更など、あらゆる場面で活用できます。コードが正常に動作することを証明する必要がある場合、バグ報告を受けた場合、既存機能を修正する予定がある場合に使用してください。
incremental-implementation
変更を段階的に実施します。複数のファイルに影響する機能や変更を実装する場合に使用してください。大量のコードを一度に書こうとしている場合や、タスクが一度では完結できないほど大きい場合に活用します。