部署到 Istio（使用 Kubernetes）的 Jhipster 無法正確加載

Question

我正在將 Jhipster 應用程序部署到 Kubernetes 環境，並使用 Istio 進行網絡連接。

下面是我的虛擬服務。 請注意，當前prefix設置為/時，一切正常。 但是我有幾個應用程序在這個集群上運行，所以我需要 map 到/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.

我不確定它為什么要嘗試 go /app/vendor.bundle.js 。 我認為它應該 go 到/mywebsite/app/vendor.bundle.js 。 雖然當我手動 go 到這個頁面時，我得到了Your request cannot be processed

同樣在我的index.html中，我有<base href="./" /> ，它一直存在，因為我認為這是一種可能的解決方案。

Answer 1

正如你在評論中提到的

我在 webpack... 和 index.html 中設置了 new HtmlWebpackPlugin({ baseUrl: '/myapp/' })。 我收到一些新錯誤（即找不到圖標），但該網站仍然無法加載，因為似乎沒有找到 javascript 或其他東西 – Mike K

這就是它應該如何工作的方式。 它不會加載 javascript 和可能的 css/img，因為您沒有為此顯示 istio uri。

所以這里的解決方案是

• 創建新的 baseUrl 和 basehref，例如 /myapp
• 使用 /myapp 前綴或任何前綴創建虛擬服務並 /myapp 重寫
• 為您的 javascript/css/img 的文件夾路徑創建額外的 uri

看看這個例子

讓我們分解應該路由到前端的請求：

確切路徑/ 應路由到前端以獲取 Index.html

前綴路徑/static/* 應路由到前端以獲取前端所需的任何 static 文件，例如級聯樣式表和JavaScript 文件。

匹配正則表達式 ^.*.(ico|png|jpg)$ 的路徑應該路由到前端，因為它是頁面需要顯示的圖像。

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