Как настроить NGINX для Vue и Django?

Question

Я следовал этому руководству , чтобы создать бэкэнд, и он сработал.

Я сделал простую административную панель Django REST для загрузки изображений, она сработала.

Затем я создал Vue интерфейсное приложение, запустил npm run serve в 'VScode remote' и работает (изображения извлекаются из Django и стилизованы Vue на моем локальном хосте).

ПРОБЛЕМА в том, что не очевидно, как заставить все это работать на производственном VPS-сервере (я имею в виду Vue Папка dist после vue run build). Все, что я пробовал, выдает ошибку 404 или портит админ панель Django.

Вот мои NGINX настройки:

server {
server_name kruglovks.xyz www.kruglovks.xyz;
client_max_body_size 100m;

location = /favicon.ico { access_log off; log_not_found off; }

location /static {
    root /home/kirill/myprojectdir/myproject;
}

location /media {
    root /home/kirill/myprojectdir/myproject;
}

location /dist {
    try_files $uri $uri/ /index.html;
    alias /home/kirill/myprojectdir/myproject;
}

location / {
    include proxy_params;
    proxy_pass http://unix:/run/gunicorn.sock;
}

Vue роутер установлен в режим истории .

Пожалуйста, мне нужна информация о том, как заставить Vue работать в этой конфигурации.

PS Может быть, есть альтернативный способ использования Vue рядом с Django?

Большое спасибо и хорошего дня!

Answer 1

Это был огромный шаг вперед, не 404, а пустая страница под названием 'frontend', и браузер отказался найти css и js.

Позже с помощью друзей и этим руководством я мог перенастроить nginx настройки на это:

server {
listen      80;
server_name kruglovks.xyz www.kruglovks.xyz;
root /home/sasha/myprojectdir/myproject/dist/;
client_max_body_size 100m;

location = /favicon.ico { access_log off; log_not_found off; }

location /static {
    alias /home/sasha/myprojectdir/myproject/static;
}

location /media {
    alias /home/sasha/myprojectdir/myproject/media;
}

location / {
    try_files $uri $uri/ /index.html;
}

location ^~ /api/ {
    include proxy_params;
    proxy_pass http://unix:/run/gunicorn.sock;
}

location ^~ /admin {
     include proxy_params;
     proxy_pass http://unix:/run/gunicorn.sock;
}

и теперь он работает!

Спасибо, так гадость @Danizavtz, ты спас меня, как недели жизни ...

Answer 2

Вы не слушаете никакие порты. Обратите внимание, что в местоположении /dist вам также необходимо изменить порядок операций

Попробуйте изменить настройки по умолчанию на эту конфигурацию:

server {
    listen      80;
    server_name kruglovks.xyz www.kruglovks.xyz;
    root        /var/www;
    #... configurations
    location /dist {
        alias /home/kirill/myprojectdir/myproject;
        try_files $uri $uri/ /index.html;

}

И приложение vuejs будет обслуживаться в www.kruglovks.xyz/dist.