Reactjs 在更改路由或检测到新生成时刷新部署在firebase主机上的生成
问题: 我们是否可以检查firebase主机上部署的新版本,以更改路径(或聚焦选项卡)并重新加载页面,以便用户可以查看新功能 当前用户必须刷新站点才能看到在构建中部署的新功能 以下是我的项目中当前安装的依赖项:Reactjs 在更改路由或检测到新生成时刷新部署在firebase主机上的生成,reactjs,firebase,firebase-hosting,Reactjs,Firebase,Firebase Hosting,问题: 我们是否可以检查firebase主机上部署的新版本,以更改路径(或聚焦选项卡)并重新加载页面,以便用户可以查看新功能 当前用户必须刷新站点才能看到在构建中部署的新功能 以下是我的项目中当前安装的依赖项: "dependencies": { "@material-ui/core": "^4.5.0", "antd": "^3.23.6", "axios": "^0.19.0", "env-cmd": "^10.0.1", "firebase": "^
"dependencies": {
"@material-ui/core": "^4.5.0",
"antd": "^3.23.6",
"axios": "^0.19.0",
"env-cmd": "^10.0.1",
"firebase": "^7.4.0",
"highcharts": "^7.2.0",
"highcharts-react-official": "^2.2.2",
"history": "^4.10.1",
"loaders.css": "^0.1.2",
"local-storage": "^2.0.0",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"notistack": "^0.9.2",
"qs": "^6.9.0",
"query-string": "^6.9.0",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-ga": "^2.7.0",
"react-google-login": "^5.0.7",
"react-icons": "^3.7.0",
"react-loaders": "^3.0.1",
"react-mentions": "^3.3.1",
"react-redux": "^7.1.1",
"react-router-dom": "^5.1.2",
"react-scripts": "3.1.2",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
}
这就是我的firebase.json配置当前的样子:
{
"hosting": {
"target": "build",
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**/*.@(jpg|jpeg|gif|png|css|js|jsx|scss|ttc|woff)",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }] \\ so user doesn't have to force refresh build
}
]
}
}
可能的解决方案:
- 存储内部版本号,并在其更新和更新时添加侦听器 重新加载页面
- 检查构建编号/时间戳,并以某种方式将其与firebase hostings的最新构建相匹配
如果需要我提供更多详细信息,请告诉我。我找到了解决问题的方法。我最终在我的Cloud Firestore数据库中添加了一个版本集合,该集合通过一个脚本从我的CI/CD管道得到更新,该脚本解析package.json文件的当前版本并将其存储在Cloud Firestore中。在React的主应用程序组件中,我在版本集合中添加了一个侦听器,用于比较版本并相应地重新加载页面 在脚本(启动/构建)之前添加了
REACT\u APP\u VERSION=$(node-pe\“require('./package.json').VERSION\”
,以从package.json设置版本
在App.jsx中,在componentDidMount中的侦听器下面添加了
addVersionListener = () => {
var env = process.env.REACT_APP_ENV === "staging" ? "staging" : "production";
db.collection("AppVersion")
.doc(env)
.onSnapshot(docSnapshot => {
if (docSnapshot.exists) {
let data = docSnapshot.data();
let shouldReload = compareVersions(
data.version,
process.env.REACT_APP_VERSION
); // compare-versions npm module
if (shouldReload === 1) {
window.location.reload();
}
}
});
};
在部署REACT\u APP\u VERSION=$(node-pe\'require('./package.json').VERSION\)node./src/updateVersionNumber.js
后运行的脚本。在updateVersionNumber.js中
const firebase = require("firebase/app");
const { credentials } = require("./firebase-credentials.js");
if (firebase.apps.length === 0) {
firebase.initializeApp(credentials);
}
require("firebase/firestore");
const updateVersion = () => {
var db = firebase.firestore();
var env = process.env.REACT_APP_ENV === "staging" ? "staging" : "production";
db.collection("AppVersion")
.doc(env)
.get()
.then(async response => {
if (response.exists && process.env.REACT_APP_VERSION) {
try {
await response.ref.update({ version: process.env.REACT_APP_VERSION});
} catch (err) {
console.log(err);
}
}
});
};
updateVersion();
为了进一步管理自动刷新,例如当用户填写某些表单或执行某些任务时,如果页面自动重新加载,将使他/她失去进度,我使用React-Redux状态来检测并暂停重新加载,稍后通过更新App.jsx中的上述侦听器方法来完成 唯一正确的解决方案是有效的。Firebase主机无法为您解决此问题。为了刷新站点,您必须以某种方式轮询它所服务的内容(即,无论您部署了什么)。