Nuxt3 環境構築 with Docker (決定版？)

はじめに

※この文章はベータ版です。

Dockerを使ってNuxt3の開発環境構築をしてみます。
Pnpm を採用しています。

構成

最終的に、以下のような構成になります。

.
├── docker-compose.yml
└── frontend
    ├── Dockerfile
    ├── README.md
    ├── app.vue
    ├── node_modules
    ├── nuxt.config.ts
    ├── package.json
    ├── tsconfig.json
    └── pnpm-lock.yaml

Nuxt3 のインストール(ローカル)

npm create nuxt を使って、ローカル(ホスト上)の ./frontend に
インストールします。

--forceオプションをつけないとカレントディレクトリ下に
作成できないようです。

pnpm create nuxt . --force

開発環境

docker-compose.yml の作成

./docker-compose.yml を作成します。

services:

  # TODO: DB用とバックエンド用コンテナを追加する

  # フロントエンド用コンテナ
  nuxt_app:
    build: ./frontend
    volumes:
      - ./frontend:/frontend:cached 
      - node_modules:/frontend/node_modules
    ports:
      - "3000:3000"
      - "24678:24678"
    tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    command: sh -c "pnpm dev"
volumes:
  node_modules:

Dockerfile の作成

frontend/Dockerfile を作成します。

FROM node:22-slim

ENV TZ=Asia/Tokyo

WORKDIR /frontend

RUN npm install -g pnpm

COPY . /frontend

# RUN rm -rf .git/
# RUN rm -rf node_modules

RUN pnpm install

EXPOSE 3000
EXPOSE 24678

# CMD ["pnpm", "dev"]

プロダクション環境

docker-compose.yml の作成

./docker-compose.yml を作成します。

services:

  # TODO: DB用とバックエンド用コンテナを追加する

  # フロントエンド用コンテナ
  nuxt_app:
    build: ./frontend
    volumes:
      - node_modules:/frontend/node_modules
    ports:
      - "3000:3000"
    tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    command: sh -c "node .output/server/index.mjs"
volumes:
  node_modules:

注意：

プロダクション環境用のcompose.ymlでは、フロントエンド用コンテナのvolumesにワーキングディレクトリ(WORKDIR)を記述してはいけません。

記述していると、フロントエンドコンテナのビルドが下記のエラーで
失敗します。

Cannot find module '/frontend/.output/server/index.mjs'

Dockerfile の作成

frontend/Dockerfile を作成します。

FROM node:22-slim AS base

WORKDIR /frontend

RUN npm install -g pnpm

COPY package.json pnpm-lock.yaml ./
RUN pnpm install

# FROM base AS builder

COPY . .

# RUN rm -rf .git/
# RUN rm -rf node_modules

RUN pnpm build

# FROM base AS production

# COPY --from=builder /frontend/.output ./.output

ENV TZ=Asia/Tokyo
# ENV PORT=3030

# EXPOSE 3030

# CMD ["node", ".output/server/index.mjs"]

Dockerコンテナ の起動

docker-compose up -d

動作確認

http://localhost:3000 にアクセスして、
エラーなく画面が表示されていれば、OK です。

Dockerコンテナ の終了

docker-compose down

あとがき

ローカル(ホスト上)でコーディング(開発)して Dockerコンテナに
反映する開発手順を想定しています。

個人的には、Dockerコンテナに入っての操作を必要とする
構築手順はNGで、見直しの必要があると考えます。

注意

Nuxt 3.4.2 以降 3.9未満では、Dockerfile の WORKDIR を
/app にしていると、エラーになり、Dockerの起動に
失敗します。これは不具合です。

(厳密には、Nuxt3で採用されている Vite の不具合です、
Vite 5.0 以降では解消されています。)

Nuxt 3.9未満では、WORKDIR は /app 以外にしてください。

Nuxt 3.9以降 (Vite5.0以降採用)では、解消されています。