Nginx始终显示默认欢迎页，Docker部署Angular应用无法访问如何解决

问题根因 #

你遇到的问题由3个配置错误共同导致：

• 前端Dockerfile未将Angular构建产物复制到Nginx静态文件目录，Nginx读取的仍然是镜像自带的默认欢迎页文件
• nginx.conf中多余的站点配置引入规则，可能匹配到默认虚拟主机配置，覆盖你定义的路由规则
• 未删除Nginx镜像自带的默认80端口监听配置，优先级高于你自定义的服务规则，会优先响应请求

修复方案 #

1. 修改前端Dockerfile

补充构建产物复制逻辑，同时删除Nginx默认配置：

FROM node:14 AS builder
WORKDIR /src/app
COPY package.json package-lock.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:1.17.1-alpine
# 删除镜像自带的默认配置
RUN rm -rf /etc/nginx/conf.d/default.conf
# 复制自定义Nginx配置
COPY nginx.conf /etc/nginx/nginx.conf
# 复制Angular构建产物到Nginx静态目录
# 注意：如果你的Angular项目angular.json中配置的outputPath不是dist/，请对应修改路径
COPY --from=builder /src/app/dist/ /usr/share/nginx/html/

2. 简化nginx.conf配置

删除多余的include规则，避免配置冲突：

events { }
http {
    server {
        listen 80;
        root /usr/share/nginx/html;
        index index.html index.htm;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

3. 清理旧缓存重新启动服务

避免旧镜像、容器缓存影响生效：

# 停止所有服务并删除本地构建的镜像
docker-compose down --rmi local
# 重新构建并启动服务
docker-compose up -d --build

验证方法 #

启动完成后访问localhost:80即可看到Angular应用，如果仍然异常，可以进入前端容器检查静态文件是否存在：
docker exec -it $(docker ps | grep front | awk '{print $1}') ls /usr/share/nginx/html
如果输出中包含index.html说明配置正确，否则检查Angular构建产物的路径是否匹配。

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