angular 到不同路径的 nginx 路由不起作用

Question

大家好，我的 angular 项目在 Kubernetes 集群中的路由有问题。我解释了我是如何进行的我希望我在 url 中的启动根目录不是 / 但 /login 一切都应该以 /login 开头，这是 Angular 应用程序，但是一旦我用 docker 在 nginx 中并将其放入 Kubernetes 集群和 tearafik ingress 中将 url 路由更改为 /login 而不是 / 在 web 控制台中出现以下错误：

efused to apply style from 'https://XXXXXXt/styles.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
login:14 GET XXXXXXXXXXX/runtime.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXX/polyfills.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXX/scripts.js net::ERR_ABORTED 404
login:14 GET XXXXXXXXXXXet/main.js net::ERR_ABORTED 404

我解释一下我是如何进行的在 Angular 中，我正在路由所有内容：

  {
    path: '', component: DefaultComponent,
  },

  {
    path: 'conformity-report',
    loadChildren: () => import('./all-products/conformity-report/conformity-report.module').then(m => m.ConformityReportModule)
  },
  {
    path: 'user-management', canActivate: [AdminGuard],
    loadChildren: () => import('./all-products/user-management/user-management.module').then(m => m.UserManagementModule)
  },
  {
    path: 'configuration-area', canActivate: [AdminGuard],
    loadChildren: () => import('./all-products/configuration-area/configuration-area.module').then(m => m.ConfigurationAreaModule)
  },
  {
    path: 'admin', canActivate: [AdminGuard],
    loadChildren: () => import('./all-products/admin/admin.module').then(m => m.AdminModule)
  },
  {
    path: 'error-page',
    component: ErrorPageComponent
  },
  { path: '**', redirectTo: '' }
  
];

这是我的nginx配置文件

  server {
    listen 8080;
    server_name  localhost;
 
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    include /etc/nginx/mime.types;
 
    gzip on;
    gzip_min_length 1000;
    gzip_proxied expired no-cache no-store private auth;
    gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
 
    location / {
      try_files $uri $uri/ /index.html;
      include /etc/nginx/mime.types;
    }
    location ~ \.css {
    add_header  Content-Type    text/css;
    }
    location ~ \.js {
    add_header  Content-Type    application/x-javascript;
    }    
  }

这是我的docker文件，我在其中使用配置文件

将已编译的应用程序移动到 nginx

FROM  XXXXXXX/nodejs:14.17 as build

ENV XXXXXXXX


WORKDIR /app
COPY package*.json /app/
 
COPY . .
RUN npm install 

RUN npm run build 

FROM    XXXXXXX/nginx:unpriviliged
EXPOSE 8080:8080

COPY  --from=build  /app/nginx.conf /etc/nginx/conf.d/default.conf

COPY  --from=build /app/dist/projectname /usr/share/nginx/html

我的部署和服务文件工作正常，但我会在这里传递我的 Ingress 文件我们正在使用 taerafik

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: traefik
    traefik.ingress.kubernetes.io/router.tls: "true"
    #traefik.ingress.kubernetes.io/router.entrypoints: websecure
    cert-manager.io/cluster-issuer:XXXXXX-acme

  name: ingresshosts
  namespace: dev
spec:
  rules:
    - host: XXXXXXXX
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend
                port:
                  number: 8080
                              
  tls:
    - hosts:
        - XXXXXXXX
      secretName: XXXXXXXX

感谢您的帮助。

Answer 1

你可以试试ingress中的注解

traefik.ingress.kubernetes.io/rewrite-target: /login

例子

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  annotations:
    kubernetes.io/ingress.class: traefik
    traefik.ingress.kubernetes.io/rewrite-target: /login
    traefik.ingress.kubernetes.io/router.tls: "true"
    #traefik.ingress.kubernetes.io/router.entrypoints: websecure
    cert-manager.io/cluster-issuer: daimler-acme

  name: ingresshosts
  namespace: dev
spec:
  rules:
    - host: XXXXXXXX
      http:
        paths:
          - path: /
            pathType: Prefix
            backend:
              service:
                name: frontend
                port:
                  number: 8080
                              
  tls:
    - hosts:
        - XXXXXXXX
      secretName: XXXXXXXX

Answer 2

大家好，解决方案在 angular 应用程序 angular.json a basheref

          "configurations": {
            "production": {
              "baseHref": "/login/", 
........

angular 到不同路径的 nginx 路由不起作用

nginx routing do diffrent path with angular are not working

nginx

docker

kubernetes

angular

kubernetes-ingress