Next.jsのチュートリアルにDevContainerを使ったDocker環境の導入をしてみた

2025年2月20日 15:19

まずはじめに

初めまして。スーパーソフトウエア東京オフィス技術部のN.Hと申します。
私は昨年の4月に入社し、開発エンジニアとしてもう少しで1年になります。今回はNext.jsのチュートリアルをやる際に、Docker環境を導入して行った時の学びについて共有していきます。
Next.jsのチュートリアルをやってみた経緯として、業務でReactを扱っていますが、従来のSPAとしてのReactを使用しており、Next.jsについての知見はほとんどありませんでした。しかし、フロントエンド開発ではNext.jsが広く採用されていることから、公式チュートリアルに取り組んでみました。

今回のチュートリアルを通して、Next.jsへの理解が深まっただけでなく、Docker環境で開発を行ったことで、Dockerに関する知識も身につき、大変勉強になりました。

この記事は、Dockerを活用してチュートリアルに挑戦したい方向けになります（Next.jsについては公式チュートリアルをすすめて身に着けてください🙏）
参考になれば幸いです。

この記事を通して学べる事

Dockerの導入
- Dockerを用いてNext.jsのチュートリアルのアプリを開発ができます。
DevContainerの導入
- vs Codeエディタでコンテナ内のファイルを編集できるようにします。

特に、DevContainerを使うとDocker環境での開発効率の向上やミスの軽減に寄与するためぜひ、試してみてください！

対象者

Dockerの基礎知識がある
Javascript/Reactの基礎知識がある(Next.jsのチュートリアルをやる場合)

前提

Dockerがローカル環境で動くこと
Dockerを使ったことがない場合は下記を参考にインストールしてください
https://docs.docker.com/get-started/introduction/get-docker-desktop/

1. Dockerの導入

まずは、Dockerの環境を整えたいのでプロジェクトルートにdocker-compose.ymlを作成します。
※私はportsのローカル側は競合しないように33333にしました。

volumes:
  nestjs-node-modules:
　nextjs-pnpm-store:

services:
  nextjs-app:
    build:
      context: .
    volumes:
      - ./app:/app
      # - nestjs-node-modules:/app/next-js-practice/node_modules
      # - nestjs-pnpm-store:/app/.pnpm-store
    ports:
      - 33333:3000
    command: sleep infinity

command:
- sleep infinityにして、コンテナ立ち上げした際に落ちないようにします。
volumes:
- コンテナとローカルホストでは環境がことなるため、node_modulesやpnpm-storeの情報をコンテナ側のvolumeで管理をしようと考えてます。現段階では、いったんコメントアウトします。

次にdocker-compose.ymlと同じディレクトリへ下記の通りDockerfileを作成

FROM node:23.7-bullseye
RUN npm install -g pnpm
WORKDIR /app/

next.jsのチュートリアルではpnpm を使うように指定されるため、コンテナ環境でpnpmが使えるようにします。Next.jsのチュートリアルには、pnpmはnpm や yarnよりも効率的なパッケージマネージャーと言及がありましたので試してみるいい機会ですね👍

一旦、上記をつくったらDocker導入における大枠はできました。チュートリアルのコードを取得するため、コンテナを立ち上げ、コンテナの中へ入ります。
下記のコマンドでもターミナルを通してコンテナへ入ることができますが、今回はvsCodeで直接コンテナ側のファイルを編集できるようにします。

docker compose build
docker compose up -d
dokcer compose exec -it nextjs-app /bin/bash

2. DevContainerの導入

VS Code上でコンテナ内のファイルを編集できるようにVS Codeの拡張機能Dev Containersをつかってみました。
理由は３つあります。(個人的な意見を含んでます)

DevContainerを使う理由

1つ目
- ローカル側とコンテナ側での環境が異なり、module not foundのエラーがローカルホスト側のエディタ上で多発していたため
  - DevContainerを使い、コンテナ側のフォルダをVS Codeで開き編集ができればローカルホスト側のエラーは気にせず、快適に作業ができるためです
2つ目
- 今回は完全にローカルを汚さずに開発をしたかったため
  - 今回next.jsのチュートリアルで求められるnodeの最新バージョンがnodeのLTSバージョンではないため、ローカルホスト側でインストールしたくなかったためです笑。pnpm についてもコンテナ側でとりあえず使ってみたかったのもあります
