如何在 Kubernetes 中路由 Angular？

Question

我有一个 angular 应用程序，我正试图将其部署到 Google 云中的 Kubernetes。我的问题是，每当我尝试导航到应用程序中不是根路径的路径时，例如 http://[ip]/demo，请求不会在应用程序中路由，而是在容器中路由：如果我有一个名为'demo' 在工作目录中，它会尝试 return 它的内容，所以主要是 returns 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]

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

Answer 1

你运行进入这个问题，因为 k8s 试图在你的入口调用路径 /demo，并且没有后端处理这个路径。这是因为 angular 历史路由。

它在开发中工作，因为开发 http 服务器知道这一点，因为：

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

（查看）

因此，您必须实现的是，将所有指向入口的 URL 重写为 /index.html。来自 nginx ingress 的重写目标与不同，因为如果您的重写目标是 '/'

，它将 /path/foo/bar 转换为 /foo/bar

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

但是，我会通过使用带有我所有自定义重写规则的 nginx 容器并将其反向代理到您的 angular 应用程序来解决这个问题并解决这个问题。换句话说，如果我在容器中部署 prod angular 应用程序，我无论如何都会使用 nginx。只需查看 this guide 即可正确设置 angular 的 nginx。

结果将是一个 docker 图像，其中包含带有 angular 和自定义规则的自定义 nginx。

如何在 Kubernetes 中路由 Angular？

How to route Angular in Kubernetes?

angular-routing

google-cloud-platform

kubernetes

angular