Docker-compose下Angular容器访问Asp.Net容器配置问题咨询

问题根因 #

你配置的BASE_URL: "http://web_api:5000"不生效，核心原因是Angular属于前端静态应用，代码最终会下载到用户本地的浏览器中运行，而浏览器并不在Docker Compose的内部网络环境里，既无法解析web_api这个服务域名，也访问不到未对外暴露的5000端口。

解决方案（完全符合隐藏内部端口的要求） #

推荐通过前端容器内置的反向代理实现请求转发，不需要对外暴露sqlserver和web_api的端口，操作步骤如下：

1. 修改Angular项目内的接口请求规则，将所有后端API请求的前缀改为相对路径/api，无需拼接完整域名，例如原来的http://xxx:5000/user改为/api/user。
2. 给web_app容器使用的Nginx服务（Angular生产打包后一般通过Nginx托管）添加反向代理规则，在Nginx配置文件中新增如下配置：

location /api {
    # 去掉请求前缀的/api再转发到后端
    rewrite ^/api/(.*)$ /$1 break;
    # Nginx运行在Docker内部网络，可以直接访问web_api服务
    proxy_pass http://web_api:5000;
    proxy_set_header Host $host;
}

3. 修改web_app的Dockerfile，将自定义的Nginx配置文件替换镜像默认的配置即可，原有docker-compose.yaml无需调整其他配置。

该方案下：

• 浏览器只需要访问前端的4200端口，所有请求都发给前端域名，不会出现跨域问题
• 只有web_app的4200端口对外暴露，sqlserver和web_api的端口完全对内隐藏，符合你的需求

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