Docker部署Angular应用至Nginx时出现502 Bad Gateway错误求助

问题根源梳理 #

你当前的配置存在几个核心问题：

• 同时编写了docker-compose.yml但实际用docker run单独启动Angular容器，Nginx容器并未运行，端口映射逻辑混乱
• 生产环境部署Angular应该优先构建静态文件让Nginx直接托管，而非用开发服务器（npm start）做代理（开发模式可选）
• Angular开发服务器默认仅绑定127.0.0.1，容器外部无法直接访问

方案一：生产环境静态部署（推荐） #

这种方式直接构建Angular静态文件，由Nginx托管，性能最优，适合线上环境。

1. 修改Dockerfile #

# 第一阶段：构建Angular静态文件
FROM node:latest as build

WORKDIR /usr/local/app

COPY package.json package-lock.json ./
RUN npm install

COPY . .
# 构建生产环境静态文件，输出到dist目录
RUN npm run build --prod

# 第二阶段：用Nginx托管静态文件
FROM nginx:alpine

# 替换成你实际的Angular项目名（dist目录下的子文件夹）
COPY --from=build /usr/local/app/dist/your-angular-project-name /usr/share/nginx/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

2. 构建并运行容器 #

# 构建镜像
docker build -t front .

# 启动容器，映射本地8080到容器80端口
docker run -d -p 8080:80 front

现在访问localhost:8080即可正常访问Angular应用。

方案二：开发环境代理模式 #

如果仅用于开发测试，需要让Nginx代理Angular开发服务器，步骤如下：

1. 修改Dockerfile，允许外部访问开发服务器 #

FROM node:latest as build

WORKDIR /usr/local/app

COPY package.json .
RUN npm install

COPY . .

# 添加--host 0.0.0.0，允许容器外部访问开发服务器
CMD ["npm", "start", "--", "--host", "0.0.0.0"]

2. 修正Nginx配置（default.conf） #

server {
    listen 80;
    server_name localhost;
    location / {
        proxy_pass http://app:4200;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

3. 用docker-compose启动所有服务 #

# 启动Angular和Nginx容器
docker-compose up -d

如果要映射到8080端口，修改docker-compose.yml中Nginx的ports配置：

nginx:
    # ...其他配置
    ports:
      - "8080:80"

访问localhost:8080即可。

额外排查步骤 #

• 检查容器状态：docker ps 或 docker-compose ps，确保所有容器处于Up状态
• 查看Angular容器日志：docker logs app 或 docker-compose logs app，确认服务启动成功
• 查看Nginx容器日志：docker logs nginx 或 docker-compose logs nginx，捕获具体错误信息

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