Angular应用部署在Docker+Nginx环境出现502错误求助

核心错误原因 #

你的配置存在两个关键问题：

1. Nginx配置错误：当前default.conf让Nginx反向代理到localhost:4200，但最终运行的Nginx容器内并没有启动Angular开发服务器（多阶段构建的build阶段仅用于编译静态文件，不会在最终容器中运行npm start），导致Nginx找不到后端服务返回502。
2. Dockerfile构建逻辑错误：build阶段使用CMD ["npm", "start"]不会在构建过程中执行，且缺少Angular生产环境编译命令，无法生成可被Nginx托管的静态文件。

修正后的配置文件 #

1. 修正Dockerfile #

FROM node:latest as build
WORKDIR /usr/local/app
# 先复制package文件，利用Docker缓存优化构建速度
COPY ./package*.json ./
RUN npm install
# 复制项目源码
COPY . .
# 编译Angular应用到dist/prueba目录（prueba为你的项目名称，需与实际一致）
RUN npm run build -- --output-path=dist/prueba

FROM nginx:latest
# 清空默认Nginx静态文件目录
RUN rm /usr/share/nginx/html/*
# 从build阶段复制编译好的静态文件
COPY --from=build /usr/local/app/dist/prueba /usr/share/nginx/html
# 替换默认Nginx配置
RUN rm /etc/nginx/conf.d/default.conf
COPY default.conf /etc/nginx/conf.d/
EXPOSE 80

2. 修正default.conf（改为静态文件托管+单页路由适配） #

server {
    listen 80;
    server_name localhost;

    # 指定静态文件根目录
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 处理Angular单页应用路由：所有请求转发到index.html，解决刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }
}

重新部署操作 #

1. 重新构建镜像：

docker build -t front .

2. 重新运行容器：

docker run -d -p 8080:80 front

此时访问localhost:8080即可正常加载Angular应用。

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