🐳

Next.jsプロジェクトをDockerで動かす方法

に公開
Docker
Next.js
tech

既存のNext.jsプロジェクトをDocker上で起動できるように修正してみました。
今回はローカル環境でDocker環境を動かすことを目標にしています。

環境

"next": "15.3.2",
"react": "19.0.0"

手順

1. Dockerfileを作成

Dockerfile
DockerfileはDockerイメージを作成するための設定ファイルです。
nodeのバージョンは20-alpineで、パッケージマネジャーはyarnを利用します。

# Use official Node.js image as base
FROM node:20-alpine

# Create app directory
WORKDIR /usr/src/app

# Copy only package files first
COPY package.json yarn.lock ./

# Use local cache dir for yarn
RUN yarn config set cache-folder /usr/src/app/.yarn-cache

# Install dependencies
RUN yarn install

# Copy source code, but exclude node_modules
COPY . .

EXPOSE 3000
CMD ["yarn", "dev"]

2. docker-compose.ymlを作成

docker-compose.ymlは、はDocker Composeの設定ファイルです。
今回はnextのプロジェクトのみを作成します。
サービス名は、分かりやすくfrontと命名します。
backendがある場合は、それも追加しましょう。

そして、frontの設定を追加します。
http://localhost::3000で動作するように設定します。
CHOKIDAR_USEPOLLING=true により、ファイル変更監視がDocker上でも動作します。
また、node_modules はホストではなくコンテナ内でインストールされたものを使用するため、
/usr/src/app/node_modules をマウント対象から除外しています。

version: "3.8"
services:
  front:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - ./:/usr/src/app
      - /usr/src/app/node_modules
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=development
      - CHOKIDAR_USEPOLLING=true
    command: yarn dev

3. コンテナをビルド＆起動

上記のファイル作成が終われば、下記のコマンドを実行し、イメージをビルドしてコンテナを起動します。

docker compose up --build

そして、http://localhost::3000を確認すると、見れるようになります。

停止する際は下記コマンドです。

docker compose stop

ただ、今回の場合だと、コンテナ内でtestやstorybookなどを実行する際は、

docker compose exec front sh

でコマンドを打って、実行するのが良いでしょう。

今回はNext.jsだけの場合なので、あまり手順が必要ではなかったですが、
Docker化したい方はぜひ試してみてください。

Discussion