Nginx configuration for separated frontend and backend endpoints

server.conf

upstream example-webpack {
  server 127.0.0.1:8080;
}

upstream example-backend {
  server 127.0.0.1:3000;
}

server {
  listen 80;
  server_name example.loc;

  location / {
    proxy_set_header   Host            $http_host;
    proxy_set_header   X-Real-IP       $remote_addr;
    proxy_set_header   X-NginX-Proxy   true;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_redirect     off;
    proxy_buffering    off;
    proxy_pass         http://example-webpack;
  }
}

server {
  listen 80;
  server_name api.example.loc;

  location / {
    proxy_set_header   Host            $http_host;
    proxy_set_header   Upgrade         $http_upgrade;
    proxy_set_header   Connection      "upgrade";
    proxy_set_header   X-Real-IP       $remote_addr;
    proxy_set_header   X-NginX-Proxy   true;
    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_http_version 1.1;
    proxy_redirect     off;
    proxy_pass         http://example-backend;
  }
}

thank you, this is awesome !

Typically 8080 is backend and 3000 would be front-end. so can you mind changing it ?

I don't remember what this is all about, 5 years passed.

Thank you, thats fine I discover yours now !!!

Can we do this using same server_name for backend and frontend?

thankyou sir