在 Nginx Ingress AKS 上设置 Angular 应用程序答案

【问题标题】：Setup Angular application on Nginx Ingress AKS在 Nginx Ingress AKS 上设置 Angular 应用程序
【发布时间】：2020-07-07 13:56:22
【问题描述】：

我在 Azure Kubernetes 中部署了一个 Angular SPA 应用程序。我试图通过 Ingress Nginx 控制器访问应用程序。 Ingress 指向 xxx.xxx.com，应用部署在路径“/”中。因此，当我访问该应用程序时，该应用程序正在正常加载。但是，当我尝试通过直接在浏览器中输入 index.html 以外的任何其他页面（例如：eee.com/homepage）导航到任何其他页面时，我得到 404 Not Found。

以下是dockerfile内容

# base image
FROM nginx:1.16.0-alpine
# copy artifact build from the 'build environment'
COPY ./app/ /usr/share/nginx/html/
RUN rm -f /etc/nginx/conf.d/nginx.config
COPY ./nginx.config /etc/nginx/conf.d/nginx.config
# expose port 80
EXPOSE 80
# run nginx
CMD ["nginx", "-g", "daemon off;"]

Ingress.yaml

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: app-frontend-ingress
  namespace: app
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"
    nginx.ingress.kubernetes.io/add-base-url: "true"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  tls:
  - hosts:
    - xxx.com
    secretName: tls-dev-app-ingress
  rules:
  - host: xxx.com
    http:
      paths:
      - backend:
          serviceName: poc-service
          servicePort: 80
        path: /

nginx.conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

【问题讨论】：

标签： angular nginx kubernetes kubernetes-ingress

【解决方案1】：

您可以添加一个配置-sn-p，它将负责将任何路径重写为/：

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: app-frontend-ingress
  namespace: app
  annotations:
    kubernetes.io/ingress.class: nginx
    nginx.ingress.kubernetes.io/use-regex: "true"    
    nginx.ingress.kubernetes.io/configuration-snippet: |
      rewrite /([^.]+)$ / break;
      [...]

例如，如果您转到host.com/xyz，它将被重定向到host.com

【讨论】：