0

I'm using a dockerized angular application and trying to serve it through a root Nginx docker. The angular docker is served via an Nginx container. Here is the Nginx conf for the angular application.

user                            root;
worker_processes                auto;

error_log                       /var/log/nginx/error.log warn;

events {
    worker_connections          1024;
}

http {
    include                     /etc/nginx/mime.types;
    default_type                application/octet-stream;
    sendfile                    off;
    access_log                  off;
    keepalive_timeout           3000;
    server {
        listen                  9080;
        root                    /usr/share/nginx/html;
        index                   index.html;
        server_name             localhost;
        client_max_body_size    16m;
    }
}

Following is my root nginx conf.

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log info;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  text/html;

    server {
        listen              80 default_server;
        listen              [::]:80 default_server;

        location / {
            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-Proto $scheme;

            proxy_pass_header       Authorization;

            add_header Pragma       "no-cache";

            proxy_pass              http://webapp:9080/;
            proxy_read_timeout      90;
        }

        // other routes
        location /identityserver {}
    }
}

With these configurations, I can access my angular app via http://ip:9080. But when I try to access it via the main Nginx it only loads the index page (http://ip). Other routes are showing me a 404. For example, http://ip/login provides 404 but the login can be accessed straight via http://ip:9080/login.

Am I missing any configurations in the root Nginx?

1
  • kindly accept the correct answer so this will help others.
    – anand
    Feb 12, 2020 at 13:13

3 Answers 3

2

The Nginx configuration for your Angular should somehow look like this:

server {
  ...
  location / {
    root /usr/share/nginx/html;
    try_files $uri $uri/ /index.html;
  }
  error_page 404 /index.html;
}

There are 2 things here:

  • Use try_files instead of index
  • For 404, redirect to the index.html page so that Angular can handle the routing.
2
  • that worked for me, but I thought the routing was already handled by Angular with the /index.html parameter in the try_files... so I don't understand why it should be like this Feb 3, 2021 at 8:51
  • I'm not an Nginx expert, but AFAIK, what you said is only true if the URL matches the location /. If it doesn't, e.g. /product/1, then Nginx does not route the request to index.html but to its 404 page. That's why we have to catch that case and tell Nginx to route to our index.html.
    – Triet Doan
    Feb 3, 2021 at 13:11
1

you need to set error_page 404 to default angular project folder

server {

    listen 80;
    root /etc/nginx/www/dist;

    error_page 404 /;
....
}
1

yes, nginx routing seems not correct, should be:

proxy_pass              http://webapp:9080;  
2
  • Thank you for the answer, the problem still exists and I think it should be dealt with try_files param. Basically, after I land to ip and click the button to login it honors the angular based routing and goes to http:// ip /login. But if I take a new tab and paste http:// _ip _ /login it will provide a 404. Feb 12, 2020 at 13:27
  • I think this is reasonable,try by making another route for /login
    – anand
    Feb 12, 2020 at 13:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.