Angular应用Nginx配置（含浏览器缓存）及Docker部署页面无法加载排查

看起来你遇到的问题主要出在Nginx配置的细节上，我帮你梳理下问题点并给出修正后的方案：

问题根源分析 #

你的原Nginx配置有两个关键问题导致页面加载失败：

1. 处理静态资源的location块没有指定root路径，Nginx找不到对应的JS/CSS/图片文件，直接导致这些资源加载失败，页面无法正常渲染。
2. try_files里的=404不符合Angular的HTML5路由需求，所有不存在的路径应该直接 fallback到index.html，而不是返回404，否则会导致路由页面加载异常。

另外，原配置没有对index.html做缓存控制，这会导致用户在应用版本更新后可能仍然看到旧页面。

修正后的Nginx配置（nginx-custom.conf） #

server {
    listen 80;
    # 全局指定root，避免每个location重复设置
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理Angular HTML5路由：所有路径优先匹配文件，匹配不到就返回index.html
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 优化静态资源缓存：Angular构建后的JS/CSS/图片都带内容哈希，可永久缓存
    location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
        expires 365d;
        # 添加immutable标记，告诉浏览器资源不会变化，无需再发验证请求
        add_header Cache-Control "public, immutable";
    }

    # 强制index.html不缓存：确保版本更新后用户能获取最新的入口文件
    location = /index.html {
        expires -1;
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
    }
}

优化后的Dockerfile #

# 用alpine版本的Nginx镜像，体积更小、更安全
FROM nginx:1.13-alpine
# 复制Angular构建产物到Nginx默认静态目录
COPY dist/ /usr/share/nginx/html/
# 替换Nginx默认配置文件
COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

部署步骤提醒 #

1. 先确保Angular应用正确构建：运行ng build --configuration production（旧版本用ng build --prod），生成的dist文件夹是最终部署产物。
2. 构建Docker镜像：docker build -t your-angular-app .
3. 启动容器：docker run -d -p 8080:80 your-angular-app

这样配置后，不仅能解决页面加载失败的问题，还能最大化利用浏览器缓存：静态资源缓存一年（因为哈希值变化才会更新），入口文件index.html永远不缓存，完美适配Angular的部署特性。

内容的提问来源于stack exchange，提问作者inyee