경로 변경 또는 새 빌드 감지시 Firebase 호스팅에 배포 된 빌드 새로 고침

줄 카나 인 하니프

질문 : 사용자가 새 기능을 볼 수 있도록 경로 변경 (또는 탭 집중) 및 페이지 새로 고침시 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": "**/*[email protected](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 에서도 문제가 발생했습니다 . 더 자세한 정보가 필요하면 알려주세요.

줄 카나 인 하니프

내 문제에 대한 해결책을 찾을 수있었습니다. 내 Cloud Firestore 데이터베이스에 버전 컬렉션을 추가했습니다.이 컬렉션은 현재 버전의 package.json 파일을 파싱하고 Cloud Firestore에 저장하는 스크립트를 통해 CI / CD 파이프 라인에서 업데이트됩니다. 그리고 React의 주요 App 구성 요소에서 버전을 비교하고 그에 따라 페이지를 다시로드 할 수있는 Listener를 버전 컬렉션에 추가했습니다.

REACT_APP_VERSION=$(node -pe \"require('./package.json').version\")package.json에서 버전을 설정하기 위해 스크립트 (시작 / 빌드) 전에 추가됨

App.jsx에서 componentDidMount의 listener 아래에 추가되었습니다.

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

사용자가 양식을 채우거나 페이지가 자동으로 다시로드되는 경우 진행 상황을 잃게 만드는 일부 작업을 수행하는 경우 자동 새로 고침을 추가로 관리하기 위해 React Redux 상태를 사용하여 당분간 다시로드를 감지하고 중지하고 수행했습니다. 나중에 App.jsx에서 위의 리스너 메소드를 업데이트하여.

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

분류에서Dev

Google 시트 셀 편집시 사이드 바 새로 고침 또는 새로 고침

분류에서Dev

페이지를 새로 고침 할 때 Firebase에서 업로드 된 이미지를 표시하는 문제

분류에서Dev

Angular-경로 변경시 새로 고침 또는 재 구독 서비스

분류에서Dev

새로 고침시에도 클릭 한 카드의 배경색을 유지하는 방법은 무엇입니까?

분류에서Dev

배포 할 때 새로 빌드 된 Docker 이미지를 시작하는 방법은 무엇입니까?

분류에서Dev

Jenkins는 동일한 매개 변수를 사용하지만 새 빌드 번호로 다시 빌드합니다.

분류에서Dev

로드 된 텍스트 파일 변경시 C # 목록 상자 새로 고침

분류에서Dev

Mvc 부분보기 다시로드 또는 새로 고침

분류에서Dev

Mvc 부분보기 다시로드 또는 새로 고침

분류에서Dev

새 빌드가 BIOS로 부팅되지 않고 3 번의 긴 경고음이 계속 울립니다.

분류에서Dev

크기 변경 후 div 태그 컨테이너 새로 고침 / 다시로드

분류에서Dev

페이지 새로 고침시 HTML 드롭 다운 값 변경

분류에서Dev

페이지 새로 고침시 이미지 배경 변경

분류에서Dev

Vanilla JS로 새로 고침시 배경색 변경

분류에서Dev

변경시 Iframe 새로 고침

분류에서Dev

변경시 JavaScript 파일 "새로 고침"

분류에서Dev

php-ajax가 변경된 경우에만 새로 고침

분류에서Dev

Datacontext 변경시 Datagrid 새로 고침

분류에서Dev

페이지 간 또는 페이지 새로 고침시 PHP session_id 변경

분류에서Dev

와일드 카드로 빌드되고 공백이 포함 된 경로를 변수에 저장하는 방법

분류에서Dev

새로운 PC 빌드-경고음 및 디스플레이 없음

분류에서Dev

iframe 새로 고침시 URL 변경

분류에서Dev

Jenkins : 새 빌드가 배포되지 않는 경우 이전 빌드를 계속 실행합니다.

분류에서Dev

jquery 또는 javascript를 사용하여 드롭 다운 값 변경시 테이블 새로 고침

분류에서Dev

변경 후 캔버스 새로 고침

분류에서Dev

새로 고침 후 변경된 색상 유지

분류에서Dev

angularJS에서 페이지 새로 고침시 이미지 변경

분류에서Dev

범위 변경 후 새로 고침되지 않는 지시문

분류에서Dev

C #에서 JavaScript 배열 빌드, 아포스트로피 변경

Related 관련 기사

  1. 1

    Google 시트 셀 편집시 사이드 바 새로 고침 또는 새로 고침

  2. 2

    페이지를 새로 고침 할 때 Firebase에서 업로드 된 이미지를 표시하는 문제

  3. 3

    Angular-경로 변경시 새로 고침 또는 재 구독 서비스

  4. 4

    새로 고침시에도 클릭 한 카드의 배경색을 유지하는 방법은 무엇입니까?

  5. 5

    배포 할 때 새로 빌드 된 Docker 이미지를 시작하는 방법은 무엇입니까?

  6. 6

    Jenkins는 동일한 매개 변수를 사용하지만 새 빌드 번호로 다시 빌드합니다.

  7. 7

    로드 된 텍스트 파일 변경시 C # 목록 상자 새로 고침

  8. 8

    Mvc 부분보기 다시로드 또는 새로 고침

  9. 9

    Mvc 부분보기 다시로드 또는 새로 고침

  10. 10

    새 빌드가 BIOS로 부팅되지 않고 3 번의 긴 경고음이 계속 울립니다.

  11. 11

    크기 변경 후 div 태그 컨테이너 새로 고침 / 다시로드

  12. 12

    페이지 새로 고침시 HTML 드롭 다운 값 변경

  13. 13

    페이지 새로 고침시 이미지 배경 변경

  14. 14

    Vanilla JS로 새로 고침시 배경색 변경

  15. 15

    변경시 Iframe 새로 고침

  16. 16

    변경시 JavaScript 파일 "새로 고침"

  17. 17

    php-ajax가 변경된 경우에만 새로 고침

  18. 18

    Datacontext 변경시 Datagrid 새로 고침

  19. 19

    페이지 간 또는 페이지 새로 고침시 PHP session_id 변경

  20. 20

    와일드 카드로 빌드되고 공백이 포함 된 경로를 변수에 저장하는 방법

  21. 21

    새로운 PC 빌드-경고음 및 디스플레이 없음

  22. 22

    iframe 새로 고침시 URL 변경

  23. 23

    Jenkins : 새 빌드가 배포되지 않는 경우 이전 빌드를 계속 실행합니다.

  24. 24

    jquery 또는 javascript를 사용하여 드롭 다운 값 변경시 테이블 새로 고침

  25. 25

    변경 후 캔버스 새로 고침

  26. 26

    새로 고침 후 변경된 색상 유지

  27. 27

    angularJS에서 페이지 새로 고침시 이미지 변경

  28. 28

    범위 변경 후 새로 고침되지 않는 지시문

  29. 29

    C #에서 JavaScript 배열 빌드, 아포스트로피 변경

뜨겁다태그

보관