概要

Nuxt3の開発環境をDockerを使って構築してみます。
※ Nuxt3が正式にリリースしたので2023/2/1に最新版に更新しました。

環境

macOS Ventura 13.2
Docker version 20.10.22
Docker Compose version v2.15.1

成果物

構成

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

.
├── docker
│   └── nuxt
│       └── Dockerfile
├── docker-compose.yml
└── front
    ├── README.md
    ├── app.vue
    ├── node_modules
    ├── nuxt.config.ts
    ├── package.json
    ├── tsconfig.json
    └── yarn.lock

手順

1. docker-compose.ymlの作成

初期構築段階ではcommand: sh -c "yarn && yarn dev -o"を一旦コメントアウトしておいてください。

docker-compose.yml

version: '3.9'

services:
  nuxt:
    container_name: nuxt
    build: docker/nuxt
    volumes:
      - ./front:/app:cached
      - nuxt_node_modules:/app/node_modules
    ports:
      - "80:3000"
      - "24678:24678"
    tty: true
    environment:
      - HOST=0.0.0.0
      - port=80
      - CHOKIDAR_USEPOLLING=true
#    command: sh -c "yarn && yarn dev"
volumes:
  nuxt_node_modules:

2. Dockerfile作成

docker/nuxt/Dockerfileを用意します。

FROM node:18-slim

ENV TZ Asia/Tokyo

WORKDIR /app

RUN apt-get update \
    && apt-get install -y \
    git \
    vim

3. Nuxtインストール

3.1 Dockerの起動

docker-compose up -d

3.2 nuxtコンテナに入る

docker-compose exec nuxt bash

3.3 Nuxtインストール準備

npx nuxi を使ってnuxt/starterをインストールします。

npx nuxi init . --force

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

frontディレクトリ直下に以下のファイルが作成されます。

.gitignore
.npmrc
app.vue
nuxt.config.ts
package.json
README.md
tsconfig.json

3.4 Nuxtインストール

yarn install

3.5 Nuxt実行

yarn dev

3.6 確認

ブラウザからアクセスしてみましょう。

以下の画面が表示されていればOKです。

3.7 コンテナから出る

exit

3.8 Docker終了

docker-compose down

4. おまけ

4.1 Nuxtの自動実行

docker-compose.ymlのcommand: sh -c "yarn && yarn dev -o"のコメントアウトを外します。
すると、Dockerを起動するときにNuxtも一緒に起動してくれます。

最後に

Nuxt 3は開発時の起動＆ホットリロードが速いとのことでしたが、、、
体感めっちゃ速そう！！

Nuxt3 × Docker環境構築（正式版）

概要

環境

成果物

構成

手順