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