Refre sh build, развернутый на хостинге firebase при изменении маршрута или обнаружении новой сборки - PullRequest
Новая
       2

Refre sh build, развернутый на хостинге firebase при изменении маршрута или обнаружении новой сборки

1 голос
/ 08 января 2020

Вопрос: Можно ли проверить новую версию, развернутую на хостинге Firebase, при изменении маршрута (или при фокусировке вкладки) и перезагрузить страницу, чтобы пользователь мог просматривать новые функции?

В настоящее время пользователь должен обновить sh сайт, чтобы увидеть новую функцию, развернутую в сборке.

Ниже приведены зависимости, установленные в настоящее время в моем проекте: 

"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 config выглядит следующим образом: 

{
  "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 . Пожалуйста, дайте мне знать, если от меня требуется дополнительная информация.

1 Ответ

1 голос
/ 09 января 2020

Мне удалось найти решение для моей проблемы. В итоге я добавил коллекцию версий в базу данных Cloud Firestore, которая обновляется из моего конвейера CI / CD с помощью сценария, который анализирует текущую версию пакета. json файл и сохраняет его в Cloud Firestore. И в моем главном компоненте приложения React я добавил слушателя в коллекцию версий, который позволяет сравнивать версию и перезагрузить страницу соответственно.

Добавлен REACT_APP_VERSION=$(node -pe \"require('./package.json').version\") перед сценарием (запуск / сборка) для установки версии из пакета. *

В 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_APP_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();

Для дальнейшего управления автоматическим обновлением sh для случаев, например, когда пользователь заполняет какую-либо форму или выполняет некоторые задачи, которые заставят его потерять свой прогресс, если страница автоматически перезагружается, я использовали состояние React Redux для обнаружения и остановки перезагрузки на некоторое время и сделаем это позже, обновив вышеуказанный метод listener в App.jsx.

...