Docker で Next.js 14 のテンプレートを構築してみた

はじめに

• この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明します。

GitHub

• 今回作成したテンプレートは下記のリポジトリにありますので、良ければご参照ください。
  • https://github.com/0machi/nextjs-docker-template

Dockerfile

• 公式の Dockerfile を参考に作成しました。
• 全容

# https://hub.docker.com/_/node
FROM node:20-alpine AS base

# Install dependencies only when needed
FROM base AS deps
# https://github.com/nodejs/docker-node/tree/main?tab=readme-ov-file#nodealpine
# One common issue that may arise is a missing shared library required for use of process.dlopen.
# To add the missing shared libraries to your image, adding the libc6-compat package in your Dockerfile is recommended: apk add --no-cache libc6-compat
RUN apk add --no-cache libc6-compat

USER node

# Install dependencies
WORKDIR /app
COPY --chown=node:node ./package.json ./
RUN npm install

Compose ファイル

• 全容

services:
  nextjs:
    container_name: nextjs
    build:
      context: .
      dockerfile: dev.Dockerfile
    ports:
      - '3001:3000'
    volumes:
      - type: bind
        source: ./
        target: /app
      - type: bind
        source: ./node_modules
        target: /app/node_modules
    environment:
      - WATCHPACK_POLLING=true
    command: sh -c "npm run dev"
    restart: always
    tty: true
    stdin_open: true
volumes:
  node_modules:

• 下記を参考に、bind mount の構文には、long syntax を使用しています。
  • node_modules の bind mount に対しても long syntax を使用しているため、起動時には、node_modules が存在せず、エラーになります。
    • そのため、後述する MakeFile で、docker comose build 実行時に、$ mkdir -p node_modules を実行するようにしました。

    volumes:
      - type: bind
        source: ./
        target: /app
      - type: bind
        source: ./node_modules
        target: /app/node_modules

• 下記を参考に、node_modules については、コンテナ内の node_modules を保持するために、volume を用いて永続化させています。

volumes:
  node_modules:

• ホットリロードの有効化

    environment:
      - WATCHPACK_POLLING=true

起動方法

• 下記の MakeFile より、$ make init によって起動することができます。

COMPOSE_YML := docker-compose.dev.yml
DC := docker compose -f $(COMPOSE_YML)
SERVICE := nextjs


build:
	mkdir -p node_modules
	$(DC) build

up:
	$(DC) up -d

down:
	$(DC) down --remove-orphans

down-v:
	$(DC) down --remove-orphans --volumes

logs:
	$(DC) logs -f $(SERVICE)

sh:
	$(DC) exec $(SERVICE) sh

npm-install:
	$(DC) run --rm $(SERVICE) npm install

init:
	@make down-v
	@make build
	@make npm-install
	@make up
	@make logs

• 下記を参考に、git clone 後、初回起動時の sh: xxx: not found エラーを解決するために、下記のように依存パッケージをインストールようにしました。

npm-install:
	$(DC) run --rm nextjs npm install

Linter、Formatter の設定

• 下記を参考に設定を適用しました。

おわりに

• この記事では、Next.js 14 が動作するテンプレートを Docker で構築する方法について説明しました。
  • これから Next.js を触れる人の参考になればと思います。