如何为 Vue 和 Django 配置 NGINX？答案

【问题标题】：How to configure NGINX for Vue and Django?如何为 Vue 和 Django 配置 NGINX？
【发布时间】：2020-09-18 01:25:34
【问题描述】：

我正在关注这个tutorial 来创建一个后端并且它有效。

我做了一个简单的 Django REST 管理面板来上传图片，它工作正常。

然后我创建了 Vue 前端应用程序，在“VScode 远程”中运行 npm run serve，它工作正常（图像从 Django 获取并由 Vue 在我的本地主机中设置样式）。

问题在于如何在生产 VPS 服务器中完成所有这些工作并不明显（我的意思是来自 vue run build 之后的 Vue 'dist' 文件夹）。我尝试的一切都只是给我一个 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 在此配置中工作的信息。

附：也许有另一种方法可以将 Vue 与 Django 一起使用？

非常感谢您，祝您有美好的一天！

【问题讨论】：

标签： django vue.js nginx

【解决方案1】：

这是用于生产环境，而不是用于开发环境。使用 Guncorn 部署的 Django 应用程序

# settings.py

ALLOWED_HOSTS=['yourdomain.com', 'localhost'] # 'localhost' is optional 
...
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')

如果使用“corsheaders”，则添加 yourdomain.com

# settings.py

CORS_ALLOWED_ORIGINS = `[`
    "https://yourdomain.com",
    "http://yourdomain.com", # Use this if SSL in not configured
    "http://localhost"
]

为项目更新'urls.py'，并为您的应用程序选择路径；我的是 'app/api/' 所以它会指向http://yourdomain.com/app/api/

urlpatterns = [
    path('app/api/', include('api.urls')),
    path('app/admin/', admin.site.urls),
]

NGINX 配置

# /etc/nginx/sites-available/yourdomain.com.conf
server {
    root /var/www/app/dist; # Vue app production build
    index index.html index.htm index.nginx.debian.html;

    server_name yourdomain.com www.yourdomain.com;

    # Django folder
    location /static/ {
        root /path/to/django/project/folder;
    }

    # Django web requests handled here
    location /app/ {
        # Gunicorn and other configurations
        ...
    }

    # Everything else handled by Vue
    location / {
        try_files /$uri /$uri/ /index.html$args;
    }

    ...
}

【讨论】：

【解决方案2】：

这是一个巨大的进步，不是 404，而是一个名为“前端”的空白页面，浏览器拒绝找到 css 和 js。

后来在朋友的帮助下，thisguide 我可以将 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，你救了我几周的生命......

【讨论】：

【解决方案3】：

您没有监听任何端口。请注意，在位置/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 中提供服务。

【讨论】：