如何在Docker Compose中让容器化Angular应用访问后端容器？

问题核心在于容器环境的网络寻址逻辑：开发时ng serve的代理将/api请求转发到本地localhost:3000，但容器内的localhost指向的是前端容器自身，而非后端容器。Docker Compose会为所有服务创建专属内部网络，服务名（此处为backend）可直接作为域名使用，只需通过Nginx配置反向代理即可实现前端容器向后端的请求转发。

步骤1：修改Nginx配置 #

更新nginx.conf，添加/api路径的反向代理规则，指向后端服务：

server {
    listen 80;
    server_name localhost;

    # 处理Angular单页应用路由的 fallback 逻辑
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 反向代理API请求到后端容器
    location /api {
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

步骤2：确认前端API请求路径 #

检查Angular代码，确保所有API请求使用相对路径（例如this.http.get('/api/users')），而非硬编码的http://localhost:3000/api/users。相对路径的请求会被Nginx拦截并转发至后端。

步骤3：重新部署容器 #

执行以下命令重新构建并启动服务：

docker-compose down
docker-compose up --build

原理说明 #

• Docker Compose默认创建的桥接网络中，服务名可直接作为内部域名解析，http://backend:3000会直接指向后端容器的3000端口。
• Nginx的反向代理规则既处理了API请求转发，又保留了Angular路由的fallback逻辑，确保单页应用的路由功能正常。

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