Zenn
💡

Turborepo × Docker × Next.jsでのホットリロード設定

に公開
Docker
Next.js
frontend
環境構築
Turborepo
tech

ご覧いただきありがとうございます。Furuyaです。
今回は、Turborepo × Docker × Next.jsでのホットリロード設定についてまとめます。
Turborepo × Dockerの環境設定については以下をご覧ください。
https://zenn.dev/k0y0k0y0/articles/article_20250417

環境

  • MacBook Pro 13-inch, 2020, Four Thunderbolt 3 ports
  • macOS：Sequoia 15.4
  • Shell: zsh

背景

Docker × Next.jsでのホットリロード対応として、よく紹介されるのが以下の環境変数を設定する方法です。

WATCHPACK_POLLING=true

これは公式のissueでも言及されています。
https://github.com/vercel/next.js/issues/36774

しかし、Turborepo × Docker環境ではこれだけではホットリロードが正常に機能しないケースがありました。

試行錯誤の末、次の2通りの方法でホットリロードを安定して動かすことができました。目的や好みに応じて選択してください。

  • Dev Container × turbo コマンドで起動する方法
  • pnpm や npm でアプリ単位に起動する方法

方法① Dev Container × turbo コマンドで起動

まずは VS Code の Dev Container を使う方法です。
Dev Containerについて詳しくは以下をご覧ください。
https://zenn.dev/k0y0k0y0/articles/article_20241129

ディレクトリ構成

turborepo-app/
├── Dockerfile
├── docker-compose.yml
├── .devcontainer/
│ └── devcontainer.json
├── apps/
│ ├── docs/
│ ├── sample-app/
│ └── web/
└── ...

devcontainer.jsonの作成

.devcontainer'devcontainer.json
{
  "name": "turborepo-apps",
  "dockerComposeFile": ["../docker-compose.yml"],
  "service": "turborepo-apps",
  "workspaceFolder": "/usr/src/app"
}

docker-compose.ymlの設定

docker-compose.yml
services:
  turborepo-apps:
    image: turborepo-apps
    container_name: turborepo-apps
    build:
      context: .
      dockerfile: Dockerfile.local
    volumes:
      - type: bind
        source: .
        target: /usr/src/app
    ports:
      - "3000:3000"
      - "3001:3001"
      - "3002:3002"
    environment:
      - WATCHPACK_POLLING=true　#追加
    command: sleep infinity
    # コンテナ起動時にアプリも立ち上げたい場合は以下を使う
    # command: /bin/sh -c "pnpm install && pnpm turbo dev"

設定完了後にDev Containerを立ち上げればホットリロードが有効になっているはずです。

pnpmやnpmで個別に起動する方法

次に個別に起動する方法です。
この方法ではturboコマンドを利用せず、pnpmやnpmで立ち上げます。

ディレクトリ構成

turborepo-app/
├── Dockerfile
├── docker-compose.yml
├── ...
├── apps/
│   ├── docs
│   ├── sample-app
│   └── web
├──...

docker-compose.ymlの設定

docker-compose.yml
services:
  turborepo-apps:
    image: turborepo-apps
    container_name: turborepo-apps
    build:
      context: .
      dockerfile: Dockerfile.local
    volumes:
      - type: bind
        source: .
        target: /usr/src/app
    ports:
      - "3000:3000"
      - "3001:3001"
      - "3002:3002"
    environment:
      - WATCHPACK_POLLING=true　#追加
    command: sleep infinity
    # コンテナ起動時にアプリも立ち上げたい場合は以下を使う
    # command: /bin/sh -c "pnpm install && pnpm turbo dev"

package.jsonの設定

apps/sample-app/package.json
{
  "name": "sample-app",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "scripts": {
    "dev": "next dev --port 3002",
    "build": "next build",
    "start": "next start",
    "lint": "next lint --max-warnings 0",
    "check-types": "tsc --noEmit"
  },
  "dependencies": {
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "next": "15.3.1"
  },
  "devDependencies": {
    "typescript": "^5",
    "@types/node": "^20",
    "@types/react": "^19",
    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
    "tailwindcss": "^4",
    "eslint": "^9",
    "eslint-config-next": "15.3.1",
    "@eslint/eslintrc": "^3"
  }
}

アプリの起動

pnpm --filter sample-app run dev

以上で「Turborepo × Dockerでのモノレポ開発環境構築」は完了です！

GitHubで編集を提案

Discussion