kubernetes 中的 angular 應用程序使用 nginx 入口路徑

Question

經過一番挖掘后，我決定發布這個問題，希望會出現一個正確的答案:)

目標：在 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 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

angular應用

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

Answer 1

在@aakash 建議之后，我分析了HashStrategy 。

為了支持/:id我們可以在路由配置src/app/routing.module.ts中使用HashStrategy 。 有了HashStrategy ，所謂的hash片段，就不會發送到服務器了。

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

Answer 2

你想支持路徑：/？ 您可以將 Hash 策略與路由器模塊一起使用。 這樣你的額外路由不會 go 到服務器

kubernetes 中的 angular 應用程序使用 nginx 入口路徑

問題描述

Kubernetes

nginx

入口配置

angular應用

參考

2 個解決方案

解決方案1
1 2020-05-25 21:17:15

解決方案2
-1 2020-05-25 19:15:08

kubernetes 中的 angular 應用程序使用 nginx 入口路徑

問題描述

Kubernetes

nginx

入口配置

angular應用

參考

2 個解決方案

解決方案1 1 2020-05-25 21:17:15

解決方案2 -1 2020-05-25 19:15:08

解決方案1
1 2020-05-25 21:17:15

解決方案2
-1 2020-05-25 19:15:08