如何解决路由到 nginx 服务器上的 React.js 应用程序时,“重写目标”失败
我有一个 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
一起工作会更简洁,特别是考虑到路径/子目录必须为我的应用程序定期更改。
解决方法
我现在开始工作了。通过两个额外的步骤,“rewrite-target”注释根本不需要,可以从入口资源中删除。
第 1 步:更改 react 应用中的基本 URL。了解如何执行此操作here。
第2步:将react build复制到Dockerfile中/usr/share/nginx/html
对应的子目录中:
FROM nginx:latest
COPY build /usr/share/nginx/html/myapp
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。