はじめに

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

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 のインストール(ローカル)

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

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

npx nuxi init . --force

docker-compose.yml の作成

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

version: '3.9'

services:

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

  # フロントエンド用コンテナ
  nuxt_app:
    build: ./frontend
    volumes:
      - ./frontend:/frontend:cached 
      - node_modules:/frontend/node_modules
    ports:
      - "3000:3000"
    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:18-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

# RUN npx nuxi upgrade --force

EXPOSE 3000
EXPOSE 24678

# CMD ["pnpm", "dev"]

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採用)では、解消されています。