时间戳

首页 > 解决方案 > Kubernetes中使用nginx入口路径的角度应用程序

angular - Kubernetes中使用nginx入口路径的角度应用程序

问题描述

经过一番挖掘后，我决定发布这个问题，希望会出现一个正确的答案:)

目标：在 k8s 中部署一个 Angular 应用程序，并通过带有可自定义路径和参数化路由的 nginx 入口将其公开。应该工作的电话：

http://my-url/my-app/
http://my-url/my-app/a
http://my-url/my-app/b
http://my-url/my-app/c
http://my-url/my-app/c/my-id

问题/c/:id：不支持参数化路线。未调用工厂，因此APP_BASE_HREF未设置动态。调用不正常：

http://my-url/my-app/c/my-id

在那里，APP_BASE_URL没有正确检测到 ，并且 angular 尝试从http://my-url/my-app/c/runtime.js.

提供完整的代码示例将很难且很长，但将提供一些片段

Kubernetes

nginx

helm uninstall -n ingress-nginx nginx-ingress; helm install --namespace ingress-nginx nginx-ingress stable/nginx-ingress（图表版本：nginx-ingress-1.33.5；应用版本：0.30.0）

入口配置

---
apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: {{ template "my-app.ui.fullname" . }}
  labels:
    app: {{ template "my-app.name" . }}
    component: "{{ .Values.ui.name }}"
  annotations:
      kubernetes.io/ingress.class: "nginx"
      ingress.kubernetes.io/rewrite-target: /$2
      ingress.kubernetes.io/ssl-redirect: "false"
      ingress.kubernetes.io/use-regex: "true"
spec:
  rules:
  - host: "{{ .Values.root_url }}"
    http:
      paths:
      - path: "{{ .Values.ui.ingress.path }}(/|$)(.*)"
        backend:
          serviceName: {{ template "my-app.ui.fullname" . }}
          servicePort: 8085

{{ .Values.ui.ingress.path }}可能在哪里/my-app

角度应用

src/index.html 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
  </head>
  <body>
    <app-root></app-root>
  </body>
</html>
src/app/routing.module.ts

我们拥有的路线。


const routes: Routes = [
    { path: '',
        redirectTo: '/overview',
        data: { title: 'Overview'},
        pathMatch: 'full' },
    { path: 'overview',
        data: { title: 'Overview'},
        component:  AComponent },
    { path: 'b',
        data: { title: 'B'},
        component: BComponent },
    { path: 'c/:id',
        data: { title: 'C detail'},
        component: CComponent },
    { path: 'c',
        data: { title: 'C detail'},
        component: CComponent },
    { path: '**',
        component: PageNotFoundComponent }

];


@NgModule({
  imports: [ RouterModule.forRoot(routes,
        {enableTracing: false}
    ) ],
  exports: [ RouterModule ]
})
export class RoutingModule { }

export const ROUTES_PATH = routes.map(p => p["path"])
src/app/app.module.ts

只需使用APP_BASE_HREF修饰符：

import { getBaseLocation } from './common-utils';


/**
 * Modules
 */

@NgModule({
    declarations: [
        AppComponent,
...

    ],
    imports: [
        BrowserModule,
        RoutingModule
...
    ],
    providers: [
        Title,
        {
            provide: APP_BASE_HREF,
            useFactory: getBaseLocation
        }
    ],
    bootstrap: [ AppComponent ],
    entryComponents: [ t ]
})
export class AppModule { }
src/app/common-utils.ts 
import { ROUTES_PATH } from './routing.module';

export function getBaseLocation() {
    let paths: string[] = location.pathname.split('/');
    let basePath: string = (paths && !ROUTES_PATH.includes(paths[1]) && paths[1]) || ''; // Default: ''
    return '/' + basePath;
}

参考

在 APP_INITIALIZER 完成之前调用 APP_BASE_HREF 令牌的 Providerfactory

https://github.com/angular/angular/issues/25932

Angular 2 使用来自 Promise / Observable 的值设置 APP_BASE_HREF

标签： angularnginxkubernetesnginx-ingress

解决方案

在@aakash 建议之后，我分析了HashStrategy.

为了支持/:id我们可以在路由配置中使用HashStrategysrc/app/routing.module.ts。有了HashStrategy，所谓的散列片段，就不会被发送到服务器。

src/app/routing.module

...
@NgModule({
  imports: [ RouterModule.forRoot(routes, {useHash: true}) ],
  exports: [ RouterModule ]
})

在这种情况下，请求将如下所示：

http://my-url/my-app/
http://my-url/my-app/#/a
http://my-url/my-app/#/b
http://my-url/my-app/#/c
http://my-url/my-app/#/c/my-id

推荐阅读