CODEWITHSUNDEEP
node.jsnginxvue.js
Nick
Nick

Reputation: 236

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

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;

  }

}

Upvotes: 2

Views: 7100

Answers (1)

Bertrand
Bertrand

Reputation: 1976

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

Upvotes: 3

Related Questions