⛰️

Docker composeでNuxt 3の開発環境を作成する

2022/03/11に公開約5,200字

更新履歴

click

2022/3/11

  • 記事を公開しました

個人用メモです、間違っていたら訂正お願いします。

https://zenn.dev/szn/articles/nuxt-2-with-docker-compose
これのNuxt 3バージョンのようなものです。

手っ取り早く構築したい人はこちらからどうぞ

https://github.com/szne/Nuxt_3_with_docker

環境

> 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内は以下のように記述します

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
docker-compose.yml
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のコメントアウトを外します。

docker-compose.yml
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という空のディレクトリが表示されたと思います。
この中をいじりたい場合は下記の記事を参考にするといいかもしれません。

https://zenn.dev/foolishell/articles/3d327557af3554

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/にアクセスし、以下の画面が出たらインストール完了です

Nuxt.js初期画面

お疲れ様でした。

最終的なディレクトリ構成
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

参考

https://v3.nuxtjs.org/getting-started/installation

https://zenn.dev/paryugh/articles/7559e255fbfc2e

https://qiita.com/hyamatan/items/0d8c0b318f71aa130fce

https://hi97.hamazo.tv/e8859609.html

https://qiita.com/ngplus6655/items/6dd701450b9f9e8e2b86
GitHubで編集を提案

Discussion

ログインするとコメントできます