使用Docker通过Nginx部署Angular应用，显示Nginx默认页面而非应用首页

核心排查点 #

• 构建产物是否正确覆盖Nginx目录
  确认Angular构建生成的dist/你的项目名下所有文件，是否完整复制到了Nginx容器的/usr/share/nginx/html目录。Dockerfile里必须有类似COPY dist/your-angular-app /usr/share/nginx/html的指令，别漏了dist下的项目子目录——Angular默认会把构建产物放在这个子目录里。

• 自定义Nginx配置是否生效
  Nginx容器默认加载/etc/nginx/nginx.conf或/etc/nginx/conf.d/default.conf，如果你的自定义配置没替换掉默认文件，Nginx根本不会用你的规则。Dockerfile里要加替换指令：

  # 替换主配置文件
  COPY nginx.conf /etc/nginx/nginx.conf
  # 或者替换conf.d下的默认配置
  COPY default.conf /etc/nginx/conf.d/default.conf
  

简化并修复你的Nginx配置 #

原配置存在规则冗余和冲突，用下面的精简版本就能完美适配Angular单页应用：

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        root /usr/share/nginx/html;
        index index.html;

        # 处理静态资源与SPA路由刷新
        location / {
            try_files $uri $uri/ /index.html;
        }

        # 静态资源缓存优化（可选）
        location ~* \.(js|css|png|jpg|svg)$ {
            expires 1y;
            add_header Cache-Control "public, immutable";
        }
    }
}

说明：

• 把mime.types全局引入，不用每个location重复配置
• 删掉重复的catch-all规则，根location的try_files已经能处理所有路由刷新场景
• 避免规则优先级冲突，让Nginx按预期匹配请求

验证操作 #

1. 进入容器检查部署文件：

   docker exec -it 你的容器名 ls -la /usr/share/nginx/html
   

   应该能看到Angular的index.html、main.js等文件，而不是Nginx默认的欢迎页文件。

2. 检查配置有效性并重启：

   docker exec -it 你的容器名 nginx -t
   # 若提示配置有效，重启Nginx
   docker exec -it 你的容器名 nginx -s reload
   

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