如何解决您如何在minikube中使子路径适用于create-react-app？
认为这很简单，但显然不是这种情况。
我有两个在以下位置运行的CRA微服务：
-
/ -
/admin
minikube ip为192.168.64.5，因此浏览器中的完整路由应为192.168.64.5/和192.168.64.5/admin。 Dockerfile.dev仅以npm start开头。
根路由可以正常工作，但是/admin我无法让静态文件在我的生命中正常运行……花了几个小时。我得到的只是Uncaught SyntaxError: Unexpected token '<'，这是由于无法正确提供静态文件所致。
也就是说，当我执行npm build或只是转到localhost:3000/admin时，将正确提供Web应用程序。 npm build显然不是开发的理想选择。使用localhost只是绕开了集群路由，因此，本来可能在开发人员中发现的问题现在会在登台时出现。如果我无法正常工作，就必须走那条路。
我已经尝试过"homepage:"和basename={process.env.PUBLIC_URL}，但是无法解决问题：
# package.json
{
"name": "admin","version": "0.1.0","private": true,"homepage": "/admin","dependencies": {
"@testing-library/jest-dom": "^4.2.4","@testing-library/react": "^9.5.0","@testing-library/user-event": "^7.2.1","history": "^5.0.0","react": "^16.13.1","react-dom": "^16.13.1","react-router-dom": "^5.2.0","react-scripts": "3.4.3"
},"scripts": {
"start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
},"eslintConfig": {
"extends": "react-app"
},"browserslist": {
"production": [
">0.2%","not dead","not op_mini all"
],"development": [
"last 1 chrome version","last 1 firefox version","last 1 safari version"
]
}
}
# index.js
import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router,Route,Switch } from "react-router-dom";
import { createBrowserHistory } from "history";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
export const history = createBrowserHistory({
basename: process.env.PUBLIC_URL
});
ReactDOM.render(
<Router basename={process.env.PUBLIC_URL}>
<Switch>
<Route path="/">
<App />
</Route>
</Switch>
</Router>,document.getElementById("root")
);
serviceWorker.unregister();
# index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<!-- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> -->
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<base href="%PUBLIC_URL%/">
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<!-- <link rel="manifest" href="./manifest.json" /> -->
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico","%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser,you will see an empty page.
You can add webfonts,meta tags,or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development,run `npm start` or `yarn start`.
To create a production bundle,use `npm run build` or `yarn build`.
-->
</body>
</html>
还尝试使用.env PUBLIC_URL，但具有与"homepage":相同的效果。
通常，Create React App会忽略主机名。
但是显然，minikube ip和集群有些不喜欢的东西。似乎这是一个很常见的要求，所以可能有一个我直接忽略的简单解决方案。
对这项工作有什么建议吗？
# ingress.yaml
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
nginx.ingress.kubernetes.io/rewrite-target: /$1
name: ingress-service-dev
namespace: default
spec:
rules:
- http:
paths:
- path: /admin/?(.*)
backend:
serviceName: admin-cluster-ip-service-dev
servicePort: 4001
- path: /?(.*)
backend:
serviceName: client-cluster-ip-service-dev
servicePort: 3000
- path: /api/?(.*)
backend:
serviceName: api-cluster-ip-service-dev
servicePort: 5000
解决方法
好吧，显然问题出在nginx.ingress.kubernetes.io/rewrite-target: /$1中的ingress.yaml。我将其注释掉，然后开始工作。
您可以参考上面的index.html，index.js和package.json，因为它们没有变化。
最后的ingress.yaml是：
# ingress.yaml
apiVersion: networking.k8s.io/v1beta1
kind: Ingress
metadata:
annotations:
kubernetes.io/ingress.class: "nginx"
name: ingress-service-dev
namespace: default
spec:
rules:
- http:
paths:
- path: /admin/
backend:
serviceName: admin-cluster-ip-service-dev
servicePort: 4001
- path: /api/
backend:
serviceName: api-cluster-ip-service-dev
servicePort: 5000
- path: /
backend:
serviceName: client-cluster-ip-service-dev
servicePort: 3000
到目前为止，一切都还没有结束，一切都按预期进行。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。