部署到Istio（使用Kubernetes）的Jhipster无法正确加载

Question

我正在将Jhipster应用程序部署到Kubernetes环境，并使用Istio进行网络连接。

下面是我的VirtualService。请注意，当prefix设置为/时，一切正常。但是，我在此群集上运行了几个应用程序，因此我需要将其映射到/mywebsite。

apiVersion: networking.istio.io/v1alpha3
kind: VirtualService
metadata:
 name: ingress
spec:
 hosts:
 - "*"
 gateways:
 - mywebsite-gateway
 http:
 - match:
   - uri:
       prefix: /mywebsite
   route:
   - destination:
       host: mywebsite
       port:
         number: 80
   websocketUpgrade: true

当我访问该应用程序时，出现以下错误集：

mywebsite:3 GET http://mywebsite.com:31380/app/vendor.bundle.js net::ERR_ABORTED 404 (Not Found)

manifest.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (app.main.ts?3881:1)
    at Object../src/main/webapp/app/app.main.ts (main.bundle.js:447)
    at __webpack_require__ (manifest.bundle.js:55)
    at webpackJsonpCallback (manifest.bundle.js:26)
    at main.bundle.js:1
__webpack_require__ @ manifest.bundle.js:55
eval @ app.main.ts?3881:1
./src/main/webapp/app/app.main.ts @ main.bundle.js:447
__webpack_require__ @ manifest.bundle.js:55
webpackJsonpCallback @ manifest.bundle.js:26
(anonymous) @ main.bundle.js:1

manifest.bundle.js:55 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (global.css?ca77:1)
    at Object../node_modules/css-loader/index.js!./src/main/webapp/content/css/global.css (global.bundle.js:6)
    at __webpack_require__ (manifest.bundle.js:55)
    at eval (global.css?0a39:4)
    at Object../src/main/webapp/content/css/global.css (global.bundle.js:13)
    at __webpack_require__ (manifest.bundle.js:55)
    at webpackJsonpCallback (manifest.bundle.js:26)
    at global.bundle.js:1
__webpack_require__ @ manifest.bundle.js:55
eval @ global.css?ca77:1
./node_modules/css-loader/index.js!./src/main/webapp/content/css/global.css @ global.bundle.js:6
__webpack_require__ @ manifest.bundle.js:55
eval @ global.css?0a39:4
./src/main/webapp/content/css/global.css @ global.bundle.js:13
__webpack_require__ @ manifest.bundle.js:55
webpackJsonpCallback @ manifest.bundle.js:26
(anonymous) @ global.bundle.js:1

mywebsite:1 Unchecked runtime.lastError: The message port closed before a response was received.

我不确定为什么要尝试/app/vendor.bundle.js。我认为应该去/mywebsite/app/vendor.bundle.js。尽管当我手动转到此页面时，我会看到一个Your request cannot be processed

同样在我的index.html中，我有<base href="./" />，在我将其作为可能的解决方案时，它一直都在那儿。

Answer 1

正如您在评论中提到的

我在webpack ...和index.html中设置了新的HtmlWebpackPlugin（{baseUrl：'/ myapp /'}）。我收到一些新错误（即找不到favicon），但仍无法加载该站点，因为似乎找不到javascript或其他东西– Mike K

这就是它应该如何工作的。它不加载javascript，可能不加载css / img，因为您没有为此显示istio uri。

所以这里的解决方法是

• 创建新的baseUrl和basehref，例如/ myapp
• 使用/ myapp前缀或任何前缀并/ myapp重写创建虚拟服务
• 为您的javascript / css / img的文件夹路径创建其他uri

看看这个example

让我们分解应该路由到前端的请求：

精确路径 /应该路由到前端以获取Index.html

Prefix path / static / *应该路由到Frontend以获得前端所需的任何静态文件，例如Cascading Style Sheets和JavaScript files。

与正则表达式^。*。（ico | png | jpg）$]匹配的路径应路由到Frontend，因为它是页面需要显示的图像。

http:
  - match:
    - uri:
        exact: /
    - uri:
        exact: /callback
    - uri:
        prefix: /static
    - uri:
        regex: '^.*\.(ico|png|jpg)$'
    route:
    - destination:
        host: frontend             
        port:
          number: 80