Nginx "Cannot GET /index.html" on proxy_pass to working domain - node.js

Let me jump right in to it: I'm trying to proxy_pass my base URL (test.co) to another domain (webflow.test.co). But, to put it simply, I'm having trouble. I've solved a lot of the issues so far, but am stuck here again. The domain (webflow.test.co) is working fine, so no issues there... but when I try to use the proxy_pass (shown below) i get an error in-browser of "Cannot GET /index.html".
A look at Chrome Dev Tools shows that the redirect to webflow.test.co isn't happening (I think, I'm no expert with this area of the devtools) and maybe isn't able to retrieve index.html for that reason.
Here's my nginx config file (I'm routing all requests other than the home to my NodeJS server):
upstream nodejs {
server 127.0.0.1:8081;
keepalive 256;
}
# Redirect all non-HTTPS to non-WWW HTTPS
server {
listen 8080;
server_name "~^(?:www\.)?(.*)$";
return 301 https://$host$request_uri;
}
# Redirect WWW HTTP to non-WWW HTTP
server {
listen 4430;
server_name "~^www\.(.*)$";
return 301 https://$1$request_uri;
}
server {
location / {
proxy_pass https://webflow.test.co;
proxy_set_header Connection "";
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto https;
}
}
# Reverse-proxy to http://nodejs
server {
listen 4430;
server_name "~^(?!www\.).*$";
client_max_body_size 50M;
location ~ /(?<all>.+) {
proxy_pass http://nodejs;
proxy_set_header Connection "";
proxy_http_version 1.1;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
Any help is greatly, greatly appreciated. I'll accept the first answer that works and is sensible. Thanks so much!
EDIT 1: I just tested without using SSL at all, and the response is the same - Cannot GET /index.html, while the actual domain webflow.test.co works fine.

Related

nginx throws 404 on redirecting through proxy_pass to nodejs app

I'm serving multiple nodejs apps on a single server through pm2 and using nginx to manage reverse proxies. Right now if I use the server's ip and app port to reach the apps directly it all works fine. But if I try to navigate to my apps through the location paths set in the nginx config then I get 404 errors.
Below is my nginx default config:
upstream frontend {
server localhost:3000;
}
upstream backend {
server localhost:8000;
}
server {
listen 443 ssl;
server_name <redacted>;
ssl_certificate <redacted>.cer;
ssl_certificate_key <redacted>.key;
error page 497 301 =307 https://$host:$server_port$request_uri;
location /app/frontend {
proxy_pass http://frontend;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
location /api {
proxy pass http://backend;
proxy_redirect off;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Ssl on;
}
}
server {
listen 80;
server_name <redacted>;
return 301 https://$server_name$request_uri;
}
Now when I try to go to https://<server ip>:3000, the frontend loads just fine but if I go to https://<server ip>/app/frontend, I get the following 404 error:
Although the index.html loads up, it tries to find the static assets on https://<server ip>/ but rather should try to find them on https://<server ip>:3000. This is the exact behaviour that I'm trying to achieve.
What I have tried so far:
Using rewrites
Adding trailing slashes to both location path and proxy_pass
I know this can be solved by changing the app's base url or the build directory but that is not what I'm looking for.
Any help would be highly appreciated.

Deployment of an e-learning project based on freecodecamp code

I made a fork of the freecodecamp project on github and modified the design to meet my client's requirements. Locally, everything works fine, but when I deploy online on a digitalocean droplet with Nginx as a proxy, There is a problem that occurs when authenticating with Auth0, the access-token is not sent to the client. Basically, the freecodecamp application uses auth0 to handle all the authentication.
Since everything is working fine locally, I thought that my online Nginx configurations might be the problem.
I created two configuration files on Nginx, one for the client and one for the api.
The configuration file for the api has the following content:
server {
listen 80;
listen [::]:80;
root /var/www/html/freeCodeCamp;
server_name my_domain_name.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:3000/;
proxy_redirect http://localhost:3000/ http://$server_name/;
}
}
The configuration file for the client has the following content:
server {
listen 80;
listen [::]:80;
root /var/www/html/freeCodeCamp;
server_name my_domain_name.com;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://localhost:8000/;
proxy_redirect http://localhost:8000/ http://$server_name/;
}
}
I would like to have your opinion on the subject. Thanks in advance.

Reverse proxy in subdirectory can't find static assets

I'm using Nginx as a reverse proxy to route requests to localhost to my node server, but requests to localhost/blog to a ghost server (a blogging platform)
My Nginx config is like this:
server {
listen 80;
server_name localhost;
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 ^~ /blog {
rewrite /blog/(.*) /$1 break;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://127.0.0.1:2368;
proxy_redirect off;
}
}
edit: The reason I'm rewriting the URL with rewrite /blog/(.*) /$1 break; is so that the ghost server doesn't get the request to /blog/, which it can't use
However because ghost, the blogging platform, is designed to be run in the root directory, all static assets fail because they should be going to localhost/blog/static/asset/path rather than localhost/static/asset/path:
Is there any simple solution to this problem? Or do I have to rewrite all the HTML for ghost?

Nginx, Node, Angular - Subfolder API/URL configuration

I currently have a node/angular app that runs as expected when pointed directly to the port configured (8081 for the purposes of explaining my situation). I'm able to post,get,put,delete as expected.
My goal is to have the node application running at mydomain.com/subfolder. When nginx is configured with the location of '/', everything works as expected. Config below:
upstream app_yourdomain {
server 127.0.0.1:8081;
}
server {
listen 0.0.0.0:80;
server_name yourdomain.com yourdomain;
access_log /var/log/nginx/yourdomain.log;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://app_yourdomain/;
proxy_redirect off;
}
}
As soon as I change the location to /subfolder, however, my get,post,put,delete requests return 404 responses. The index.html configured in the node application is returned though. Configuration below:
upstream app_yourdomain {
server 127.0.0.1:8081;
}
server {
listen 0.0.0.0:80;
server_name yourdomain.com yourdomain;
access_log /var/log/nginx/yourdomain.log;
location /subfolder {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://app_yourdomain/;
proxy_redirect off;
}
}
In my angular factory, I have my requests structured like return $http.get('/subfolder'); or return $http.post('/subfolder', {data: data});.
And, within my node application, I have the routes defined like app.get('/subfolder', somefunction); or app.post('/subfolder', somefunction);
Again, when I have the application running from the root of the domain, it works fine. When I have it configured to be in a subfolder of the domain, however, the requests no longer work.
My end goal would be to have multiple node applications running from sub-folders of a main domain. I've been fighting with this for a while, and found several articles for hosting mutliple node apps on a single server, but they seem geared toward having separate domains. I'd like (if possible) for these to run as separate apps for the same domain.
Any thoughts/tricks/pointers? Thanks!
Modify Your Nginx File to look like this:
upstream node{
server 127.0.0.1:3000;
}
listen 0.0.0.0:80;
server_name yourdomain.com yourdomain;
access_log /var/log/nginx/yourdomain.log;
location /node {
rewrite /node(.*) $1 break;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://node;
proxy_redirect http://node/ /node;
}
I got the above from here: http://skovalyov.blogspot.com/2012/07/deploy-multiple-node-applications-on.html and it works for me

