Angular 使用非根路径时 Kubernetes Ingress 上的应用程序

Question

我有一个 Angular 应用程序，可以在开发环境中完美运行。

当我尝试将它部署到 Kubernetes 集群并为其创建入口路由时，事情没有按预期进行。

具体来说，我正在使用这个入口定义

apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  name: angular-website
  annotations:
    kubernetes.io/ingress.class: "nginx"
spec:
  rules:
  - http:
      paths:
      - backend:
          serviceName: angular-website
          servicePort: 80
        path: /website(/($|.*))?

当我尝试转到该入口路由时，我看到一个空白页面和网络选项卡（在 Chrome 中），我看到这些错误

我意识到这是因为我正在尝试在非根路径上进行路由（即不是 / 的路径），并且 Angular 不是“意识到”并假设应用程序在尝试加载所有 JS 包时从根路径运行。

我意识到我可以通过在

的应用程序的主要 index.html 中编辑一个部分来解决这个问题

<base href="/">

到

<base href="/website">

但我宁愿不这样做，因为这需要我在构建期间提前知道路径。

有办法解决吗？有没有办法让 Angular 动态地知道根路径而不必重新编译应用程序来设置它？

编辑

Angular 应用托管在 NodeJS Express 应用程序中

const clientPath = path.join(__dirname, "..", "public", "angular-website", "dist", "angular-website");

app.use(express.static(clientPath));
app.get('/*', (req, res) => res.sendFile(path.join(clientPath, "index.html"));

Answer 1

我最终像这样在我的 Dockerfile 中构建了 Angular 应用程序

RUN npm run build -- --prod --base-href="/{{basePath}}" --deploy-url="{{basePath}}/"

基本上，在构建期间，我将一个占位符传递给 --base-href 和 --deploy-url 参数，这些参数指示我的应用程序的根路径。

然后，当我从我的 NodeJS + Express 进程提供 Angular 应用程序时，我使用 mustache（模板引擎）将占位符替换为我存储的应用程序的根路径在环境变量中。

res.render('index', {
    basePath: process.env.CLIENT_BASE_PATH || ''
});

Angular 使用非根路径时 Kubernetes Ingress 上的应用程序

Angular app on Kubernetes Ingress when using non-root path

kubernetes

angular

kubernetes-ingress

nginx-ingress