Configure nginx for both Vue app front end and node.js backend

Question

I have been searching for this answer for months and have never been able to resolve this. I am using nginx as my web server and using node.js for my backend apis and vue as my main front end webpage that uses webpack. I would like to be able to go to my Vue page by going to http://ip and then get access to the api services by going to http://ip/api. I dont have a domain name set up so I use IP address for the urls.

So far I built my Vue app and is sitting in the /var/www/html/Web/dist folder and it works if you go to the http://ip url but I can not access my node.js APIs. My node.js server is running on localhost port 3000. My nginx config looks like this:

server {
        listen 80;

        root /var/www/html/Web/dist;
}

server {

listen 80;

  location /api/ {

        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

  }

}

Bertrand · Accepted Answer · 2018-12-10 00:22:54Z

4

You are duplicating server configuration. Simply keep one server properties set :

server {
  listen 80;    
  root /var/www/html/Web/dist;
  location /api/ {    
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;

  }
}

That means :

listens to all request for all ip's on port 80
Evaluate relative path from root /var/www/html/Web/dist;
if there's a matching '/api/' in url pass it to localhost:3000

It should work as expected now

answered Dec 10, 2018 at 0:22

Bertrand

1,9861 gold badge17 silver badges25 bronze badges

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

1 Comment

Ivan Shatsky Over a year ago

Depending of node app architecture it may be needed to replace proxy_pass http://localhost:3000; with proxy_pass http://localhost:3000/ to rewrite request URIs from /api/route/path/ to /route/path/

Collectives™ on Stack Overflow

Configure nginx for both Vue app front end and node.js backend

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related