【備忘録】Next.js開発環境をDockerで構築(WSL2)

備忘録です

WindowsでDockerを使ってNext.js開発環境を構築しようとすると、実はいくつかのトラップがあるのでその点も解決しつつ解説していこうと思います。

検証環境

Windows 22H2
VScode 1.78
Docker Desktop 4.19.0

さっそくやりましょう

コンテナ定義

VScodeで作業用のフォルダを開いて、Dockerfileを作成しましょう

Dockerfile

FROM node

え?こんだけ?となりますが、この辺はプロジェクトによって書き足すことが予想されるので最小限置いておくという感じです。続いてdocker-comope.ymlを作成します。

docker-compose.yml

version: '3.9'
volumes:
  node-modules:
services:
  next:
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - node-modules:/app/node_modules
    tty: true

node_modulesを別の名前付きボリュームにすることで、コンパイルの時間をちょっとだけ短縮できます。作業ディレクトリに関しては後に使うDevcontainerがいい感じにしてくれるのでボリュームはこの一つで十分です。

現在のツリー構造は以下の通り。

.
|-- Dockerfile
`-- docker-compose.yml

Devcontainerで開く

そうしたらVScodeのdevcontainer機能を使ってコンテナで開発していきましょう。
Ctrl+Shift+Pをおして、reopenと入力し、おそらく選択肢に出てくるDev Containers: Reopen in Containerを選択してください。

そして'docker-compose.yml'からを選択してください。

機能の選択は何も選択せずOK(またはEnter)を押してください

するとビルドが走ってコンテナ内で開発環境が開けるようになります。
.devcontainerフォルダが作成され、以下のようなツリーになっているはずです。

.
|-- .devcontainer
|   |-- devcontainer.json
|   `-- docker-compose.yml
|-- Dockerfile
`-- docker-compose.yml

.devcontainer/docker-compose.ymlで作業ディレクトリのデータをボリュームマウントしてるみたいですね。それではアプリケーションを作っていきましょう。コンテナ内のターミナル(Ctrl+@)でnpx create-next-appを実行して、指示に従ってプロジェクトを作成してください。ここではmy-appというプロジェクトを作成したとします。

ホットリロード有効化

このままでは、Windowsファイルシステム上にプロジェクトが置かれているために変更を検知できず、ホットリロードが効きません。なのでここではWebpackのPollingを使います。

作成したプロジェクトのNext.config.jsを編集します。私のプロジェクトでは./my-app/Next.config.jsに存在しています。

Next.config,js

/** @type {import('next').NextConfig} */
const nextConfig = {
    reactStrictMode: true,
    swcMinify: true,
    webpack: (config, context) => {
        config.watchOptions = {
            ignored: /node_modules/,
            poll: 1000,
            aggregateTimeout: 300
        }
        return config
    }
}

module.exports = nextConfig

ここでpollの値を変更すると、検知する間隔を設定できます。
node_moduleをignoreしないとCPUの負荷が上がって激遅になります。

動作確認

ではサーバーを立ち上げてみましょう。

root@337132d0c5ba:/workspaces/test-folder# cd my-app/
root@337132d0c5ba:/workspaces/test-folder/my-app# yarn dev

これでlocalhostの3000番でプロジェクトが立ち上がっているのが確認できます。ポートの転送も自動でしてくれるのがdevcontainerのいいところですね～

my-app/app/page.tsxなんかを編集してホットリロードが確認できたら完了です。お疲れ様でした。

さらにいろいろ

パッケージ管理にyarnを使いましょう。一旦コンテナ内でmy-appに入り、yarn installを実行しましょう。yarn.lockが生成されるので、不要になったpackage-lock.jsonを削除します。

Dockerfileを以下のように追記します

Dockerfile

FROM node:latest

# 必要なパッケージのインストールとアップデート
RUN apt-get update \
    && apt-get install -y \
    git \
    # 追加のパッケージをここに列挙する
    && apt-get clean \
    && rm -rf /var/lib/apt/lists/*


# アプリケーションの依存関係をインストール
COPY /my-app/yarn.lock ./
RUN yarn install --frozen-lockfile

これによってある程度環境が整います。

.devcontainer/devcontainer.jsonに拡張機能の設定を追加します。こうすることで、開発環境を開いたときに自動的に拡張機能をインストールします。ここではCode Spell Checkerを追記してみます。
拡張機能を検索して、詳細画面に移動します。歯車のマークからdevcontainer.jsonに追加を選択した後、拡張機能をインストールします。

すると以下のようにdevcontainer.jsonが変更されているのがわかります。便利です。

おわり

普段あまりフロントの開発をしないのですが、情報が散らばっていて毎回探すのが面倒なので記事として残しておきます。今度からはこの記事を見て自分で環境構築するぞ