Docker composeでNuxt 3の開発環境を作成する
更新履歴
click
2022/3/11
- 記事を公開しました
個人用メモです、間違っていたら訂正お願いします。 これのNuxt 3バージョンのようなものです。
手っ取り早く構築したい人はこちらからどうぞ
環境
> sw_vers
ProductName: macOS
ProductVersion: 12.2.1
BuildVersion: 21D62
> docker -v
Docker version 20.10.12, build e91ed5707e
> docker-compose -v
Docker Compose version 2.3.0
これを見ればわかると思いますが、前回から実行環境が大きく変わり、WindowsからMac OSへとなっております。
それに伴い、動作確認もMac OSのみとなります、もしWindowsマシンで作動しなかった場合はご連絡くれると嬉しいです。
Docker とかの下ごしらえ
プロジェクトを始めたいディレクトリに移動します、この文章ではNuxtProjectとしています。
+ NuxtProject/
Dockerfile の作成
Docker は Dockerfile から命令を読み込み、自動的にイメージをビルドできます。
Dockerfile リファレンス
DockerfileをNuxtProjectの中に追加します
NuxtProject/
+ └ Dockerfile
Dockerfile内は以下のように記述します
FROM node:lts-alpine
RUN mkdir src
RUN apk update && \
apk upgrade && \
apk add git && \
npm install -g npm@latest nuxi nuxt3
docker-compose.yml の作成
Compose とは、複数のコンテナを定義し実行する Docker アプリケーションのためのツールです。
docker Compose 概要
docker-compose.ymlを追加します
NuxtProject/
+ ├ docker-compose.yml
└ Dockerfile
version: '3.8'
services:
app:
build: .
volumes:
- ./src:/src:cached
# - node_modules:/src/node_modules
# ↑ 次回起動後にコメントアウトを解除
working_dir: "/src"
ports:
- "3000:3000"
tty: true
environment:
- HOST=0.0.0.0
- port=3000
- CHOKIDAR_USEPOLLING=true
volumes:
node_modules:
node_modulesをボリュームに指定する部分がコメントアウトになっています、この理由は後ほど説明します。
コンテナを起動（1回目）
Dockerイメージを起動します
> cd NuxtProject
> docker compose up -d
-dオプションでコンテナはバックグラウンドで起動し、そのまま実行し続けます。
Docker-docs-jaより
初回の起動には1分半ほど時間がかかります。
コンテナが起動しているかどうかを確認します（任意）
> docker compose ps
NAME COMMAND SERVICE STATUS PORTS
NuxtProject-app-1 "docker-entrypoint.s…" app running 0.0.0.0:3000->3000/tcp
コンテナが起動しているのを確認したら次の工程へと移ります
この時点でディレクトリはこうなっているはずです
NuxtProject/
+ ├ src/
├ docker-compose.yml
└ Dockerfile
Nuxt.js のインストール
コンテナ内に接続
> docker-compose exec app sh
/src #
npx nuxi を使ってnuxt/starterをインストール
/src # npx nuxi init .
Nuxt CLI v3.0.0-27447229.20f3171
ℹ cloned nuxt/starter#v3 to /src
🎉 Another geometric Nuxt project just made! Next steps:
📁 `cd `
💿 Install dependencies with `npm install` or `yarn install`
🚀 Start development server with `npm run dev` or `yarn dev`
この時点でディレクトリはこうなっているはずです
Nuxtproject/
├ src/
+ │ ├ .gitignore
+ │ ├ app.vue
+ │ ├ nuxt.config.ts
+ │ ├ package.json
+ │ ├ README.md
+ │ ├ tsconfig.json
+ │ └ yarn.lock
├ docker-compose.yml
└ Dockerfile
（余談）docker-composeのコメントアウトの理由
nuxt 3をインストールする際に使用するnuxiは作成するディレクトリにファイルが存在するとうまく作動しません、またnuxt 2.xまででのcreate nuxt-appの--overwrite-dirオプションを使用することができません。
Dockerでボリュームを設定すると（short記法の場合）ディレクトリにファイルが生成され、nuxiがうまく作動しなくなるため一時的にコメントアウトしています。
node_modulesにボリュームを割り当てる
今現在、コンテナ内ではnode_modulesを含むすべてのディレクトリをbindしている状態ですが、このままinstallすると時間がかなりかかってしまうため、node_modulesにボリュームを割り当てます
docker-compose.ymlの書き換え
- node_modules:/src/node_modulesのコメントアウトを外します。
version: '3.8'
services:
app:
build: .
volumes:
- ./src:/src:cached
- node_modules:/src/node_modules
# ↑ コメントアウトを解除
working_dir: "/src"
ports:
- "3000:3000"
tty: true
environment:
- HOST=0.0.0.0
- port=3000
- CHOKIDAR_USEPOLLING=true
volumes:
node_modules:
Dockerの再起動
/src # exit
> docker compose down
> docker compose up -d
これで/srcの中にnode_modulesという空のディレクトリが表示されたと思います。
この中をいじりたい場合は下記の記事を参考にするといいかもしれません。
nuxt 3のインストール
再度コンテナ内に接続
> docker-compose exec app sh
/src #
nuxt.jsのインストール
/src # yarn install
yarn install v1.22.17
Nuxt CLI v3.0.0-27447229.20f3171
> Local: http://localhost:3000/
> Network: http://172.x.x.x:3000/
ℹ Vite warmed up in xxxxms
ℹ Vite warmed up in xxxxms
✔ Vite server built in xxxxms
✔ Nitro built in xxx ms
http://localhost:3000/にアクセスし、以下の画面が出たらインストール完了です
お疲れ様でした。
最終的なディレクトリ構成
Nuxtproject/
├ src/
+ │ ├ .nuxt/
+ │ ├ node_modules/
│ ├ .gitignore
│ ├ app.vue
│ ├ nuxt.config.ts
│ ├ package.json
│ ├ README.md
│ ├ tsconfig.json
│ └ yarn.lock
├ docker-compose.yml
└ Dockerfile
終了〜次回以降の起動
終了方法
^c
/src # exit
> docker-compose stop
次回以降の起動方法
起動
> cd NuxtProject
> docker-compose up -d
> docker-compose exec app sh
/src # yarn dev -o
参考
Discussion