刷新部署在Firebase托管上的构建，以更改路线或检测存在的新构建 [英] Refresh build deployed on firebase hosting on changing route or detecting new build present

问题描述

问题:我们是否可以通过更改路线(或重点关注标签)并重新加载页面来检查部署在Firebase托管上的新版本，以便用户查看新功能?

Question: Is it possible for us to check for the new build deployed on firebase hosting on changing route(or on focusing the tab) and reloading the page so user can view new features?

当前，用户必须刷新站点才能查看构建中部署的新功能.

Currently user have to refresh the site to see new feature deployed in the build.

以下是我的项目中当前安装的依赖项:

The following are the dependencies installed currently in my project:

"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配置当前的样子:

Thats how my firebase.json config looks like currently:

{
  "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托管进行匹配.

有人可以指导我正确的方向吗?我也在 Github 上创建了一个问题.请让我知道是否需要我提供更多详细信息.

Can someone please guide me in the correct direction? I have created an issue on Github as well. Please let me know if there is some further detail required from me.

推荐答案

我能够找到解决问题的方法.我最终在Cloud Firestore数据库中添加了一个版本集合，该集合通过一个脚本从CI/CD管道中进行更新，该脚本解析package.json文件的当前版本并将其存储在Cloud Firestore中.在React的主要App组件中，我向版本集合添加了一个侦听器，可用于比较版本并相应地重新加载页面.

I was able to figure out a solution for my problem. I ended up adding a version Collection in my Cloud Firestore Database which gets updated from my CI/CD pipeline through a script which parse the current version of the package.json file and store it in the Cloud Firestore. And in my main App component of React i have added a Listener to version collection which lets compares version and reload page accordingly.

在脚本(启动/生成)之前添加了 REACT_APP_VERSION = $(node -pe \"require('./package.json').version \")，以设置package.json中的版本

Added REACT_APP_VERSION=$(node -pe \"require('./package.json').version\") before script (start/build) to set version from package.json

在App.jsx中添加到componentDidMount的侦听器下方

In App.jsx added below listener in 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_APP_VERSION = $(node -pe \"require('./package.json').version \")节点./src/updateVersionNumber.js .在 updateVersionNumber.js

Script that runs after deployment REACT_APP_VERSION=$(node -pe \"require('./package.json').version\") node ./src/updateVersionNumber.js. In 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中的上述侦听器方法来执行此操作.

To further manage the auto refresh for cases like when user is filling some form or doing some tasks which will make him loose his/her progress if page reloads automatically, I have used React Redux state to detect and halt reloading for time being and do it later by updating the above listener method in App.jsx.

这篇关于刷新部署在Firebase托管上的构建，以更改路线或检测存在的新构建的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！