[Fixed] Angular + nginx redirection not happening

Issue

I am new to Angular and nginx. I have an Angular application running at http:/localhost:4200/abc which interacts with a rails application running in my local port 3001 – http://localhost:3001. I am trying to use nginx for redirecting the requests. I want to access the angular in a custom URL local-admin.com. So I created a nginx conf file

server {
    listen       80;
    server_name local-admin.com;

    #charset koi8-r;

    # access_log  ~/logs/host.access.log  main;

    location /users/sign_in{
        proxy_pass   "http://127.0.0.1:4200/abc/users/sign_in";
    }

    location /abc/api/ {
        proxy_pass  http://localhost:3001/api/;
        proxy_set_header Host $host;
    }
}

so when I hit http://local-admin.com/users/sign_in I am seeing This site can’t be reached error and my ngingx access.log and error.log is empty.

Also I tried to access the actual url http://localhost:4200/abc/users/sign_in, which calls an API

private endpoints = {
  checkLogin: '/api/v1/is_logged_in'
}; 

isLoggedIn(): Observable<boolean> {
  return this._http.get<{is_logged_in: boolean}>(this.endpoints.checkLogin)
    .pipe(map(response => response.is_logged_in));
}

the expectation is to redirect to http:localhost:3001/api/v1/is_logged_in but the redirection does not happen and the Network calls still show http://localhost:4200/abc/api/v1/is_logged_in.

Am I missing any step? why my nginx access.log and error.log is always empty?

Solution

Your local-admin.com need to have a DNS entry. If its your local machine, add the dns mappping in etc/hosts file else just use server_name as 127.0.0.1 and access using http://127.0.0.1

Your angular app should be hosted as static content (Assuming your angular build is in /opt/abc folder ), Following nginx config can be used

location /abc {
autoindex on;
root /opt;
}