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入口端的问题，但是实际运行react应用程序的docker容器必须更新其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入口以与react-router-dom一起使用

1 个答案: