Nuxt3の開発環境をDockerで構築したら[vite-node] [ERR_LOAD_URL] ..vueエラーになった

Nuxt3のプロジェクトをローカルのDocker環境で新しく作成して、yarn dev -o で起動してブラウザからアクセスしたところエラーになったので、解決方法を調べて対応しました。

今回の環境の各種バージョンは下記のバージョンです。

各種バージョン

・Nuxt : 3.5.2

・Node.js: v18.14.2

・Docker : 20.10.23

vite-node ERR_LOAD_URL ..vueエラーについて

ブラウザにアクセスすると、画像の画面が表示され [vite-node] [ERR_LOAD_URL] ..vue と表示されました。

プロジェクト作成して起動しただけなのに起動しないなんて…。

エラーが起きたときのDockerの設定

エラーが発生したときの Dockerfile と docker-compose.yml は下記のようにしていました。

Dockerfile

FROM node:18.14

ENV TZ Asia/Tokyo

WORKDIR /app

RUN apt-get -y update && \
    apt-get install -y git && \
    apt-get install curl -y && \
    npm install -g npm@latest nuxi nuxt3 && \
    yarn install

EXPOSE 3000

docker-compose.yml

version: "3.9"

services:
  leafy:
    container_name: front_app
    build: .
    volumes:
      - ./app/front_app:/app
      - /app/front_app/node_modules
    working_dir: "/app"
    ports:
      - "3010:3000"
     tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    command: sh -c "yarn dev -o"

エラーの原因について

エラーについて検索していたときに、下記のGithub Issueを見つけました。

[vite-node] ERR_LOAD_URL ..vue error in dev mode (Docker only)

まさにこれだ！というタイトルだったので、Googleで翻訳しながら読み解いていくと、workdir を app から frontend に変えたら解決できたというコメントがありました。

詳しくはわかっていないのですが、エラーの原因は Nuxt ではなく vite にあって、 vite が app/app.vue を app.vue にしてしまうみたいなことが書いてありました。

解決方法

Github Issue のおかげで解決方法がわかったので、早速 workdir を app から frontend へ変更。

※ workdir が app じゃなければ大丈夫そうです

変更後のdocker-compose.yml

version: "3.9"

services:
  leafy:
    container_name: front_app
    build: .
    volumes:
      - ./app/front_app:/frontend  # ここを変更
      - /app/front_app/node_modules
    working_dir: "/frontend"       # ここを変更
    ports:
      - "3010:3000"
     tty: true
    environment:
      - HOST=0.0.0.0
      - port=3000
      - CHOKIDAR_USEPOLLING=true
    command: sh -c "yarn dev -o"

workdir を変更して再起動

再起動後、ブラウザからアクセスすると無事に Nuxt の Welcome 画面が表示されました！

英語の Github Issue でも諦めないで読んで良かったですw