Configure Nginx for dockerized Angular application

Question

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?

Answer 1

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.

Answer 2

you need to set error_page 404 to default angular project folder

server {

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

    error_page 404 /;
....
}

Answer 3

是的，nginx 路由似乎不正确，应该是：

proxy_pass              http://webapp:9080;