"rewrite-target"路由到 nginx 服务器上的 React.js 应用程序时失败

Question

我有一个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一起工作会更干净，尤其是考虑到我的应用程序的路径/子目录必须定期更改。

Answer 1

我现在开始工作了。通过两个附加步骤"；重写目标"；注释根本不需要，并且可以从入口资源中删除。

步骤1:更改react应用程序中的基本URL。请在此处查看如何执行此操作。

步骤2：将react构建复制到Dockerfile:中/usr/share/nginx/html的相应子目录中

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