Azure多容器Web App（MEAN栈）前端访问Node后端的URL是什么

错误地址无效的原因 #

• 所有带:3000的公网地址无效：Azure Web App 多容器部署仅对外暴露 80（HTTP）和 443（HTTPS）端口，你在 compose 里映射的 3000 端口仅在容器内部网络可访问，公网无法直接请求。
• http://server:3000 无效：Angular 代码是运行在用户的浏览器端，而不是你的 app 容器内部，浏览器不在 Azure 容器的内部网络中，无法解析 server 这个服务名。

正确配置方案 #

你需要通过前端容器的 Nginx 做反向代理转发后端请求，这也是解决跨域问题的标准方案：

1. Angular 前端的 API 基础路径配置为 /api，实际请求会自动拼接你的站点域名，最终后端访问地址为 https://rojesh.azurewebsites.net/api
2. 修改 app 镜像内的 Nginx 配置，添加反向代理规则，将所有 /api 开头的请求转发到内部网络的后端服务：

   location /api/ {
       proxy_pass http://server:3000/;
       proxy_set_header Host $host;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
   

3. 重新构建 app 镜像推送到 ACR 后重启 Azure Web App 即可。

可选方案（不推荐） #

如果不想配置反向代理，也可以在 Azure Web App 配置中把 WEBSITES_PORT 环境变量设置为 3000，但是这样会导致前端服务无法访问，不适合多服务共存的场景，因此强烈建议使用反向代理方案。

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