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

I am in a process of deploying my newly developed e-commerce to a Ubuntu server that I have. I have already set up Nginx for Frontend and for Backend. The whole application is working fine. The only problem is DRF API that doesn't get anything from the backend (it doesn't send emails, users can't register). All of that gets error 500. It seems to me that I still need to add /api/ to my Nginx configuration, but when I do that the whole app goes down. Could someone explain the best way to set this up in "sites-available"? Thank you!

Here is my Sites-Available for Backend:

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

And this is my Sites-Available for Backend:

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

When I use it the way it is right now, console prints this error:

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

It says here for example on login that token is not defined when on local machine everything is working fine. Also, Token has nothing to do with Send User Details, it doesn't even have anything related to that in a model.

CodePudding user response：

I was able to find the solution. Basically, I had to add location configuration to my Backend "Sites-Available" file:

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

    
    
}