如何使用后端和前端配置 nginx？

Question

I have a simple vue.js and django (as REST API) application that I want to combine with nginx. Currently the frontend is working, but the backend is not. Here's my nginx config:

server {
    listen 80;
    location / {
        root   /usr/share/nginx/html/;
        index  index.html index.htm;
    }
    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://localhost:8000/;
        proxy_ssl_session_reuse off;
        proxy_set_header Host $http_host;
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
    }
}

Visiting localhost works for the static files, but localhost/api leads to a bad gateway error: [error] 29#29: *1 connect() failed (111: Connection refused) while connecting to upstream, client: 172.18.0.1, server: , request: "GET /api HTTP/1.1", upstream: "http://127.0.0.1:8000/", host: "localhost"

Also, trying to visit localhost/api via the frontend (axios) just returns the 'You need javascript to display this page' site, which is just part of the frontend.

Running the backend seperately, outside of docker and nginx, works fine on localhost:8000.

What can I do to make it work? It doesn't necessarily have to be done this way, as long as the frontend and backend can communicate.

Answer 1

You said you running Docker? Then you need to change localhost to the container name that running your backend.