Docker部署Django+Angular应用时UI无法解析API内部服务名问题求助

这是前后端分离项目容器化的典型误区：Angular 作为前端框架，代码最终是在用户的本地浏览器中运行，你在 environment.ts 中配置的 serviceUrl 是给浏览器发起请求用的，而非在 ui 容器内部调用接口。
Docker Compose 提供的服务名解析能力，仅适用于同一网络下的容器之间通信，用户的浏览器并不在 Docker 内网环境中，自然无法解析 api 这个内部域名，因此抛出 ERR_NAME_NOT_RESOLVED 错误。你填写宿主机IP可正常运行，是因为浏览器可直接访问宿主机IP，且你已将 api 服务的 8010 端口映射到宿主机对应端口，请求链路是通的。

方案1：直接配置可访问地址（适合本地开发） #

直接将 environment.ts 中的 serviceUrl 替换为宿主机IP+端口，本地开发也可直接写 http://localhost:8010/，简单直接，不需要额外修改配置。

方案2：配置Nginx反向代理（推荐，生产/开发通用） #

在 ui 服务中添加Nginx反向代理规则，将前端接口请求统一转发到内部 api 服务，前端可直接使用相对路径作为接口前缀，无需绑定固定IP：

1. 修改 environment.ts 中 serviceUrl 为 /api/
2. 在UI的Nginx配置文件中添加转发规则：

location /api/ {
    proxy_pass http://api:8010/;
    proxy_set_header Host $host;
}

该转发请求由运行在 ui 容器内的Nginx发起，属于Docker内网通信，可直接通过服务名 api 访问后端服务，也无需将后端接口直接暴露到公网，安全性更高。

方案3：本地hosts绑定（仅临时调试用） #

如果需要临时用 api 域名访问，可在本地电脑的hosts文件中添加记录：

127.0.0.1 api

该方案仅适配本地调试场景，其他用户访问时仍然会出现解析失败问题。

你当前的 docker-compose.yml 中，ui 服务的 depends_on 配置的是 db，实际上UI服务不需要直接连接数据库，可改为 depends_on: [api]，更符合依赖逻辑。

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