Docker环境下前后端无法通信的问题排查与解决方法

核心问题 #

你的配置存在两个关键问题导致前后端无法通信：

• 前端容器内的localhost:3000指向容器自身，而非后端服务容器
• Angular的proxy.config.json仅在开发环境（ng serve）生效，生产环境部署到Nginx后，需要用Nginx的反向代理规则实现请求转发

具体修改步骤 #

1. 添加前端Nginx反向代理配置 #

在前端项目根目录新建nginx.conf文件，写入以下内容：

server {
    listen 80;
    root /usr/share/nginx/html;
    index index.html;

    # 处理Angular单页应用路由刷新404问题
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理后端接口请求
    location /enviroment/ {
        proxy_pass http://backend:3000/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

2. 更新前端Dockerfile #

修改Dockerfile，将自定义的Nginx配置复制到容器中替换默认配置：

FROM node:16-alpine as frontend
WORKDIR /app
COPY . .
RUN npm install
# 注意：如果你的Angular生产构建脚本不是`frontend`，请改为`npm run build`
RUN npm run frontend

FROM nginx:alpine
# 复制自定义Nginx配置
COPY --from=frontend /app/nginx.conf /etc/nginx/conf.d/default.conf
COPY --from=frontend /app/dist/frontend /usr/share/nginx/html

3. 调整开发环境代理配置（可选） #

如果需要在本地Docker环境开发时使用代理，修改proxy.config.json的目标地址为后端服务名（Docker Compose内部可通过服务名访问）：

{
  "/enviroment/*":{
    "target": "http://backend:3000",
    "secure": false,
    "loglevel": "debug"
  }
}

4. 优化Docker Compose配置（可选） #

后端服务不需要映射端口到宿主机（除非你需要直接从外部访问后端接口），同时添加依赖确保后端先启动：

version: '2.0'
services:
  backend:
    build:
      context: './backend'
  frontend:
    build:
      context: './frontend'
    ports:
    - "4200:80"
    depends_on:
      - backend

验证方式 #

启动服务后，访问http://localhost:4200，触发前端对/enviroment/*路径的请求，检查是否能正常获取后端响应。

内容的提问来源于stack exchange，提问作者M. Mariscal