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

Question

我正在将我新开发的电子商务部署到我拥有的 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 无关，它甚至与模型中的那个无关。

Answer 1

我找到了解决方案。基本上，我必须将位置配置添加到我的后端“Sites-Available”文件中：

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;
    }

    
    
}

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

Configure Nginx with Vue.js, Django Rest Framework as backend and /api/ on same server?

django

vue.js

nginx

django-rest-framework

nginx-reverse-proxy