概要

Next.jsをDockerでコンテナ化することで、開発環境を安定的に再現でき、効率的なチーム開発が可能になります。Dockerは、アプリケーションの依存関係や環境設定を隔離し、同一の環境を簡単に再構築できる利点があります。この記事では、DockerfileとDocker Composeを使ってNext.jsの開発環境をセットアップする方法を解説します。

DockerのインストールとNext.jsプロジェクトの準備

まず、Dockerがインストールされていることを確認し、Next.jsプロジェクトを作成します。

npx create-next-app my-nextjs-app
cd my-nextjs-app

Dockerfileの作成

次に、プロジェクトのルートディレクトリにDockerfileを作成します。このファイルは、Dockerコンテナ内でNext.jsを実行するための手順を定義します。

# ベースイメージとしてNode.jsの軽量版を使用
FROM node:18-alpine
# 作業ディレクトリを設定
WORKDIR /app
# package.jsonとpackage-lock.jsonをコピー
COPY package*.json ./
# 依存関係をインストール
RUN npm install
# アプリケーションのソースコードをコピー
COPY . .
# ポート3000を外部に公開
EXPOSE 3000
# 開発サーバーを起動
CMD ["npm", "run", "dev"]

このDockerfileでは、Node.jsの軽量イメージを使い、Next.jsアプリケーションを開発モードで起動します。

Docker Composeの設定

Docker Composeを使うことで、複数のコンテナや設定を一元管理できます。docker-compose.ymlファイルをプロジェクトのルートに作成し、以下の内容を記述します。

version: '3.8'
services:
  app:
    build:
      context: .
    ports:
      - '3000:3000'
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development

この設定により、ホストのディレクトリがコンテナ内の/appディレクトリにマウントされ、コードの変更がリアルタイムで反映されます。また、ポート3000でNext.jsの開発サーバーが動作します。

Dockerコンテナのビルドと実行

次に、ターミナルで以下のコマンドを実行してDockerコンテナをビルドし、実行します。

docker-compose up --build

これで、Next.jsアプリケーションがコンテナ内で起動し、ブラウザでhttp://localhost:3000にアクセスして確認できます。

依存関係の追加

新しい依存関係を追加する場合は、次のコマンドを使用してコンテナ内でnpm installを実行します。

docker-compose run --rm app npm install <パッケージ名>

このコマンドは一時的なコンテナを作成し、パッケージをインストールした後にコンテナを自動で削除します。

まとめ

Dockerを使用してNext.jsの開発環境をセットアップすることで、チーム全体で統一された環境を使用でき、開発効率を向上させることができます。DockerfileとDocker Composeを活用することで、手軽にコンテナ化された開発環境を構築でき、ポートやボリュームの設定も簡単に管理できます。