NGINX serving multiple angular applications - static files missing error

Question

Have more than 1 angular application served by single nginx reverse proxy. Here is my config I tried.

worker_processes 1;

error_log <%= ENV["APP_ROOT"] %>/nginx/logs/error.log;
events { worker_connections 1024; }

http {

    client_max_body_size 3G;
    
    
    log_format upstream_time '$remote_addr - $remote_user [$time_local] '
                             '"$request" $status $body_bytes_sent '
                             '"$http_referer" "$http_user_agent" '
                             'rt="$request_time" uct="$upstream_connect_time" uht="$upstream_header_time" urt="$upstream_response_time" ua="$upstream_addr" ';
                             
    access_log <%= ENV["APP_ROOT"] %>/nginx/logs/access.log upstream_time;  
        
    server {
        listen       <%= ENV["PORT"] %>;
        server_name  localhost;
        root <%= ENV["APP_ROOT"] %>/public;
        
        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_http_version 1.1;
        
        #springboot microservices
        location /monitoringserv/details/ {
            <% if ENV["FORCE_HTTPS"] %>
                if ($http_x_forwarded_proto != "https") {
                return 301 https://$host$request_uri;
                }
            <% end %>           
            proxy_pass https://monitoring-c-serv.apps-dev.net;
            }
        
        location /dashboardserv/queue/ {
            <% if ENV["FORCE_HTTPS"] %>
                if ($http_x_forwarded_proto != "https") {
                return 301 https://$host$request_uri;
                }
            <% end %>           
            proxy_pass https://dashboard-c-serv.apps-dev.net;
            }
                
        #default UI landing page
        location ~ .(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {                                    
            proxy_pass https://dashboard.apps-dev.net;
        }
                                
        location ~ ^/admin/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {
                try_files $request_uri $request_uri/ =404;  
        }

        location ~ ^/monitoring/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {    
                try_files $request_uri $request_uri/ =404;  
        }
                        
        #1-Default UI URL.
        location / {            
            proxy_pass https://dashboard.apps-dev.net;
        }
        
        location /admin/ {          
            proxy_pass https://admin.apps-dev.net;;
        }
        
        location /monitoring/ {         
            proxy_pass https://monitoring.apps-dev.net;;
        }
    }
}

Also build angular applications with

ng build --prod --base-href /admin/
ng build --prod --base-href /monitoring/

When I launch the application dashboard app opened fine and when I load admin or monitoring, I got error saying static files missing.

Answer 1

Problem with the regexes, try

location ~ ^/admin/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {
    try_files $request_uri $request_uri/ =404;  
}
location ~ ^/monitoring/.*\.(html|js|css|eot|svg|ttf|woff|woff2|png|gif|ico|jpg|jpeg)$ {    
    try_files $request_uri $request_uri/ =404;  
}

oh, and don't forget to restart nginx and clear browser cache.