路由到 nginx 服务器上的 React.js 应用程序时“重写目标”失败答案

【问题标题】："rewrite-target" failing when routing to React.js app on nginx server路由到 nginx 服务器上的 React.js 应用程序时“重写目标”失败
【发布时间】：2021-04-09 07:19:16
【问题描述】：

我有一个 React 应用程序，我构建并 dockerize 以托管在 nginx 服务器上。

FROM nginx:latest
COPY build /usr/share/nginx/html

然后我为它创建一个简单的部署和服务（我非常怀疑这是问题所在）。接下来我创建一个 nginx 入口。

apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
  name: my-app-ingress
  annotations:
    kubernetes.io/ingress.class: "nginx"
    nginx.ingress.kubernetes.io/ssl-redirect: "false"
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: <MY_NGINX_CONTROLLER_EXTERNAL_IP>.xip.io
    http:
      paths:
      - backend:
          serviceName: my-app-service
          servicePort: 80
        path: /myapp

但是当我打电话给<MY_NGINX_CONTROLLER_EXTERNAL_IP>.xip.io/myapp 时，我得到了 404。

当我将path: /myapp 更改为path: / 时，我可以在<MY_NGINX_CONTROLLER_EXTERNAL_IP>.xip.io 上毫无问题地访问我的应用程序

我尝试了rewrite-target 和path 的多种变体，例如/$1 和/myapp/(.*)，但没有区别。

我认为问题在于使用 nginx.ingress.kubernetes.io/rewrite-target 注释来路由到 React 应用程序。因为在我的集群上对任何其他服务使用该注释都可以正常工作。

其他用户似乎也有类似的问题：https://github.com/kubernetes/ingress-nginx/issues/3770#。但我找不到解决方案。

解决方法是在我的 react 应用程序中更改 basename 和 homepage 属性，然后更新所有路由。那么我根本不需要rewrite-target。但是让它与rewrite-target 一起工作会更干净，特别是考虑到我的应用程序的路径/子目录必须定期更改。

【问题讨论】：

标签： reactjs nginx kubernetes kubernetes-ingress nginx-ingress

【解决方案1】：

我现在开始工作了。通过两个额外的步骤，根本不需要“rewrite-target”注释，并且可以从入口资源中删除。

第 1 步：更改 react 应用中的基本 URL。看看如何做到这一点here。

第二步：将react build复制到Dockerfile中/usr/share/nginx/html对应的子目录中：

FROM nginx:latest
COPY build /usr/share/nginx/html/myapp

【讨论】：