使用 Vue.js、Django Rest Framework 作为后端和 /api/ 在同一台服务器上配置 Nginx？答案

【问题标题】：Configure Nginx with Vue.js, Django Rest Framework as backend and /api/ on same server?使用 Vue.js、Django Rest Framework 作为后端和 /api/ 在同一台服务器上配置 Nginx？
【发布时间】：2021-11-17 03:25:51
【问题描述】：

我正在将我新开发的电子商务部署到我拥有的 Ubuntu 服务器上。我已经为前端和后端设置了 Nginx。整个应用程序运行良好。唯一的问题是 DRF API 没有从后端获得任何东西（它不发送电子邮件，用户无法注册）。所有这些都会出现错误 500。在我看来，我仍然需要将 /api/ 添加到我的 Nginx 配置中，但是当我这样做时，整个应用程序都会崩溃。有人可以解释在“可用站点”中设置它的最佳方法吗？谢谢！

这是我的站点 - 可用于后端：

upstream perulab_app_server {
    server unix:/webapps/perulab/venv/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 8000;
    server_name 172.16.7.52;

    client_max_body_size 4G;

    location /static/ {
        root /webapps/perulab/web-backend;
    }

    location /media/ {
        root /webapps/perulab/web-backend;
    }

    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://perulab_app_server;
        }
    }
}

这是我的站点 - 可用于后端：

server {
    listen 8010;
    listen [::]:8010;
    server_name _;
    charset utf-8;
    root /webapps/perulab/web-frontend/dist;
    index index.html index.htm;

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

当我以现在的方式使用它时，控制台会打印此错误：

GET http://172.16.7.52:8000/api/v1/get-user-details/ 500 (Internal Server Error)

NameError at /api/v1/get-user-details/

name 'token' is not defined

这里说，例如在登录时，在本地机器上一切正常时未定义令牌。此外，Token 与 Send User Details 无关，甚至在模型中也没有任何相关内容。

【问题讨论】：

标签： django vue.js nginx django-rest-framework nginx-reverse-proxy

【解决方案1】：

我能够找到解决方案。基本上，我必须将位置配置添加到我的后端“可用站点”文件中：

upstream perulab_app_server {
    server unix:/webapps/perulab/venv/run/gunicorn.sock fail_timeout=0;
}

server {
    listen 8000;
    server_name 172.16.7.52;

    client_max_body_size 4G;

    location /static/ {
        root /webapps/perulab/web-backend;
    }

    location /media/ {
        root /webapps/perulab/web-backend;
    }

    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://perulab_app_server;
        }
    }

/ THIS IS THE SOLUTION:
    location /api/ {
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-NginX-Proxy true;
        proxy_pass http://perulab_app_server/api/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_redirect off;
    }

    
    
}

【讨论】：