Почему у меня не запускается Vite с командой npm run dev в Docker Compose?

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

- GET <a href="http://localhost:3000/@vite/client" rel="nofollow">localhost:3000/@vite/client</a> net::ERR_EMPTY_RESPONSE
- GET <a href="http://localhost:3000/resources/js/app.js" rel="nofollow">localhost:3000/resources/js/app.js</a> net::ERR_EMPTY_RESPONSE
- GET <a href="http://localhost:3000/resources/css/app.css" rel="nofollow">localhost:3000/resources/css/app.css</a> net::ERR_EMPTY_RESPONSE 

Сервер с запущенным Vite не отвечает по адресу <a href="http://localhost:3000" rel="nofollow">localhost:3000</a>. 

Вот мой файл `docker-compose.yaml`:

<pre><code class="yaml">version: "3.8"
services:
  nginx:
    image: "nginx:stable-alpine"
    ports:
      - "8000:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/conf.d/default.conf:ro
      - ./src:/var/www/crm
    depends_on:
      - mysql
      - php
    links:
      - node
  php:
    build:
      context: dockerfiles
      dockerfile: php.Dockerfile
    volumes:
      - ./src:/var/www/crm
  mysql:
    image: mysql:8.0
    volumes:
      - database:/var/lib/mysql
    ports:
      - "3316:3306"
    env_file:
      - env/mysql.env
    
  composer:
    build:
      context: dockerfiles
      dockerfile: composer.Dockerfile
    volumes:
     - ./src:/var/www/crm
  artisan:
    build:
      context: dockerfiles
      dockerfile: php.Dockerfile
    volumes:
      - ./src:/var/www/crm
    entrypoint: ["php", "/var/www/crm/artisan"]
  phpmyadmin:
    image: phpmy
</code></pre>

Можете подсказать, в чем может быть проблема?
  • 26 марта 2025 г. 6:14
Ответы на вопрос 1
Проблема с запуском Vite в вашем Docker Compose может быть связана с несколькими моментами. Попробуем рассмотреть основные ее причины и пути их решения.

### 1. Отсутствие сервиса для Node.js

В приведенном вами файле `docker-compose.yaml` нет сервиса для Node.js. Вам необходимо добавить отдельный сервис для Node.js, так как Vite требует его для работы. Ниже пример как это можно сделать:

```yaml
  node:
    image: node:16
    working_dir: /var/www/crm
    volumes:
      - ./src:/var/www/crm
    command: npm run dev
```

### 2. Настройка Vite

Убедитесь, что в конфигурации Vite указан правильный хост и порт. Если вы используете Docker, вам, возможно, нужно изменить параметры `server` в конфигурации `vite.config.js`:

```javascript
export default defineConfig({
  server: {
    host: '0.0.0.0', // Это позволяет подключаться к Vite из контейнера
    port: 3000,
    strictPort: true, // Не разрешать другим вариантам порта
  },
});
```

### 3. Проблема маршрутизации

Если ваша Nginx проксирует запросы на 3000 порт, убедитесь, что прокси настроен правильно. Возможно, вам понадобится добавить прокси-сервер в конфигурацию Nginx:

```nginx
location / {
    try_files $uri $uri/ /index.php?$query_string;
}

location /@vite/ {
    proxy_pass http://node:3000; # предполагается, что сервис node использует 3000 порт
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
}

location /resources/ {
    proxy_pass http://node:3000; # аналогично
}
```

### 4. Убедитесь, что зависимости установлены

Перед запуском `npm run dev` убедитесь, что все зависимости установлены. Если вы запускаете контейнер в первый раз, вам нужно будет выполнить `npm install`:

```bash
docker-compose run node npm install
```

### 5. Проверка ошибок

Проверьте логи вашего Node-контейнера с Vite и других контейнеров:

```bash
docker-compose logs node
```

Это может дать вам полезные подсказки о том, почему Vite не запускается.

### 6. Работоспособность

Когда вы внесете указанные изменения, перезапустите контейнеры:

```bash
docker-compose down
docker-compose up --build
```

### Заключение

Если вы выполните все вышеперечисленные шаги, это поможет выявить проблему. Основные моменты, которые нужно проверить – это наличие контейнера Node.js, правильно настроенные конфигурации Vite и Nginx, а также соответствующие команды для установки зависимостей и запуска.
Похожие вопросы