Angular docker 无法访问后端服务容器答案

【问题标题】：Angular docker cannot reach backend service containerAngular docker 无法访问后端服务容器
【发布时间】：2020-09-19 00:44:15
【问题描述】：

我有一个 Angular SPA 和一个后端服务，两者都是通过 docker 容器部署的。我似乎无法让 Angular 应用程序连接到后端服务。

在angular容器中使用Nginx，配置如下

server {

  root /usr/share/nginx/html/;

  location / {
    try_files $uri $uri/ /index.html =404;
  }

  location http://backend-service {
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_pass http://backend-service:8080/;
  }
}

还有 Angular 应用的环境文件

export const environment = {
  api: 'http://backend-service',
};

容器已链接，我可以从 Nginx/angular 容器中通过其服务名称 ping 后端容器，我认为我在 nginx 配置文件中有问题...

有什么见解吗？

【问题讨论】：

NGINX 是否成功返回错误响应？例如像 503 ......只是为了验证 NGINX 正在运行并且不是问题
在应该在后端服务上解析的任何端点上命中 404
答案很好

标签： angular docker nginx

【解决方案1】：

最后的诀窍是从环境文件中删除 docker 引用

export const environment = {
  api: '/api',
};

然后调整default.conf文件匹配：

server {
  listen 80;
  server_name terrible-spa;
  root /usr/share/nginx/html/;
  index index.html index.html;

  location /api {
    proxy_pass http://backend-service:8080/api;
  }

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

这将正确地将所有调用 /api 转发到后端服务容器。

【讨论】：