Не могу получить горячую перезагрузку для работы за Nginx в докере

Question

Я пытаюсь настроить базовое приложение Vue, которое живет в док-контейнере, используя docker compose и Nginx. Моя проблема в том, что я не могу получить горячую перезагрузку на работу. Моя текущая настройка выглядит следующим образом: - Используя docker compose я создаю 2 контейнера. Один для nginx и один для моего приложения Vue. - Я инициализировал свое приложение Vue с помощью интерфейса Vue CLI, так что это совершенно новый проект. Контейнер приложения Vue не виден снаружи, так как он все маршрутизируется через nginx.

Горячая перезагрузка прекрасно работает вне docker / nginx, и хотя я могу получить доступ к приложению, пока оно находится в контейнере, горячая перезагрузка не работает. Я посмотрел вокруг и попробовал множество различных конфигураций nginx, но безрезультатно. Я не очень знаком с nginx и особенно с Vue (я впервые с ним экспериментирую). Я не уверен, что это проблема конфигурации на стороне Vue или Nginx.

Вот моя текущая конфигурация Nginx:

server {
  listen 8080;
  listen [::]:8080;

  location /app-api/ {
    proxy_pass http://app-api:8080;
  }

  location /app-ui/ {
    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;

    proxy_pass http://app-ui:8080;
  }

  location /sockjs-node/ {
    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;

    proxy_pass http://app-ui:8080;
  }
}

Вот мой конфиг Vue:

module.exports = {
    publicPath: '/app-ui',
    devServer: {
        disableHostCheck: true,
        //https: true,
        overlay: {
            warnings: true,
            errors: true
          }
    }
}

У меня есть другое приложение, которое я использовал в качестве примера, с идентичной конфигурацией (это то, на чем я основывался), и это приложение прекрасно работает с горячей перезагрузкой, поэтому я знаю, что это возможно. Однако этот проект использует более старую версию Vue и использует веб-пакет напрямую, а не через VUE CLI.

Редактировать: Так что, похоже, проблема не в nginx. Я удалил nginx и просто использую приложение через docker-compose, и у меня все та же проблема. Вот ошибки, которые я получаю:

Answer 1

Так что, поняв, что моя проблема не связана с nginx, я нашел это сообщение в блоге, на которое мне ответили.Оказывается, мне нужно было добавить переменную окружения в контейнер моего приложения, например так:

environment:
      - CHOKIDAR_USEPOLLING=true

Теперь моя консоль все еще получает спам с ошибками, но, похоже, это совсем другая проблема, так как горячая перезагрузка теперь работает.