Next.js アプリを Docker 化する方法: ステップバイステップ ガイド

このブログ投稿では、Docker と Docker Compose を使用して Next.js アプリケーションをコンテナ化する方法を説明します。 Dockerfile、.dockerignore ファイル (明示的には示されていませんが、暗黙的に示されています) の作成、および効率的な開発とデプロイメントのための docker-compose.yml の構成について説明します。これにより、すべての段階で一貫した環境が確保されます。

---

ステップ 1: Next.js プロジェクトのセットアップ

まず、新しい Next.js アプリケーションを作成します。

<code class="language-bash">npx create-next-app@latest my-next-app</code>

"my-next-app" を希望のプロジェクト名に置き換えます。これにより、基本的な Next.js プロジェクトが生成されます。

---

ステップ 2: Docker の初期化

プロジェクト ディレクトリに移動し、Docker を初期化します。 元の手順では docker init が推奨されていますが、このコマンドは標準ではありません。 代わりに、必要なファイルを手動で作成します。 これにより、より詳細な制御が可能になり、非標準コマンドによる潜在的な問題が回避されます。

---

結果のプロジェクト構造は次のようになります:

---

ステップ 3: スタンドアロン ビルド用に Next.js を最適化する

next.config.ts (または next.config.js) を変更してスタンドアロン ビルドを生成します:

<code class="language-typescript">import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  output: 'standalone',
}

export default nextConfig</code>

これにより、自己完結型アプリケーションを作成することにより、展開が簡素化されます。

---

ステップ 4: Dockerfile をビルドする

次の内容を含む Dockerfile をプロジェクト ルートに作成します。

<code class="language-dockerfile">FROM node:20-alpine

WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "run", "dev"]</code>

これは、Node.js 20 Alpine イメージを使用し、依存関係をインストールし、アプリケーション コードをコピーし、ポート 3000 を公開し、開発サーバーを起動します。

---

ステップ 5: docker-compose.yml の構成

プロジェクトのルートに docker-compose.yml ファイルを作成します:

<code class="language-yaml">version: "3.9"
services:
  web:
    build: .
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development</code>

これは、現在のディレクトリからイメージを構築し、ポート 3000 をマップし、web を NODE_ENV に設定する development という名前のサービスを定義します。

以下を使用してアプリケーションを起動します:

<code class="language-bash">docker-compose up</code>

---

結論

この合理化されたアプローチでは、標準の Docker コマンドとベスト プラクティスを使用して Next.js アプリをコンテナ化し、デプロイを簡素化し、環境間での一貫性を確保します。 "my-next-app" を実際のプロジェクト名に置き換えることを忘れないでください。

以上がNext.js アプリを Docker 化する方法: ステップバイステップ ガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。