☰

NGINX 服务于多个角度应用程序-静态文件丢失错误

tag-icon • tag-icon nginx reverse-proxy angular
NGINX 服务于多个角度应用程序-静态文件丢失错误

有多个 Angular 应用程序由单个 nginx 反向代理提供服务。这是我尝试的配置。

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

还可以使用以下方式构建角度应用程序

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

当我启动应用程序时，仪表板应用程序打开正常，当我加载管理或监控时，出现错误消息，提示静态文件丢失。

答案1

正则表达式有问题，请尝试

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

哦，别忘了重新启动 nginx 并清除浏览器缓存。

相关内容