Next.js の 開発環境を Docker で構築する

はじめに

Next.jsの学習にあたり開発環境を構築した際の手順です。
Dockerを活用し環境を構築(Dockerのインストール手順は割愛)
WSL2環境(Ubuntu 20.04)で実施

動作確認環境

• Node.js: 18.17.1
• Next.js: 13.5.1
• TailwindCSS: 3.3.3
• Docker version: 20.0.5
• Docker Image: node:18-bulleye-slim

ディレクトリイメージ

作業ディレクトリ

├── compose.yaml
├── docker/
│   ├── Dockerfile
│   └── entrypoint.sh
└── myproject/
    ├── README.md
    ├── app/
    ├── next-env.d.ts
    ├── next.config.js
    ├── node_modules/
    ├── package-lock.json
    ├── package.json
    ├── postcss.config.js
    ├── public/
    ├── tailwind.config.ts
    └── tsconfig.json

Next.jsのプロジェクト作成

Node.jsのイメージを用いて、Next.jsのプロジェクトを作成

# 任意のディレクトリを作成し移動
$ mkdir next-app && cd next-app

# プロジェクトを作成
# "myproject" は任意のプロジェクト名
$ docker run --rm -u 1000 \
  -w /app \
  -v $PWD:/app \
  -it node:18-bullseye-slim \
  npx create-next-app myproject --typescript
(以下、表示される質問は任意の回答を行う)

# プロジェクトにパッケージを追加する場合(上記で作成したプロジェクトをマウントすること)
$ docker run --rm -u 1000 \
  -w /app \
  -v $PWD/myproject:/app \
  -it node:18-bullseye-slim \
  npm i <任意のパッケージ>

Dockerfileの作成

作成したプロジェクトを基に開発用のDockerfile および entrypoint.sh を作成する

Dockerfile

• WATCHPACK_POLLING=true: ホットリロードを有効化
• NEXT_TELEMETRY_DISABLED=1: テレメトリの無効化

Dockerfile

FROM node:18-bullseye-slim AS base

ENV NODE_ENV=development \
    WATCHPACK_POLLING=true \
    NEXT_TELEMETRY_DISABLED=1

RUN set -ex && \
    apt-get update && apt-get install -y perl tzdata && \
    mkdir -p /usr/src/app && \
    chown -R node:root /usr/src/app && chmod -R g+rwX /usr/src/app

WORKDIR /usr/src/app

COPY myproject/package.json .
COPY docker/entrypoint.sh /

USER node

EXPOSE 3000

ENTRYPOINT ["/entrypoint.sh"]

entrypoint.sh

entrypoint.sh

#!/bin/bash

trap stop SIGINT SIGTERM

function stop() {
    kill "${PID}"
    wait "${PID}"
}

# node_modulesが存在しない場合はインストール
if [ ! -d ./node_modules ]; then
    npm install
fi

# 開発用サーバの起動
npm run dev & PID="$!"
wait "${PID}"

ファイルの作成完了後、chmod +x entrypoint.sh で実行権限を付与しておく

compose.yamlの作成

compose.yaml

version: "3.9"

services:
  # Next.js
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    ports:
      - "3000:3000"
    volumes:
      - "./myproject:/usr/src/app"
    user: "1000:1000"

イメージの起動&動作確認

docker compose up -d --buildを実行後、ブラウザよりhttp://localhost:3000/を開いてNext.jsの画面が表示されれば動作確認完了

作成したプロジェクトをGitで管理すれば他の端末でも手間をかけずに開発できます。