當路徑不是"/"時，react-router nginxingress重繪導致白屏。

因此，我已經嘗試解決這個問題好幾天了，但我已經無法自拔了。

我的應用程式正在運行，當我進入默認的 URL（example.com）時，我可以訪問該網站。我可以毫無問題地重繪 這個網址，而且只要我不重繪 任何其他頁面，我就可以通過 react router 瀏覽正在呈現的頁面。(例如）重繪 example.com/path1 不起作用，我得到一個 404 錯誤。

我目前的ingress檔案看起來像：

apiVersion: networking.k8s.io/v1
種類: Ingress
metadata: Ingress
  名稱: myApp-ingress
  注釋:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/use-regex: "true"/span>
spec:
  tls:/span>
    - hosts:/span>
        - my.app.com
      secretName： myApp-tls
  規則:
    - host: "my.app.com" 
      http:
        路徑:
          - pathType: Prefix[/span
            path: /.*
            后端:
              服務:
                name: myApp
                port:
                  number: 80

對于這樣的問題，我已經添加了許多最常見的回復，但這只會讓事情變得更糟，比如它試圖加載的所有javascript檔案都會出現白屏，并出現 "Unexpected token '<'"的錯誤，而且根本沒有任何頁面在加載。

例如，我曾嘗試：

 nginx.ingress.kubernetes.io/rewrite-target: //
    nginx.ingress.kubernetes.io/rewrite-target。/$1
    nginx.ingress.kubernetes.io/rewrite-target: /$2
    nginx.ingress.kubernetes.io/configuration-snippet。|
      try_files $uri $uri/ /index.html。

我試著為應用程式中的每條路由添加額外的路徑到控制器中，我試著將路徑設定為"/"或"/(.*)"，但沒有任何作用。

如果有任何幫助，我們將不勝感激！謝謝！

EDIT:

編輯：

# latest active node image
FROM節點：14-alpine

# 創建應用程式目錄
RUN mkdir /app
RUN mkdir -p /app/node_modules &&/span> chown -R node。 node /app

WORKDIR /app

COPY package.json /app
COPY tsconfig.json /app
COPY webpack.config.js /app
COPY .env.prod .env
ADD src /app/src
ADD dist /app/dist
RUN mkdir -p /app/dist/js & & chown -R node: node /app/dist/js

ADD server /app/server
ADD資產 /app/assets
ADD config /app/config

ARG NPM_TOKEN
COPY .npmrc_docker .npmrc
RUN npm cache verify
RUN npm install
RUN npm run build:prod
RUN rm -f .npmrc

# 暴露必要的埠
EXPOSE 3000 # 暴露必要的埠

# 編譯typescript 和 start app
CMD ["cross-env", "NODE_ENV=production", "PORT=3000", "ts-node", "server/server"]

我也試著用CMD ["npx", "http-server", "./dist", "-p", "3000"]來做，因為服務器部分只做了以下作業：

 this.app.use(express.static(path.resolve(__dirname, "./dist") )。
      this.app.get("*"/span>, (request: express.Request, response: express.Response) => {
        response.sendFile(path.resolve(__dirname, "./dist/index.html"))。
      });

uj5u.com熱心網友回復：

所以我想我找到了問題所在，它現在似乎在作業，我仍然遇到了cmd shift r偶爾會給出一個意外的標記的問題，但整體上它似乎在作業。

我在package.json中添加了運行腳本，現在我將其作為CMD使用

CMD [color:#FF0000][/color:#FF0000]。

CMD ["npm", "run", "start:prod"]

我還把webpack構建中的javascript移回了dist目錄的根部。

我不太明白為什么現在可以了，如果我找到更多的相關資訊，我會在這里更新。

編輯：

事實證明這并不奏效，我認為在某些時候應用程式被快取了，它只是看起來在作業，仍然被卡住了，希望能找到解決這個問題的方法。

我認為在某些時候應用程式被快取了，它只是看起來在作業。

uj5u.com熱心網友回復：

好的，所以我發現了真正的問題。

我的域名同時使用DigitalOcean和Microsoft的名稱服務器。我在DO上添加了A記錄，但我想它需要在兩個服務器上都有。所以我把A記錄加到了另一個服務器上，現在我問題中的配置可以完美運行。

uj5u.com熱心網友回復：

你的路徑。/.*沒有捕獲組，所以/$1和/$2是未定義的。

嘗試以下方法：

apiVersion: networking.k8s.io/v1。
種類: Ingress
metadata: Ingress
  名稱: myApp-ingress
  注釋:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/rewrite-target: /$1
spec:
  tls:/span>
    - 主機:
        - my.app.com
      secretName： myApp-tls
  規則:
    - host: "my.app.com" 
      http:
        路徑:
          - pathType: Prefix[/span
            path: /（.*）
            后端:
              服務:
                name: myApp
                port:
                  number: 80

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/316523.html

標籤：

上一篇：Nginx根據URL的一部分來匹配影像檔案名？

下一篇：為什么我的console.log()在我的瀏覽器中沒有記錄任何資訊？