nginx loopback reverse proxy can't access custom paths - angularjs

Question

Im running this loopback app in my server and trying to access it through an nginx reverse proxy, but can't seem to get nginx configured correctly, I'm a total noob to nginx. Here's my config file /etc/nginx/sites-available/example.com
server {
listen 80;
server_name www.example.com;
server_name example.com;
server_name _;
root /apps/example/client;
location ~ ^/.well-known {
allow all;
}
location / {
return 301 https://example.com;
}
}
server {
server_name example.com;
server_name www.example.com;
#listen 80;
# SSL configuration
listen 443 ssl ;
ssl_certificate /etc/letsencrypt/live/www.example.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/www.example.com/privkey.pem;
root /apps/example/client;
# Check Alive
location ~ ^/.well-known {
allow all;
}
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_bind 127.0.0.1;
proxy_pass http://127.0.0.1:3000/;
}
location /api {
proxy_pass http://127.0.0.1:3000/api;
}
location /explorer {
proxy_pass http://127.0.0.1:3000/explorer;
}
}
and my loopback server serves static files like this:
app.use(loopback.static(path.resolve(__dirname, '../client')));
and at the end of my server.js file I serve the index.html file for any path not processed so angular processes that path in the front end
function startsWith(string, array) {
for(let i = 0; i < array.length; i++)
if(string.startsWith(array[i]))
return true;
return false;
}
let ignoredPaths = ['/css', '/fonts', '/img', '/js', '/lib', '/sfx', '/views', '/api'];
app.all('/*', function(req, res, next) {
//Redirecting to index only the requests that do not start with ignored paths
console.log("Requested url: ",req.url);
if(!startsWith(req.url, ignoredPaths)) {
res.sendFile('index.html', {root: path.resolve(__dirname, '../', 'client')});
} else {
next();
}
});
The issue is that I can only access http://www.example.com/ and it takes a lot to load and the url flashes many times like it's redirecting a lot of times, I redirect in front-end with angular to /home, I have the angular routing to use html5 to remove the /#!/ from the path, but I always get a Bad Gateway error if I try to access any other path, say http://www.example.com/admin/login and it's a nginx error, it's not reaching loopback so it can serve the index file. I've tried the try_files $uri $uri/ /index.html; but if I try to access any other custom path, say /auth/facebook it forces it to load it through index.html and that's a custom path I have setup on loopback to do special behaviour. I have no idea how to solve this, I just used that template config file, all I need is for it to redirect all requests from example.com to my app in localhost:3000 and do the same in the opposite direction.

Answer 1

So i kept trying, and tried again using the try_files with a #path (I guess that's kind of a label or something) and what I was missing when I tried it before was to attach $uri at the end of the proxy_pass
It ended up like this:
location / {
try_files $uri $uri/ #proxy;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_bind 127.0.0.1;
proxy_pass http://127.0.0.1:3000/;
}
location #proxy {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
proxy_set_header Host $http_host;
proxy_bind 127.0.0.1;
proxy_pass http://127.0.0.1:3000$uri;
}
And all works dandy now :P.