Docker部署Angular项目为何打开Nginx默认页而非Angular首页？

核心问题：Nginx配置的根路径错误 #

你的Nginx配置文件里root字段还是占位符/path/to/your/angular/app，但Dockerfile已经把Angular构建产物复制到了/usr/share/nginx/html，这直接导致Nginx找不到你的应用文件，只能加载默认欢迎页。

修复步骤： #

1. 修正Nginx配置的根路径
   打开你的nginx.conf，把root行替换为容器内的实际路径：

root /usr/share/nginx/html;  # 替换原有的/path/to/your/angular/app

2. 验证构建产物路径
   本地执行npm run build --prod后，检查dist/demo-docker目录是否存在，且里面包含index.html、main.js等应用文件。如果构建后的目录名不是demo-docker，需要同步修改Dockerfile中COPY --from=builder的路径。

3. 确认配置文件复制正确
   确保你的nginx.conf存放在项目根目录的nginx文件夹下，这样Dockerfile中的COPY nginx/nginx.conf /etc/nginx/nginx.conf才能正确复制配置到容器内。可以进入容器验证配置是否生效：

docker exec -it <容器ID> cat /etc/nginx/nginx.conf

4. 清理旧镜像缓存并重新构建
   旧的镜像缓存可能导致配置不更新，先清理再重新构建：

# 停止并删除旧容器
docker stop demo-docker-container
docker rm demo-docker-container

# 删除旧镜像
docker rmi demo-docker

# 重新构建并运行
docker build -t demo-docker .
docker run -d -p 80:80 --name demo-docker-container demo-docker

额外优化建议 #

• 把Nginx错误日志路径改为更具辨识度的名称，比如/var/log/nginx/demo-docker-error.log，方便后续排查问题。
• 检查angular.json中的outputPath配置，确保其值为dist/demo-docker，保证构建产物目录和Dockerfile中的路径一致。

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