当路径不是“/”时，react-router + nginx 入口刷新会导致白屏

Question

所以我已经尝试解决这个问题好几天了，但我陷入了困境。

我的应用程序正在运行，当我转到默认网址 (example.com) 时，我可以访问该网站。我可以毫无问题地刷新此网址，并且只要我不在任何其他页面上刷新，我就可以导航通过反应路由器呈现的页面。（例如）在 example.com/path1 上刷新不起作用，我收到 404 错误。

我当前的入口文件如下所示：

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: myApp-ingress
  annotations:
    kubernetes.io/ingress.class: nginx
    cert-manager.io/cluster-issuer: letsencrypt-prod
    nginx.ingress.kubernetes.io/use-regex: "true"
spec:
  tls:
    - hosts:
        - my.app.com
      secretName: myApp-tls
  rules:
    - host: "my.app.com"
      http:
        paths:
          - pathType: Prefix
            path: /.*
            backend:
              service:
                name: myApp
                port:
                  number: 80

我已经添加了许多对此类问题的最常见回复，但这只会让事情变得更糟，例如白屏，它尝试加载的所有 javascript 文件都出现“意外令牌 '<'” 错误，并且没有任何页面完全加载。

例如，我尝试过：

    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;

我尝试为应用程序中可用的每条路线添加额外的路径到控制器，我尝试将路径设置为“/”或“/(.*)”，但没有任何效果。

任何帮助将不胜感激！谢谢你！

编辑：

# latest active node image
FROM node:14-alpine

# Create app directory
RUN mkdir /app
RUN mkdir -p /app/node_modules && 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 assets /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 necessary port
EXPOSE 3000

# Compile typescript and 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("*", (request: express.Request, response: express.Response) => {
        response.sendFile(path.resolve(__dirname, "../dist/index.html"));
      });

Answer 1

好吧，所以我发现了真正的问题。

我的域同时使用 DigitalOcean 和 Microsoft 名称服务器。我在 DO 上添加了 A 记录，但我想两者都需要。所以我将 A 记录添加到另一个记录中，现在我的问题中的配置完美运行。