🫠

Dockerを使ってNext.js v16 環境を構築する。

に公開
テーマ「2025年の最も大きなチャレンジ」
Docker
Next.js
WSL 2
VS Code 拡張機能
tech

Next.js v16の最低限のDocker環境を構築してvscodeの拡張機能のDev Containerで接続してみました。
⋆こちらの記事はWindows向けになってます。

作業環境

  • Docker 28.3.0
  • Docker Desktop for Windows 4.43.1
  • wsl 2.6.1.0
  • ubuntu 24.04.2 LTS
  • Dev Containers 0.427.0
  • next 16.0.1

割愛

  • WSL2、ubuntuがセットアップについて。
  • Docker環境の構築について。
  • vscodeがダウンロード/インストール済み / Dev Containersがインストール済み。

手順

ファイルの作成

Dockerfile

※下記は初期化する前の内容になります。

Dockerfile
FROM node:22-alpine

WORKDIR /workspace

EXPOSE 3000

CMD ["sh"]

docker-compose.yml

今回はビルドに時間がかからないことかつローカルにnode_modulesを初期化以降残さないためにnode_modulesをボリュームマウントさせています。

docker-compose.yml
services:
  nextjs:
    container_name: nextjs-container
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - ./nextjs_example_project:/workspace
      - node_modules:/workspace/node_modules
    stdin_open: true
    tty: true
volumes:
  node_modules:

.dockerignore

.dockerignore
node_modules
.next
.env
.env.local
.env.test
.env.production
.git
.gitignore
Dockerfile*
docker-compose*
README.md
.vscode
*.swp

devcontainer.json

Dev Containerを使うために、devcontainer.jsonを作成します。拡張機能はNext.js開発向けのプラグインを取り入れるようにしています。プラグインはお好みのものに適宜変更してください。

devcontainer.json
{
    "name" : "nextjs-container",
    "service" : "nextjs",
    "workspaceFolder": "/workspace",
    "dockerComposeFile": "../docker-compose.yml",
    "customizations": {
        "vscode": {
            "extensions": [
                "esbenp.prettier-vscode",
                "dsznajder.es7-react-js-snippets",
                "steoates.autoimport",
                "mylesmurphy.prettify-ts",
                "vincaslt.highlight-matching-tag",
                "oderwat.indent-rainbow",
                "bradlc.vscode-tailwindcss",
                "github.github-vscode-theme",
            ]
        }
    }
}

ローカルからWSL:ubuntuに接続

環境にもよりますが、今回のOSはWindows環境ですのでとりあえずLinux環境に移ります(ubuntu)。
Dev Containersがインストールされていれば、vscodeの左下の拡張機能のアイコンを押下して一覧から"WSLに接続"を押下します。
WSLに接続
環境に接続するとターミナル部分がubuntuのユーザーになり、先ほどのアイコン部分がWSL:ubuntuに変わります。

ディレクトリ構成は下記を参考ですすめていきます。
nextjs_example_projectのフォルダを作成してコンテナを起動してバインドマウントさせていきます。
.
├── .devcontainer/
│ └── devcontainer.json
├── Dockerfile
├── docker-compose.yml
├── .dockerignore
└── nextjs_example_project

プロジェクトの初期化

まずはコンテナを一時的作成し立ち上げるプロジェクトの初期化を行います。
最初にdockerが使用可能か確認します。問題なければバージョンが返ります。

$ docker -v

続いてコンテナを作成、起動してymlに定義したNext.jsのサービスをshellで開きます。プロジェクトの初期化の工程なのでコンテナ停止後に自動でコンテナは破棄されます。

$ docker compose run --rm nextjs sh

コンテナを立ち上げたら下記のようにターミナルが切り替わっています。

# /workspace

その状態でNext.jsの初期化コマンドたたきます。

$ npx create-next-app@latest .

初期化が完了したらpackage.jsonなどの必要なファイルやフォルダが作成されているか確認してください。

$ ls -a

ファイルが確認出来たら、必要な依存関係をインストールします。

$ npm install

インストールが完了したらコンテナからexitします。

$ exit

コンテナから離脱したらファイル所有者の変更コマンドをたたきます。コンテナ内で作成されたものは所有者がrootになり、編集ができないやファイルを読みに行けないなどの問題が起こることを未然に防ぐためです。

$ sudo chown -R "$(id -u)":"$(id -g)" .

WSL:ubuntuからコンテナ環境に接続の前に

ホスト側でnode_modulesを初期化のために作成しましたが、コンテナ内でボリュームマウントする動きにしているためホスト側にあるnode_modulesを適宜削除します。

※別の方法でnode_modulesをボリュームマウントせず、ホスト側で作成したものをバインドマウントしている方法もありますが、今回は今後DockerFileやdocker-compose.ymlなどを更新が度々あり、ビルドが多くなることやホストにnode_modulesを入れたくない、ホットリロードが正常に作動しないなど踏まえてnode_modulesをボリュームマウントしています。
参考までに今回やらないほうの初期化後のDockerfileの構成を記載しておきます。採用する場合はdocker-compose.ymlのnode_modulesのボリュームマウントの記載を削除してリビルドしてください。

Dockerfile
FROM node:22-alpine

WORKDIR /workspace

COPY nextjs_example_project/package.json nextjs_example_project/package-lock.json ./

RUN npm install

COPY nextjs_example_project .

EXPOSE 3000

CMD ["sh"]

WSL:ubuntuからコンテナ環境に接続

左下の先ほどの拡張機能のアイコン部分がWSL:ubuntuであることを確認して、Ctrl + Shift + Pからdev containerと入力すると'コンテナで再度開く'欄があるのでそちらを押下。
コンテナ環境に接続

するとコンテナ接続した状態でvscodeが開けました。
コンテナ環境に接続完了

今後

  • 公式ドキュメントのGet Startedではnpmではなくpnpmで記載されていたのでそれに合わせて更新すること
  • prisma導入時になど環境変数が必要になってくる場合の対応
  • 開発用と本番用の切り分け作業
  • 今回は開発環境構築がメインだが、プロジェクトのビルドが正常に可能か検証

引用

https://www.nakae-web.net/blog/20250115/
https://note.com/ssltokyo_tech/n/n0a1ce30d6120
https://zenn.dev/chantakan/articles/e1a97ba2a58bdd

Discussion