使用Docker部署Angular Universal遇502 Bad Gateway问题求助

你的502 Bad Gateway错误核心原因很明确：当前容器内仅运行了Nginx，但没有启动Angular Universal的SSR服务，导致Nginx无法连接到localhost:4000（该端口无进程监听）。

问题拆解 #

1. 你的Dockerfile最终使用nginx:alpine作为基础镜像，这个镜像里没有Node.js环境，也没有执行启动SSR服务的命令——Angular Universal的SSR依赖Node.js运行server.js（或对应构建产物）来监听4000端口，而你当前的容器里完全没有启动这个服务。
2. 错误日志里的connect() failed (111: Connection refused)直接印证了这一点：Nginx尝试连接127.0.0.1:4000，但该端口没有任何进程在监听。

修复方案 #

你需要调整Dockerfile，确保最终容器同时具备Node.js环境（运行SSR服务）和Nginx（反向代理），并让两者同时启动。以下是具体实现：

1. 修改Dockerfile

使用多阶段构建，最终基于Node.js镜像并安装Nginx，同时添加启动脚本管理两个进程：

FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
RUN npm i && npm run build:ssr

# 最终镜像：基于Node.js，安装Nginx
FROM node:14-alpine
WORKDIR /app

# 安装Nginx
RUN apk add --no-cache nginx
RUN mkdir -p /run/nginx  # 创建Nginx运行所需目录

# 复制构建产物
COPY --from=builder /app/dist/front-end-kevi .
# 复制Nginx配置
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 添加启动脚本
COPY start.sh /app/start.sh
RUN chmod +x /app/start.sh

ENTRYPOINT ["/app/start.sh"]

2. 编写启动脚本start.sh

这个脚本负责先启动SSR服务，再启动Nginx：

#!/bin/sh

# 启动Angular Universal SSR服务（路径根据你的构建产物调整，确保指向正确的server入口文件）
node dist/front-end-kevi/server/main.js &

# 启动Nginx（保持前台运行）
nginx -g "daemon off;"

3. 调整Server.ts监听地址

确保SSR服务监听0.0.0.0而非仅localhost，这样同一容器内的Nginx可以正常访问：

// server.ts中的监听代码
app.listen(4000, '0.0.0.0', () => {
  console.log(`SSR Server running on http://0.0.0.0:4000`);
});

4. 验证Nginx配置

你的Nginx配置中proxy_pass http://localhost:4000是正确的，因为SSR服务和Nginx在同一容器内，localhost指向容器自身。

5. 重新构建并运行

docker build -t kevin .
docker run -d -p 4000:80 kevin

额外检查点 #

• 确认构建产物路径/app/dist/front-end-kevi下存在server目录及对应的入口文件（比如main.js），如果路径不符，需要调整Dockerfile中的COPY指令。
• 启动容器后，可以通过docker exec -it <容器ID> ps aux查看进程，确认Node和Nginx都在运行。

内容的提问来源于stack exchange，提问作者M Safdar Ali Khan