Nginx reverse proxy to node application API

Question

I've got an NGINX reverse proxy on my server handling requests for http://apcompdoc.com. It listens on port 80, and can successfully return the Vue Dist, however, I have a backend node API running on port 8081 and another node process running on port 8082. The user never directly requests anything on 8082, but rather the process on 8081 sometimes requests the process on 8082, so I'm assuming I never have to even expose that to Nginx at all, but I'm not too sure. However, the main problem is that the API is never reached I believe. I have it so that when you hit the endpoint http://apcompdoc.com/api/* it should proxy over to the node process. I am using PM2 to keep the process alive and monitor it, and am assured it's running. This is my NGINX apcompdoc.com config file:

server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;
    server_name: apcompdoc.com www.apcompdoc.com;
    charset utf-8;
    root    /var/www/apcompdoc/dist;
    index    index.html index.htm;
    # Always serve index.html for any request;
    location / {
        root /var/www/apcompdoc/dist;
        try_files $uri /index.html;
    }
    location /api/ {
        proxy_pass http://localhost:8081;
    }
    error_log /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

I am trying to get all requests to my API at /api/* to get redirected to the API at localhost:8081 and then returned to the user. I saw something about redirecting the proxy back, do I have to do that? I also don't know if I have to do /api/* in the NGINX config file. I'm really new to NGINX but I just want the requests to http://apcompdoc.com/api/* to be redirected to the node process on port 8081.

Romain V... · Accepted Answer · 2020-10-21 15:39:13Z

2

Bad or good practice, I'm not sure, but I always defining my backend as upstream. For example, your file will look like this:

upstream nodeprocess {
    server localhost:8081;
}
server {
    listen 80 default_server;
    listen [::]:80 default_server ipv6only=on;
    server_name: apcompdoc.com www.apcompdoc.com;
    charset utf-8;
    root    /var/www/apcompdoc/dist;
    index    index.html index.htm;
    # Always serve index.html for any request;
    location / {
        root /var/www/apcompdoc/dist;
        try_files $uri /index.html;
    }
    location  ^~ /api {
        proxy_pass http://nodeprocess;
    }
    error_log /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

Please note I added ^~ in the location of the api and removed the trailing /

answered Oct 21, 2020 at 15:39

Romain V...

4433 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

Jacob Bruce Over a year ago

Thanks, I will try this when I get home!

Jacob Bruce Over a year ago

This did not work, I added the upstream and then ran sudo nginx -t and everything checked out, then I ran sudo systemctl restart nginx and it restarted fine. When I get home I can check my API to see if there is a problem with my code.

Romain V... Over a year ago

What do you get when you call the api? An error? The Index page? Do you have any trace in the log files?

Jacob Bruce Over a year ago

I will be home in a little bit to check, but with the limited resources I have right now it just looks like no response is being sent back at all. All it does is send back an http response with JSON that works in junction with the app delivered on the ‘/‘ route. When I go into chrome dev tools it just has no response. I will check logs and see what is happening.

Jacob Bruce Over a year ago

The logs mention something about a GET request to ‘/undefined/api/login’ which I’m guessing means that the URL in my axioms request in the app is wrong. I will check that in a bit, but other than that it just mentions something about the index.html file.

|

Collectives™ on Stack Overflow

Nginx reverse proxy to node application API

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related