Making ExpressJs recognise base path - node.js

I have built an small nodejs app using express. Everything works fine on my local machine & the app runs good when I point my browser to http://localhost:3000
But now I am planning to host this app on one of the domain, Lets say http://example.org which is running on nginx & its a php code
But how do I make my express app to properly run the app on example.org/nodeapp ?
Currently, it is considering the example.org as base url of my app & hence throws 404 as it searches for nodeapp in my routes. It should ideally consider example.org/nodeapp as baseurl.
In my server block config, I have following code
listen 80;
server_name your-domain.com;
location /nodeapp {
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;
}

You could have nginx rewrite the url by adding something like rewrite ^/nodeapp/(.*) /$1 break;

Related

Node JS hosting using Nginx Reverse proxy gives 404 error

I want to host a Nodejs API server to my digitalocean server where a WordPress application is already running using Nginx and PHP fpm
I followed the below link to set up the WordPress application and it's working fine now.
https://www.digitalocean.com/community/tutorials/how-to-configure-nginx-as-a-web-server-and-reverse-proxy-for-apache-on-one-ubuntu-18-04-server
I wanted to set up Nodejs application inside the same server for demo purposes and I followed the digitalocean guide for setting up node js with a different config file and subdomain.
https://www.digitalocean.com/community/tutorials/how-to-set-up-a-node-js-application-for-production-on-ubuntu-16-04
My Nginx config for node application looks like this
server {
server_name sub.domain.com
location / {
proxy_pass http://localhost:6969;
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;
}
}
I have allowed port 6969 using ufw allow 6969.
I am able to access the Nodejs application using sub.domain.com:6969 but sub.domain.com gives me a 404 error. (404 Not Found nginx/1.18.0 (Ubuntu))
I want to access Nodejs application directly without a port number. I have checked Nginx logs and there are no errors, and configures is gives success in nginx -t
Please give me some suggestions to debug and fix this issue. I don't have much knowledge in Nginx configuration. I was just following tutorials from Digitalocean to configure the WordPress and node application.
Thanks in Advance
You are missing the port
server {
server_name sub.domain.com;
listen: 80;
location / {
proxy_pass http://localhost:6969;
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;
}

Cannot GET etc with Nginx Reverse Proxy React + Node + PM2

In setting up an Nginx reverse proxy for both a React app and a Node web server, it seems to have broken Express on the backend, although I can tell I'm accessing it in the browser by receiving "Cannot GET XX" messages after adding the second location block soon to follow below (previously the browser was just white when visiting the API endpoints because React Router was trying to grab them).
Here's what the config looks like, where port 3000 is my React app and 4000 is my Express server, both being managed by pm2:
server {
root /var/www/html;
index index.html index.htm index.nginx-debian.html;
server_name www.mywebsite.com; # managed by Certbot
location / {
proxy_pass http://127.0.0.1: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;
}
location /api/ {
proxy_pass http://127.0.0.1:4000/;
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;
}
}
Simple Express route that won't work ("Cannot GET /"):
app.get('/', (req, res) => {
res.send('Hello, world!');
});
There is some additional certbot stuff that was generated for SSL, but I'm not sure it's relevant. The React app works perfectly, but whether it's "location /api/" vs "location /api" and no matter how I name my routes in Express, they all can't resolve despite having worked perfectly before. Thanks in advance for any guidance!
EDIT: I changed the server conf to at least map /api/ to my server's root with a trailing backslash so I don't have to prepend /api to every route handler, but the issue still remains ("Cannot GET /").
Why do you use the following headers?
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
Probably not needed if you are using TLS/https and it may be causing issues with express if the upgrade header exists. Try removing that.
These headers are generally used for WebSockets. See the nginx docs for more details.

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;
}
}
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

Deploy node.js application to nginx

I have a node.js backend application running on port 1337 and i want to deploy it to my nginx server so i can get access to my backend from another computer and other netwroks.
i tried this in sites_availables and i enabled this configuration :
server {
listen 80;
server_name x.x.x.x(my server adrress);
location /node {
proxy_pass http://localhost:1337;
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;
}
}
then i restarted nginx
sudo service nginx restart
now i'm trying to reach x.x.x.x/node through my browser and i get 501 bad getaway.
The reverse proxy pipe from nginx to node is being broken because your path in the nginx config /node does not exist on your node application. You either need to implement that route, or do a rewrite to have nginx rewrite the path when proxying (check out this question: https://serverfault.com/questions/586586/nginx-redirect-via-proxy-rewrite-and-preserve-url)

Serve static site and node app on port 80 with nginx?

So now I am serving my backend app on mysite:4300 and my static site on mysite:80. This is okay but causes a few problems, one being SSL I would have to get two signed certificates, at least I think.
Another problem which is CORS, it's not a big issue my express app is configured to allow CORS, but I would like to serve it all under one origin.
Here is how my nginx config looks.
I created inside /etc/nginx/conf.d/mysite.com.conf
server {
listen 80;
server_name mysite.com;
location / {
proxy_pass http://localhost:3100; //node js port
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;
}
}
So basically the above allows me to serve my nodejs app (running with forever.js) for port :3100 on port :80.
This hijacks my static site, obviously but I was wondering how I could possibly configure it to serve on mysite.com/myApp
My Question
How do I configure nginx to serve as a proxy not to mysite.com:80 but mysite.com:80/myApp so I can serve my static website on mysite.com:80?
Do I need to rethink how I am using the proxy, or is there a configuration method I can use?
P.S Following this tut https://www.digitalocean.com/community/tutorials/how-to-host-multiple-node-js-applications-on-a-single-vps-with-nginx-forever-and-crontab
Maybe I need to configure DNS records, or create a subdomain?
Solution: I ended up using a subdomain, but I think it's pretty much the same concpet.
Thanks to #Peter Lyons I have this server block
server {
listen 80;
server_name app.mysite.com;
location / {
root /var/www/mySite/public_html;
proxy_pass http://localhost:3100;
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;
}
location #app {
proxy_pass http://localhost:3100;
}
}
It wasn't working until I added a root and location #app so now it works fine on port:80 so no more having a port number exposed in the url. Hopefully I can setup SSL for this now!
I think I am going to try and serve it like this mysite.com/myApp to test it, might be handy in the future.
P.S I may also avoid using the subdomain, because it still is considered Cross origin Are AJAX calls to a sub-domain considered Cross Site Scripting?
I may want to allow my app to communicate with my site, and avoiding CORS might make it easier. That is if mysite.com/myAPP is not considered CORS either. We will see.
Try: proxy_pass http://localhost:3100/myApp$uri;, which I think should do what you want.
When I want nginx to serve static files, I use try_files like this:
location / {
root /path/to/my/app/wwwroot;
try_files $uri $uri.html $uri/index.html #app;
}
location #app {
proxy_pass http://localhost:3100;
}

Resources