Служа Джанго и Вью с Nginx

Question

У меня есть веб-сайт, который использует Django для API и Vue для внешнего интерфейса. В настоящее время при развертывании сайта я делаю следующее:

• Создание производственной сборки приложения Vue (npm run build)
• Скопируйте папку Vue dist в определенную папкув приложении Django
• Один из URL-адресов Django настроен как TemplateView, который обслуживает Vue index.html

Выполнив вышеизложенное, Nginx в производстве простообслуживает приложение Django, используя gunicorn, и все работает.

Однако я бы предпочел, чтобы Nginx обслуживал Vue index.html и статические файлы. Например, / будет служить приложению Django, а /spa будет служить приложению Vue, которое само будет вызывать API.

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

upstream appserver_wsgi_app {
  server localhost:8000 fail_timeout=0;
}

server {
  listen 80;
  server_name www.example.com;
  rewrite ^(.*) https://$server_name$1 permanent;
}

server {
    server_name www.example.com;
    listen 443 ssl;
    ...
    ...
    ...
    location /static {
        autoindex on;
        alias /home/user/static_django_files/;
    }

    location /media {
        autoindex on;
        alias /home/user/media_django_files/;
    }

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
            proxy_redirect off;
            if (!-f $request-filename) {
                proxy_pass http://appserver_wsgi_app;
                break;
            }
    }
}

Что нужно изменить в Nginx, чтобы оно служило Vue index.html и static files, а также приложению Django? Кроме того, нужно ли что-то изменить на стороне Vue, так как я сейчас просто вызываю API следующим образом:

axios.post("/api/dosomething/", data)

РЕДАКТИРОВАТЬ

Я добавил следующее к своемуКонфигурация nginx и загрузил папку Vue dist:

    location /spa {
        autoindex on;
        alias /path/to/dist/;
        try_files $uri $uri/ /index.html;
    }

Я также добавил следующее к vue.config.js:

baseUrl: '/spa'

И к своему Vue Router: mode: history

При перезапуске nginx страница index.html для приложения vue пытается загрузить в браузере, но не может найти файлы css и js, которые пытается найти в:

www.example.com/spa/js/...
www.example.com/spa/css/...

Answer 1

У меня есть аналогичная установка, где я запускаю бэкэнд Django REST с uwsgi на порту 8090 и обслуживаю производственную сборку углового 4-внешнего интерфейса через nginx. Вот мой nginx.conf

server {
    listen      80;
    server_name **url**;
    rewrite     ^   https:// **url** $request_uri? permanent;
}

server {
    listen       443 ssl;
    server_name  **url**;
    ssl_certificate **.pem;
    ssl_certificate_key **.key;

    root *path to your vue production build folder where index.html resides*;
    index index.html;

    error_page 502 /gateway.html;

    location /assests {
        autoindex on;
        alias *path to you Django assets *;
    }
    location /static {
        autoindex on;
        alias *path to you static files both django static files and vue related static files*;
    }

    // this to server the django admin
    location /manage/ {
        proxy_pass http://127.0.0.1:8090/manage/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    // this is for the REST backend
    location /api/{
        proxy_pass http://127.0.0.1:8090;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Я думаю, что подобная установка должна работать для проекта Django + Vue.js. Дайте мне знать, если это работает.

** РЕДАКТИРОВАТЬ для своего второго выпуска создайте другое местоположение с '/ spa / static' в nginx.conf, аналогично '/static'.