Настройка NGINX для отдельного Vue Frontend и Express Backend

Question

Меня интересует правильная настройка nginx при развертывании vue-интерфейса отдельно от экспресс-бэкенда - не отдельно с точки зрения серверов или доменов, а с точки зрения их обслуживания.

Во время разработки яиспользуйте npm serve в каталоге vue, и для создания производственной сборки он генерируется с помощью npm run build.Получившаяся папка dist должна быть обслужена, и мой вопрос заключается в том, как это сделать, когда бэкэнд находится на том же сервере.

Скажем, для бэкэнда express предоставляет маршруты. Должен ли nginx находиться перед экспрессом здесь? Внешний интерфейс vue вызывает эти маршруты, но статические файлы должны быть обслужены.Согласно документам это можно сделать с помощью serve.Это предназначено для производства?И опять же, должен ли nginx быть перед этим?

Мне интересно, потому что тогда маршрут будет:

Запрос браузера -> Nginx в Vue Frontend -> Vue Frontend-> Nginx to Backend

Это подходящий подход или я неправильно понимаю?

Answer 1

Должен ли nginx находиться перед экспрессом здесь?

Да, это очень хорошая идея.

Вы должны использовать отдельный набор URL для Vueи Express, поэтому Nginx, просматривая URL-адрес запроса, сможет понять, что делать: передать Vue-файл или прокси-сервер Express.В Nginx есть несколько вариантов классификации входящих запросов: по разным именам хостов, по путям, по комбинации обоих и т. Д.

Например, перед всеми маршрутами Express следует добавлять префикс пути /api/.Затем настройте nginx следующим образом:

Это не готовая к работе конфигурация, я просто пытаюсь дать подсказку, что вы должны искать в документации nginx

server {
  listen 80;
  server_name mydomainname.com;

  location /api {
    proxy_pass http://localhost:8000;  # port that Express serves,
                                       # better change to UNIX domain socket
  }

  location / {
    root /vue_root/dist;
  }
}