Docker部署Angular SSR应用遭遇502错误求助

云原生阿岚

2026-7-23

问题排查与解决方案

你的核心问题出在多阶段构建的逻辑错误：第二阶段使用nginx镜像时，完全丢弃了第一阶段node环境的运行状态，npm run serve:ssr根本没在容器里执行，nginx尝试代理的127.0.0.1:4000端口没有任何服务监听，所以出现连接拒绝的502错误。

下面给两种可行的解决方案：

方案一：单容器直接运行SSR服务（无需nginx，适合不需要代理其他API的场景）

修改Dockerfile，去掉nginx阶段，直接基于node镜像构建并运行SSR服务：

FROM node:16-alpine
RUN mkdir -p /app
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
RUN npm run build:ssr
EXPOSE 4000
CMD ["npm", "run", "serve:ssr"]

构建并运行容器：

docker build -t angular-ssr .
docker run -p 4000:4000 angular-ssr

此时访问localhost:4000就能正常访问你的Angular SSR应用了。

方案二：用Docker Compose管理多容器（保留nginx代理API的需求）

如果需要nginx来代理你的API请求，推荐用Docker Compose同时运行SSR服务容器和nginx容器：

创建docker-compose.yml文件：

version: '3.8'
services:
  ssr-app:
    build:
      context: .
      target: build-step
    expose:
      - 4000
    command: npm run serve:ssr
  nginx:
    image: nginx:1.17.1-alpine
    ports:
      - 4000:80
    volumes:
      - ./nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - ssr-app

修改nginx配置，把代理地址改成容器服务名ssr-app（Docker Compose会自动解析服务名到对应容器IP）：

events {}
http {
  server {
    index index.php index.hh index.html index.htm;
    location / {
      proxy_pass http://ssr-app:4000/;
    }
    location /OrderMationApiDev/ {
      proxy_pass http://102.133.225.222/OrderMationApiDev/;
    }
  }
}