使用 Nginx 服务 Django 和 Vue

Question

我有一个网站，它使用 Django 作为 API，使用 Vue 作为前端。目前，当我部署网站时，我执行以下操作：

• 创建 Vue 应用程序的生产版本 ( npm run build)
• 将 Vuedist文件夹复制到 Django 应用程序中的特定文件夹中
• 其中一个 Django url 设置为TemplateView提供 Vue 服务的index.html

通过执行上述操作，Nginx在生产中只需使用 Django 应用程序即可gunicorn，一切正常。

不过，我更喜欢让 Nginx 提供 Vueindex.html和静态文件。例如，/将为 Django 应用程序提供服务，并为/spaVue 应用程序提供服务，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服务？另外，Vue 端是否需要更改任何内容，因为我目前只是按如下方式调用 api：static filesDjango

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.htmlvue 应用程序的页面尝试在浏览器中加载，但找不到它尝试查找的css和文件：js

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

Answer 1

我有一个类似的设置，我在端口 8090 上使用 uwsgi 运行 Django REST 后端，并通过 nginx 为 Angular 4 前端的生产构建提供服务。这是我的 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 项目。让我知道它是否有效。

** 编辑第二个问题，在 nginx.conf 中使用“/spa/static”创建另一个位置，类似于“/static”。