Handling CORs inside of node behind nginx

At the moment I'm handling CORs within node.js which seems to be working pretty well; I can setup multiple domains and hit my node.js code just fine.
The trouble is once I put node.js inside of forever and run a proxy from nginx to my application it no longer handles any CORs requests. In fact they never even make it to the server and I'm having trouble figuring out why. Below is my nginx configuration; any suggestions? If it isn't obvious I'm trying to hit the services.org from the webapp.org. In this environment they're on the same box but in other environments and when consumed by third parties we need CORs working.
server {
listen 80;
server_name webapp.org;
location / {
proxy_pass http://localhost:3000/Site/;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
}
}
server {
listen 80;
server_name services.org;
location / {
proxy_pass http://localhost:3000;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
}
}
Try 127.0.0.1 instead of localhost in the nginx.conf
Try adding an upstream server like this:
upstream my_app {
server 127.0.0.1:3000;
}
server {
listen 0.0.0.0:80;
server_name webapp.org;
access_log /var/log/nginx/my_app.log;
# pass the request to the node.js server with the correct headers and much more can be added, see nginx config options
location / {
root /var/www/my_app/public;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_set_header X-NginX-Proxy true;
proxy_redirect off;
if (!-f $request_filename) {
proxy_pass http://my_app;
break;
}
}
}
You may need to enable CORS for the service via:
app.enableCors() in your bootstrap() function in main.ts

Resources