如何配置 k8s ingress 以与 react-router-dom 一起工作

Question

我正在使用 react-router-dom 从我网站上的 url 捕获参数，但是每次我尝试到达 www.mywebsite.com/video/id 的终点时，我都会从我的 nginx 收到 404 响应入口。我已将其配置为将传入请求适当地指向我的前端部署，但我不知道为什么配置无法正常工作：

我的入口：

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
    name: ingress-service
    annotations:
        kubernetes.io/ingress.class: nginx
        cert-manager.io/cluster-issuer: "letsencrypt-prod"
        kubecnginx.ingress.kubernetes.io/ssl-redirect: 'true'

spec:
    tls:
        - hosts:
            - website.app
            - www.website.app
          secretName: website-app
    rules:
        - host: website.app
          http:
            paths:
                - path: /
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /video/*
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /api/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /payments/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /streaming/
                  backend:
                    serviceName: streaming-ip-service
                    servicePort: 3000
        - host: www.website.app
          http:
            paths:
                - path: /
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /video/*
                  backend:
                    serviceName: frontend-cluster-ip-service
                    servicePort: 3000
                - path: /api/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /payments/
                  backend:
                    serviceName: backend-cluster-ip-service
                    servicePort: 5000
                - path: /streaming/
                  backend:
                    serviceName: streaming-ip-service
                    servicePort: 3000

反应代码：

function App() {
  return (
    <div className="App">
    <RecoilRoot>
      <React.Suspense fallback={<div>Loading...</div>}>
      <Router>
  <Switch>
    <Route exact path="/" component={LandingPage}/>
    <Route exact path="/video/:id" component={Video}/>
  </Switch>
</Router>
      </React.Suspense>
    </RecoilRoot>
    </div>
  );
}

更新：

Jonas 的回答确实解决了 k8s 入口端的问题，但是 docker 容器实际上运行 React 应用程序必须更新其 nginx.conf 才能与 react-router-dom。我在下面提供了适当的 Dockerfile 和 nginx/nginx.conf（您的应用程序的顶级目录）文件（由 source 提供）：

Dockerfile:

FROM node:13.12.0-alpine as build
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
COPY package.json ./
COPY yarn.lock ./
RUN yarn install --frozen-lockfile
RUN yarn add react-scripts@3.4.1 -g --silent
COPY . ./
RUN yarn run build

# production environment
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

nginx/nginx.conf:

server {
  listen 80;
  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html {
    root  /usr/share/nginx/html;
  }
}

Answer 1

由于您不想在 path: 上使用 完全匹配 ，您可能希望通过添加注释来启用 regex path matching：

  annotations:
    nginx.ingress.kubernetes.io/use-regex: "true"

然后更改路径：

path: /video/*

到

path: /video/.*

或与您的 /id 模式匹配的更具体的内容。

如何配置 k8s ingress 以与 react-router-dom 一起工作

How to configure k8s ingress to work with react-router-dom

reactjs

kubernetes

react-router-dom

kubernetes-ingress

nginx-ingress