３つ目
- 効率的な開発がしやすくなる
  - 毎回コンテナ内へ"dokcer compose exec -it nextjs-app /bin/bash"とコマンドを打つのが面倒と感じてました。また、コンソール上でしかDocker環境を覗いたことがなかったため、VS Codeでコンテナ環境を開けると、作業効率向上や人的ミスが減りそうだと感じてます

DevContainerセットアップ

Dev Containersは立ち上がったコンテナ内に入り、VS Codeエディタを使ってファイル修正ができるため、特に、1つ目の理由の場合に本当に便利でした！

インストールを終えたら、プロジェクトルートにて.devcontainerフォルダの作成と/.devcontainer/devcontainer.jsonを作成します。
devcontainer.jsonは、VS CodeのRemote Containers拡張機能で使用される設定ファイルです。
このファイルで、どのDockerイメージやDockerfileを使用するか、VS Codeの設定や拡張機能などを定義します。
一旦、/.devcontainer/devcontainer.jsonには下記を設定してください。

{
  "name": "Next.js Dev",
  "dockerComposeFile": "../docker-compose.yml",
  "service": "nextjs-app",
  "workspaceFolder": "/app",
  "settings": {
    "terminal.integrated.defaultProfile.linux": "/bin/sh"
  },
  "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"]
}

dockerComposeFile
- 今回はdocker-compose.ymlを定義してコンテナを起動するため、docker-compose.ymlのパスを指定します。指定した起動コンテナへVS　Codeが接続してくれます。
workspaceFolder
- ローカルからコンテナ先へマウントするディレクトリを指定してます
settings
- デフォルトのシェルをshに固定
extensions
- コンテナ側のVS Codeにインストールされる拡張機能を指定できます

devcontainer.jsonを作成したらコンテナ起動後、vs Code内でコンテナ側のファイル編集ができるように接続します。

// コンテナ起動
dokcer compose down
docker compose up -d

コンテナ起動後、VS Codeのウィンドウを開き、「 > Reopen in Container」でリモート接続が完了です。

そのままターミナルを開き、下記を入れてください

root@a0905f6ea0a3:/app# npx create-next-app@latest nextjs-practice --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example" --use-pnpm

/app配下にnextjs-practiceディレクトリが作成されたら成功です。

node_modulesやpnpm-storeはコンテナとローカルホスト側で環境が異なり、同期する意味がないため、コンテナのvolume側で管理するようにします。

注意：node_modulesやpnpm-storeをローカルホストと同期してしまうと、ファイル修正したものが即時に反映されない（ホットリロードが機能しない）ため開発効率が極端に落ちてしまいます。私はここで躓きました。

一旦、ローカルホスト側に戻り、docker-compose.ymlにてコメントアウトしていた部分を外します。これで、コンテナとローカルホストでnode_modulesとpnpm-storeのみ同期をされないようにします。

volumes:
  nestjs-node-modules:
　nextjs-pnpm-store:

services:
  nextjs-app:
    build:
      context: .
    volumes:
      - ./app:/app
      - nestjs-node-modules:/app/next-js-practice/node_modules
      - nestjs-pnpm-store:/app/.pnpm-store
    ports:
      - 33333:3000
    command: sleep infinity

再び、コンテナを起動

docker compose up -d

起動したら、チュートリアルのアプリケーションを起動するため依存関係をインストールしていきます。
vs Code のウィンドウを開き「 > Reopen Container」を押下しコンテナ側のターミナルで下記を実施

cd nextjs-practice
pnpm i

依存関係及びチュートリアルで使用するコードはすべてコンテナ内へダウンロードされました。

ファイルがあることが確認できたら、サーバーを立ち上げてみましょう
ウィンドウ > Reopen 再度コンテナへ入り下記を実行後、

pnpm run dev

http://localhost:33333へアクセスしたら下記の画面が表示されたら成功です。

終わりに

お疲れ様です！これで、DevContainerを用いてDocker環境の導入ができました！これで快適にNextjsのチュートリアルができるかと思います！
新たな言語やフレームワークを学びたいけど、ローカル環境を汚したくない方はぜひ、ご参考にしてみてください～！