如何使用 istio 为 Anguar 微前端提供 javascript 和图像文件（由 index.html 引用）？

Question

我在 EKS 上使用 istio

我在 EKS

上部署了一个 Angular 微前端应用程序

这是我的微字体端 index.html

中的基本 href

<base href="/ui-spa">

我正在使用以下虚拟服务：

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
 name: ui-spa-virtual-service
 namespace: ui-spa-namespace
spec:
 hosts:
 - "*"
 gateways:
 - default/ui-spa-gateway
 http:
 - match:
   - uri:
       prefix: "/ui-spa/login"
   rewrite:
     uri: "/index.html"
   route:
   - destination:
      host: ui-spa-service
      port:
        number: 80

当我回复此虚拟服务时，以下 curl 命令工作正常：

curl "istio-loadbalancer/ui-spa/login"

curl 命令returns index.html 页面成功。

然而，当我在浏览器中运行相同 URL 时，我得到一个空白页面

当我查看 chrome 上的开发人员工具页面时，我注意到 index.hml 返回了 200 状态，但所有其他依赖项，如 javascript 文件和图像文件都返回了404 错误。

如何确保所有 js 和图像文件也在浏览器上返回？

我应该更改虚拟服务吗？

我也试过这里的建议：

https://rinormaloku.com/istio-practice-routing-virtualservices/

... 并将其也添加到我的虚拟服务中。但是没有用：

  http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'

上面的虚拟服务对于js和图片文件也给了404

Answer 1

匹配 uri 末尾的斜杠就可以了。现在所有依赖项都加载得很好！

http:
  - match:
    - uri:
          prefix: /ui-spa/

如何使用 istio 为 Anguar 微前端提供 javascript 和图像文件（由 index.html 引用）？

How to serve javascript and image files (referred by index.html) using istio for Anguar micro front ends?

amazon-web-services

angular

istio

amazon-eks

micro-frontend