时间戳

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

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

问题描述

我正在将我新开发的电子商务部署到我拥有的 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

它在这里说例如在登录时，在本地机器上一切正常时未定义令牌。此外，令牌与发送用户详细信息无关，它甚至与模型中的内容没有任何关系。

标签： djangovue.jsnginxdjango-rest-frameworknginx-reverse-proxy

解决方案

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

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

    
    
}

推荐阅读