nginx路由做有角度的不同路径不起作用

Question

嘿，我在Kubernetes集群中的角度项目路由有问题。我解释了我是如何进行的。我希望我在url中的起始根不是/，而是/login。一切都应该以/login开始，Angular应用程序也是如此，但一旦我在nginx中用docker加载它，并将其放入Kubernetes集群和tearafik入口中，将url路由改为/login而不是/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;
}    
} 

这是我的dockerfile，我在其中使用配置文件将编译的应用程序移动到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.jsonabasseref中

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