Почему у меня не работает npm run dev в Docker?

Question

[admiz]

У меня есть контейнер с nginx и php, в котором развернуто приложение Laravel, а также установлен сборщик vite. Когда я запускаю команду npm run dev, файлы CSS и JS не компилируются. При попытке открыть приложение в браузере, я получаю 3 ошибки:

- GET http://localhost:5173/@vite/client net::ERR_EMPTY_RESPONSE
- GET http://localhost:5173/resources/js/app.js net::ERR_EMPTY_RESPONSE
- GET http://localhost:5173/resources/css/app.css net::ERR_EMPTY_RESPONSE

Я понял, что основная проблема заключается в том, что порт 5173 недоступен из контейнера. Можете подсказать, как можно настроить доступ к порту 5173 ?

Мой файл docker-compose.yaml

version: "3"
networks:
  backend:
    driver: bridge
services:
  nginx:
    image: "nginx:stable-alpine"
    ports:
      - "5000:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./src:/var/www/laravel
    depends_on:
      - mysql
      - php
      - phpmyadmin
      - npm
    networks:
      - backend
  php:
    build:
      context: dockerfiles
      dockerfile: php.Dockerfile
    volumes:
      - ./src:/var/www/laravel
    networks:
      - backend

  mysql:
    image: mysql:8.0
    ports:
      - "3316:3306"
    env_file:
      - env/mysql.env
    networks:
      - backend
  composer:
     build:
        context: dockerfiles
        dockerfile: composer.Dockerfile
     volumes:
        - ./src:/var/www/laravel
     networks:
        - backend   
  artisan:
      build: 
        context: dockerfiles
        dockerfile: php.Dockerfile
      volumes:
          - ./src:/var/www/laravel
      entrypoint: ["php","/var/www/laravel/artisan"]
      networks:
        - backend

  npm:
    image: node:alpine
    container_name: npm
    volumes:
      - ./src:/var/www/laravel
    ports:
      - "5173:5173"
    working_dir: /var/www/laravel
    entrypoint: ["npm"]
    command: ["npm", "run", "dev", "--host", "0.0.0.0"]

Comments

[Valentin Barbolin]

npm:
    image: node:alpine
    container_name: npm
    volumes:
      - ./src:/var/www/laravel
    ports:
      - "5173:5173"
    working_dir: /var/www/laravel
    command: ["npm", "run", "dev", "--host", "0.0.0.0"]

[admiz]

Valentin Barbolin, Я внёс изменения, как вы писали, но при запуске npm run dev возникает вот такая ошибка.

[Valentin Barbolin]

admiz, Так пробовал?

docker-compose up -d
docker-compose exec npm npm run dev --host 0.0.0.0

Зачем ты еще раз запускаеш npm run dev если это делает compose ?

[admiz]

Valentin Barbolin, Как нужно запускать ?

[Антон Горецкий]

admiz, что ты там запускаешь? чему там запускаться? У тебя как минимум должны быть эти строки:

COPY package*.json ./

RUN npm install

COPY . .

и вот здесь ./src:/var/www/laravel скорее всего должна быть папка dist или build, а не src, но это уже зависит от того как проект собирается. И вообще, это все должно быть в отдельном докерфайле и в композ подставляться в виде билда

[admiz]

Антон Горецкий, Я сделал отдельный докерфайл и в композ подставил в виде билда, но при запуске docker-compose up -d происходить ошибка.


docker-composeю.yaml

npm:
      build:
         context: dockerfiles
         dockerfile: npm.Dockerfile
         container_name: npm
         volumes:
              - ./src:/var/www/laravel:cached
          networks:
               - backend

npm.Dockerfile

FROM node:19.5.0-alpine

# workdir of project
WORKDIR /var/www/laravel
ADD . /var/www/laravel

# Install the application dependencies
RUN npm install

# Expose a port (if your application runs on a specific port)
EXPOSE 3000

[Антон Горецкий]

admiz, вы в курсе как node проект собирается? У вас должен быть либо файл package.json в корне, либо команда npm init -y Я вот это для кого писал? COPY package*.json ./ Вбейте в поиск на githube - "docker-compose node" и посмотрите на готовые пректы.

[admiz]

FROM node:19.5.0-alpine

# workdir of project
WORKDIR /var/www/laravel
ADD . /var/www/laravel

COPY package*.json ./
# Install the application dependencies
RUN npm install

COPY . .
# Expose a port (if your application runs on a specific port)
EXPOSE 3000

Я сделал как вы мне сказали, но у меня другая ошибка.

[Антон Горецкий]

admiz, а у вас есть файл package.json в корне?

[admiz]

У меня он есть.

[Антон Горецкий]

тогда почему он не копируется? Вообще, сначала копируют файл package.json, потом запускают npm ci, а потом копируют файлы проекта из директории COPY . . Сдается мне что пути у вас неправильно указаны. Точка это ведь директория где сам файл Dockerfile лежит, а он лежит у вас в папке dockerfiles

[Владислав Лысков]

если у тебя laravel, то смотри

docker0compose.yml

node
    hostname: node
    container_name: node
    build: docker/node
    volumes:
      - ./backend:/var/www/example.internal/backend
      - ./docker/log:/var/log
    command: bash -c "yarn && yarn dev"
    working_dir: /var/www/example.internal/backend
    ports:
      - "5173:5173"
    networks:
      - internal

vite.config.js

export default defineConfig({
...
    server: {
        host: '0.0.0.0',
        port: 5173,
        hmr: {
            host: 'localhost',
        }
    },

[Леонид Яковлев]

admiz, а путь до него относительно докерфайла правильно указан?