Kubernetes 中的 Angular 应用程序出现 502 错误网关错误

如何解决Kubernetes 中的 Angular 应用程序出现 502 错误网关错误

版本和参考在下面注明。

我正在尝试将我的 Angular 客户端应用程序和我的 Node/Express API 从 Heroku 虚拟化服务器迁移到 DigitalOcean 的托管 Kubernetes (DOKS)。很大程度上遵循了 Ingress 教程（请参阅下面的参考资料），我已经成功：

使用 Docker 将 Angular 和 API 容器化，
在 DOKS 上设置 Kubernetes 集群和容器注册表，
设置 nginx-ingress，
设置 jetstack/cert-manager 和 Let's Encrypt，
配置我的域名注册和 DOKS DNS，
将 Angular 和 API 部署到 Pod，
从互联网连接到 API。

相关的 YAML 配置文件附在下面（请参阅下面的配置）。如果有帮助，我很乐意添加其他人。

我失败的地方是从 Internet 连接到 Angular。我在连接时收到 HTTP 502 错误网关。

为了确保我的 Angular 代码不会导致问题，我按照默认的 Angular 教程（参见参考资料）创建了一个默认的 Angular 应用程序。

我遵循了故障排除部署（参见参考资料）并确定了以下内容：

使用 kubectl port-forward，我能够在端口 4200 连接到 Angular 应用程序的 pod，
使用 kubectl port-forward，我能够在端口 80 连接到 Angular 应用程序的集群 IP 服务，
我无法通过 Ingress（502 错误网关）连接到 Angular 应用的服务，
使用 kubectl 的 ingress-Nginx 插件查看入口日志，我能够找到错误代码。

入口日志中的错误代码是：

2021/04/12 06:08:43 [error] 423#423: *1158356 connect() Failed (111: Connection refused) while connecting to upstream,client: XXX.XXX.XXX.XXX,server: pvg.example.com,request: "GET / HTTP/1.1",upstream: "http://XXX.XXX.XXX.XXX:4200/",host: "pvg.example.com"

这就是我被卡住的地方。如果您能从这个专家社区获得任何见解，我将不胜感激。

谢谢！

免责声明：上周我也在 DigitalOcean 的社区网站上问过这个问题，但没有任何回应（请参阅下面的参考资料）。得到答复后，我会将两者联系在一起。

配置

Angular 的服务和部署配置：

---
apiVersion: v1
kind: Service
Metadata:
  name: my-app-cip
spec:
  type: ClusterIP
  ports:
    - port: 80
      targetPort: 4200
  selector:
    app: my-app
---
apiVersion: apps/v1
kind: Deployment
Metadata:
  name: my-app
spec:
  replicas: 1
  selector:
    matchLabels:
      app: my-app
  template:
    Metadata:
      labels:
        app: my-app
    spec:
      containers:
      - name: Nginx
        image: registry.digitalocean.com/XXXXXXXX/my-app:0.1.0
        ports:
        - containerPort: 4200
          protocol: TCP

入口配置：

apiVersion: networking.k8s.io/v1
kind: Ingress
Metadata:
  name: hello-kubernetes-ingress
  annotations:
    kubernetes.io/ingress.class: Nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
spec:
  tls:
  - hosts:
    - api.example.com    # This is working
    - pvg.example.com    # This is NOT working
    secretName: hello-kubernetes-tls
  rules:
  - host: "api.example.com"  # This is working
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: my-api-cip
            port:
              number: 80
  - host: "pvg.example.com"  # This is NOT working
    http:
      paths:
      - pathType: Prefix
        path: "/"
        backend:
          service:
            name: my-app-cip
            port:
              number: 80

版本

node.js 10.19.0
npm 7.7.6
纱线 1.22.10
ng 11.2.2
docker 19.03.8
kubectl 1.20.1
doctl 1.57.0
kubernetes 1.20.2-do.0
掌舵 3.5.3
Nginx 控制器 0.45.0
jetstack 1.3.0

参考资料

入口教程

https://www.digitalocean.com/community/tutorials/how-to-set-up-an-nginx-ingress-with-cert-manager-on-digitalocean-kubernetes

默认 Angular 教程：

https://angular.io/guide/setup-local

排查部署问题

https://learnk8s.io/troubleshooting-deployments

在 DigitalOcean 社区网站上提出的问题：

https://www.digitalocean.com/community/questions/migrating-heroku-angular-app-to-do-kubernetes

编辑：修正降价错误；向 YAML 添加了注释以进行澄清；修复了 Ingress YAML 文件中的拼写错误。