Score:0

NGINX serving multiple angular applications - static files missing error

bd flag
Pat

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.

us flag
Please add full nginx configuration as shown by `nginx -T`.
Pat avatar
bd flag
Pat
@TeroKilkanen added full config code.
us flag
This is not the output of `nginx -T`. nginx does not have `<% %>` tags in its configuration. Please provide the output of `nginx -T`.
Score:1
in flag

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.

Pat avatar
bd flag
Pat
@gerard-h-pille Thanks, tried above regex and the same issue - "Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec." Also i updated the complete code in question.
Gerard H. Pille avatar
in flag
To me that sounds different from "static file missing". I don't see anything in your config regarding mime types.
Pat avatar
bd flag
Pat
@gerard-h-pille, my bad, static file is gone after regex fix. But strict MIME type error is coming after i added baseHref in angular. Also i found that from browser console NGINX is expecting the resource file requests (such as JS files) on URLs configured like the baseHref values and it could not found. Also in sources tab of Browser Developer tools, i see only index.html (blank file) with no other files for apps "admin" or "monitoring". So I am missing some config in nginx?
Gerard H. Pille avatar
in flag
Nginx never "expects" requests. If the browser doesn't make requests, there's a problem with the browser or - more likely - your html. With an empty index.html, the browser has no reason to make further requests. Please address Tero's remarks first: what is that config you added?
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.