はじめに
この記事では、Next.js アプリケーションを Docker 上で開発するための docker-compose.yml ファイルの構成について、自分用の備忘録としてまとめています。
個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。
主に開発環境を整える目的で記述しており、ホットリロードの対応や依存関係の管理も管理しています。
書こうと思ったきっかけ
チーム開発や複数環境での動作確認を行う際、開発環境を統一するために Docker 化が有効です。特に Next.js のようなフロントエンドフレームワークでは、ホットリロードや依存ライブラリの管理に工夫が必要です。
そこで、最小構成で使いやすい docker-compose.yml の中身を整理しておきたいと思いました。
docker-compose.yml の解説
version: '3.8'
services:
next-app:
container_name: next-app
build: .
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
environment:
- CHOKIDAR_USEPOLLING=true
今回作成したファイル
各項目の説明
| 設定項目 | 説明 |
|---|---|
version: '3.8' |
Docker Compose のバージョン指定。安定性と互換性を兼ね備えたバージョンです。 |
services: |
起動するサービス（＝コンテナ）を定義します。ここでは next-app という名前のサービスを用意しています。 |
container_name |
コンテナ名を明示的に next-app と指定します。省略時はサービス名が使われます。 |
build: . |
現在のディレクトリにある Dockerfile を元にビルドを行います。 |
ports |
ホストの 3000 番ポートを、コンテナ内の 3000 番ポートにバインドします。Next.js の開発サーバーが使う標準ポートです。 |
-
.:/app: ホストのカレントディレクトリをコンテナ内の/appにマウントし、ソースコードの変更をリアルタイムに反映します。 -
/app/node_modules: 匿名ボリュームとして定義し、ホスト側の node_modules と分離してトラブルを避けます。 |
|environment|CHOKIDAR_USEPOLLING=trueを指定し、ファイル変更の検知をポーリング方式に変更。WSL や Docker Desktop で安定して動作させるための工夫です。 |
まとめ
この構成により、Next.js アプリの開発環境を Docker 上で快適に構築できます。
特にホットリロードや依存管理の面でトラブルが少なく、チーム開発やマシン間での再現性も高くなります。
今後は、環境変数の .env ファイル化や MySQL との連携なども検討していく予定です...！