Angular SPA can't refresh or direct navigate on nginx - nginx

I have an Angular SPA that I am trying to serve on a private network via IP.
I have this configuration in nginx
server {
listen 80 default_server;
root /var/www/report;
try_files $uri $uri/ index.html?$args
server_name _;
location /reportapi {
rewrite /reportapi/(.*) /$1 break;
proxy_pass http://127.0.0.1:5000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
When I navigate to the root URL say 192.168.10.10 the SPA is served correctly and navigation within it is fine. If I refresh a page or try to navigate directly to a specific URL say 192.168.10.10/scantests i get a 500 error.
The error log says
[error] 67305#67305: *2060 rewrite or internal redirection cycle while internally redirecting to "_", client: 192.168.10.77, server: , request: "GET /scantests HTTP/1.1", host: "192.168.10.10"
If I change the server_name to the IP address it has the same error but the IP address in the quotes not _. How do I setup the redirect to work correctly?

Related

Two locations not working in nginx for MERN application

I have nginx configuration like this:
server {
listen 80 default_server;
listen[::]:80 default_server;
server_name _;
root /var/www/html/ericwu-trademarket/frontend/build;
location /backend/ {
proxy_pass http://localhost:8000; #backend in node js
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 / {
try_files $uri /index.html; #front end in react js
}
}
the front end is running properly. But by running backend like this http://server-ip-address/backend it is showing cannot get /backend/.
Where might I be mistaken?
Check UFW port Allow in server
Check status of UFW:
sudo ufw status verbose
If not show 8000/tcp as a Allow then allow it:
sudo ufw allow 8000
Obviously you are trying to use Websokets.
When it comes to best practices, is better to have the backend services defined inside an upstream definition. You are trying to proxy requests to "localhost:8000" but localhost translates to ip 127.0.0.1. If that is not the ip address of the nodejs app, then is pretty normal that your config won't work.
Nginx expects a fully qualified domain name (FQDN), or ip addresses list of backend servers to work properly.
That being said, your config should be:
http {
upstream backend_server {
#least_conn; #Loadbalancing method in case you want to use multiple backends
#ip_hash;
server backend1.example.com:8000; #or IP address
}
server {
server_name _;
listen 80 default_server;
listen[::]:80 default_server;
root /var/www/html/ericwu-trademarket/frontend/build;
location / {
try_files $uri /index.html;
}
location /backend {
proxy_pass http://backend_server;
proxy_redirect off;
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 $scheme;
# WebSocket specific
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
# For long running HTTP requests, don't buffer up the
# response from origin servers but send them directly to the client.
proxy_buffering off;
}
}
}

Can't get nginx reverse proxy to load css/images of web application

I've configured a reverse proxy, and while the http loads, the css/images of the login page don't load. It is trying to load them from the localhost and not the upstream server
I've tried multiple proxy_redirects and rewrites (although I'm fairly new at this) and can't seem to get it working.
server {
listen 80;
location /test {
proxy_pass https://10.10.10.10/platform/login;
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_redirect https://10.10.10.10/ /;
}
}
Log error:
[error] 26072#0: *127 open() "/usr/share/nginx/html/platform/images/leaves.png" failed (2: No such file or directory), client: 127.0.0.1, server: , request: "GET /platform/images/leaves.png HTTP/1.1", host: "localhost", referrer: "http://localhost/test"
When I inspect element on chrome it returns 404's for all css/images as well.
Please Help
Your website's HTML is trying to access a url that is not /test/** but /platform/images/leaves.png this means that NGINX won't try to use the reverse proxy.
This part of your NGINX configuration is not getting used at all for anything but /test/**, and NGINX is searching on the local disk of the webserver for the files, which do not exist.
try using a config which captures all scopes instead of just /test.
server {
listen 80;
location /platform {
proxy_pass https://10.10.10.10/platform/;
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_redirect https://10.10.10.10/ /;
}
}
your website should be visible from http://{NGINX server}/platform/login
this will change your end-point's url so you could add an exception for /test to make http://{NGINX server}/test work aswell.
server {
listen 80;
location /platform {
proxy_pass https://10.10.10.10/platform/;
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_redirect https://10.10.10.10/ /;
}
location /test {
proxy_pass https://10.10.10.10/platform/login;
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_redirect https://10.10.10.10/ /;
}
}
You could also edit your HTML page and proxy_pass /test/** to https://10.10.10.10/platform/
your problem is further explained in Nginx defaults to /usr/share/nginx/html

Nginx directs request to www.example.com but not to internal web application

I've installed several web applications on different ports on the same server. From that server when I send an http request using wget or curl the request goes through and I get the response. I've set up nginx server to not have to specify the port each time. Here's the related nginx config:
server {
listen 10.0.223.34:80;
server_name app1.domain.com;
access_log /var/log/nginx/app1.domain.com.access.log;
error_log /var/log/nginx/app1.domain.com.error.log;
location / {
proxy_pass http://10.0.223.34:8080;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
If I try app1.domain.com from outside I get 502 Bad gateway error. But if I change the proxy_pass to http:\\www.example.com, then nginx takes me to the example.com website.
Inside the nginx.conf file I've specified user nginx;. I've tried changing it to root but it didn't help either. Do you have any idea what else I need to check?
Try this:
upstream app1 {
server localhost:8080;
}
server {
listen 10.0.223.34:
server_name app1.domain.com;
access_log /var/log/nginx/app1.domain.com.access.log;
error_log /var/log/nginx/app1.domain.com.error.log;
location / {
proxy_pass http://app1;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}

Nginx giving 403 forbidden on static

I have been hitting my head for two days trying to get Nginx to work using a reverse proxy. I am using a Bokeh server that listens for connections on 192.168.X.X from www.somesite.com:443.
Issue 1:
My Nginx conf file is below and I get a 403 Forbidden when accessing /static/ files. Here is how I call the Bokeh server: http://www.somesite.ai:443/5007/user_5007
Issue 2:
TBD after I can solve issue 1.
server {
listen 443;
server_name www.somesite.ai;
#The internal IP of the VM that hosts your Apache config
location /{
if ($request_uri ~ ^/(\d+)/([^/]+)) {
proxy_pass http://192.168.X.XXX:$1/$2/;
}
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_http_version 1.1;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host:$server_port;
proxy_buffering off;
}
location ~ ^/(\d+)/static/ {
try_files $uri /bokehstatic/static/;
}
}

Nginx subdirectory proxy, repeated subfolder name (error 404)

I am running nginx reverse-proxy on my server, intending to navigate the request www.example.com to localhost:8800/example so I wrote this in nginx.conf
server {
listen 80;
server_name www.example.com;
location / {
root /;
proxy_redirect off;
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_pass http://localhost:8880/example/;
}
}
When I try to access http://www.example.com/index.php, the proxy works fine. However, when the request address comes with subfolders, say http://www.example.com/wp-admin/, my server response with 404 error and I can see from my IIS the request address is changed to http://localhost:8880/example/example/wp-admin/.
Any help please?

Resources