概要
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は開発時の起動＆ホットリロードが速いとのことでしたが、、、
体感めっちゃ速そう！！