如何在 Kubernetes 中路由 Angular？

Posted 2023-03-13

【中文标题】如何在 Kubernetes 中路由 Angular？

【英文标题】：How to route Angular in Kubernetes?

【发布时间】：2018-12-19 11:53:01

【问题描述】：

我有一个 Angular 应用程序正在尝试部署到 Google Cloud 中的 Kubernetes。我的问题是，每当我尝试导航到应用程序中不是根路径的路径时，例如http://[ip]/demo，请求不会在应用程序中路由，而是在容器中：如果我有一个名为“演示”的目录' 在工作目录中，它会尝试返回其内容，所以大多数情况下它会返回 404。

我已从虚拟机成功地为应用程序提供服务。我的网络配置如下：

service.yaml

apiVersion: v1
kind: Service
metadata:
  creationTimestamp: 2018-07-10T12:00:52Z
  labels:
    app: app
  name: app
  namespace: default
  resourceVersion: "5759129"
  selfLink: /api/v1/namespaces/default/services/app-service
  uid: [redacted]
spec:
  clusterIP: [redacted]
  externalTrafficPolicy: Cluster
  ports:
  - nodePort: 30909
    port: 80
    protocol: TCP
    targetPort: 80
  selector:
    app: app
  sessionAffinity: None
  type: NodePort
status:
  loadBalancer: 

ingress.yaml

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    ingress.kubernetes.io/backends: '"k8s-be-30909--102c03247288a32a":"HEALTHY"'
    ingress.kubernetes.io/forwarding-rule: k8s-fw-default-app-ingress--102c03df7288a32a
    ingress.kubernetes.io/target-proxy: k8s-tp-default-app-ingress--102c09bf7288a32a
    ingress.kubernetes.io/url-map: k8s-um-default-app-ingress--102c9df4a288a32a
    kubectl.kubernetes.io/last-applied-configuration: |
      "apiVersion":"extensions/v1beta1","kind":"Ingress","metadata":"annotations":,"name":"app-ingress","namespace":"default","spec":"backend":"serviceName":"app-service","servicePort":80
  creationTimestamp: 2018-07-10T12:10:08Z
  generation: 1
  name: app-ingress
  namespace: default
  resourceVersion: "5762158"
  selfLink: /apis/extensions/v1beta1/namespaces/default/ingresses/app-ingress
  uid: [redacted]
spec:
  backend:
    serviceName: app-service
    servicePort: 80
status:
  loadBalancer:
    ingress:
    - ip: [redacted]

有谁知道如何解决这个问题？

【参考方案1】：

你遇到了这个问题，因为 k8s 试图在你的入口调用路径 /demo，并且没有后端处理这个路径。这是因为角度历史路由。

它在 dev 中有效，因为 dev http 服务器知道这一点，因为：

rewrites": [ 
  "source": "**",
  "destination": "/index.html"
 ]

（查看this answer）

因此，您必须实现的是，所有指向入口的 URL 都被重写为 /index.html。来自 nginx 入口的重写目标不相同，因为如果您的重写目标是 '/'，它会将 /path/foo/bar 转换为 /foo/bar

那么，有哪些选择？您可以深入研究入口配置。看起来您正在使用 GKE 入口，您可以使用不同的入口，但仔细查看并没有显示任何特定配置。

但是，我会为这个问题取出撬棒并破解它，方法是使用带有我所有自定义重写规则的 nginx 容器并将其反向代理到您的 Angular 应用程序。换句话说，如果我在容器中部署一个 prod angular 应用程序，我无论如何都会使用 nginx。只需查看this guide 以正确设置 nginx 的角度。

结果将是一个 docker 映像，其中包含一个自定义 nginx，其中包含角度和自定义规则。

【讨论】：

非常感谢！我有同样的问题，你回答了。