Angular 带有 App Gateway 的 AKS 中的应用在子路径上失败

Question

我有一个 AKS 集群，前面配置了 Azure 应用程序网关。在 kubernetes 中有一个容器运行 nginx，它托管我的 Angular 9 应用程序。

网关配置如下。

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: ingress
  annotations:
    kubernetes.io/ingress.class: azure/application-gateway
    appgw.ingress.kubernetes.io/use-private-ip: "true"
spec:
  rules:
  - host: client.myhost.com
    http:
      paths:
      - pathType: Prefix
        path: /
        backend:
          serviceName: client
          servicePort: http

当我直接导航到 http://client.myhost.com everything is working fine. Angular app will rewrite url to http://client.myhost.com/home. But if I go to http://client.myhost.com/home 时，我将从 Azure 应用程序网关收到 502（错误网关）。我在 Angular 中配置了很多嵌套路由，所以我需要它来工作。

Angular 应用程序以前托管在 IIS 上，在这里我必须向 Web.config 添加一些配置才能使其正常工作。我需要在 NGINX 中做类似的事情吗？

<base href="/" /> 添加到 index.html。

Answer 1

这是我解决问题的方法：

ConfigMap

apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-cm
data:
  default.conf: |
    server {
      server_name   devicekit;

      root          /usr/share/nginx/html ;

      add_header    X-Content-Type-Options "nosniff";

      location / {
        try_files $uri $uri/ /index.html?$args;
      }
    }

部署

apiVersion: apps/v1
kind: Deployment
metadata:
  name: serviceA
  labels:
    app: serviceA
    release: serviceA
spec:
  revisionHistoryLimit: 0
  replicas: 1
  selector:
    matchLabels:
      app: serviceA
      release: serviceA
  template:
    metadata:
      labels:
        app: serviceA
        release: serviceA
    spec:
      containers:
        - name: serviceA
          image: "serviceA:latest"
          imagePullPolicy: IfNotPresent
          ports:
            - name: http
              containerPort: 80
              protocol: TCP
          volumeMounts:
          - name: config-volume
            readOnly: true
            mountPath: /etc/nginx/conf.d
      volumes:
      - name: config-volume
        configMap:
          name: nginx-cm

Angular 带有 App Gateway 的 AKS 中的应用在子路径上失败

Angular app in AKS with App Gateway fails on subpaths

angular

azure-aks

azure-application-gateway