Nuxt.js (SPA) + Firebase 웹 서비스로 강제 업데이트 (리비전 업 대책)

10511 단어 FirebaseFirebaseHostingSPAnuxt.js웹 서비스
SPA는 매우 훌륭하지만 Hosting에 업로드해도 즉시 업데이트되지 않습니다. .
예를 들어, 유지보수 화면으로 변경해도 캐시가 남아 유지보수 모드가 되지 않는다고 합니다. .

이 기사 을 보면, React로 강제적으로 리비전 업하는 방법이 실려 있었으므로,
Nuxt.js에서도 할 수 없는지 해 보았을 때의 비망록.

추가 2018/10/17



@hecateball씨의 기사에 의하면, 별로 좋지 않은 방법과 같다. .
PWA에서 캐시 전략을 설정하거나 Remote Config가 좋을 것 같다 (´ω｀)
- Nuxt.js (SPA)와 Firebase에서 강제 개정 (버전) 업한다면 PWA 모듈을 사용합시다 - Qiita

거친 흐름



흐름으로서는, 이런 느낌.
  • static 디렉토리에 JSON 파일로 버전 번호를 제공합니다.
  • 환경 변수에 개정 번호를 유지하도록 설정
  • JSON 파일과 환경 변수의 버전 번호가 다른 경우 강제 다시로드합니다.

    준비하는 JSON 파일은 이런 느낌
    {"version":1}

    하는 방법



    버전 체크하는 타이밍이나 갱신의 계기는 여러가지 있지만,
    페이지 천이시에 체크하도록, middleware로 대응.

    참고 기사)에있는 것처럼 대화를 내는 패턴도 있습니다.

    버전을 확인하는 middleware 준비


    middleware/checkUpdate.ts 로 버전을 확인하는 미들웨어를 추가합니다.
    import axios from "axios";

export default async function() {
  try {
    // revision.jsonファイルから最新のバージョンを取得
    const res = await axios.get("/version.json");
    const data = res.data;
    const latestVersion = data.version;

    // 環境変数から現在のバージョンを取得
    const curVersion = !!process.env.VERSION ? Number(process.env.VERSION) : 0;

    // 最新バージョンよりも古かったら、強制的にリロードする
    if (curVersion < latestVersion) location.reload(true);
  } catch(error) {
    console.error(error);
    // エラーのときはなにもしない
  }
}
    location.reload(true)를 사용하면 캐시를 무시하고 강제로 다시로드하는 것 같습니다.
    · 참고 : Location.reload() - Web APIs | MDN

    nuxt.config.ts 설정



    middleware를 사용하는 것과 함께,
  • 환경 변수 ( VERSION )를 설정하거나
  • JSON 파일 ( version.json ) 생성 
    • import fs from "fs";
import NuxtConfiguration from "@nuxt/config";


// バージョン番号を設定
const VERSION = 1;
// revision.jsonをstatic配下に生成
fs.writeFileSync("static/version.json", JSON.stringify({ version: VERSION }));

const config: NuxtConfiguration = {
  env: {
    VERSION: VERSION // 環境変数にバージョンを設定
  },

  router: {
    middleware: ["checkUpdate"] // バージョンチェックのmiddlewareを設定
  }
}

    firebase.json에서 version.json을 캐시하지 않도록



    그대로라면, version.json 자체도 캐쉬되어 버리므로,
    별로 의미가 없는 느낌이 된다. .

    그래서 firebase.json에서 version.json을 캐시하지 않도록 설정
    {
  "hosting": {
    "public": "public",
    "ignore": ["firebase.json", "**/node_modules/**", "**/README.md"],
    "headers": [
      {
        "source": "/version.json",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "private, no-store, no-cache, must-revalidate"
          }
        ]
      }
    ]
  },
}

    이상!!

    이런것을 만들고 있습니다!!



    적독용의 독서 관리 어플리케이션 「적독 하우 매치」를 릴리스했습니다!
    적독 하우 매치은 Nuxt.js+Firebase에서 개발 중입니다!



    괜찮다면 놀아주세요 ヽ (= '▽`=) 노

    요청, 감상, 조언 등이 있다면,
    공식 계정( @MemoryLoverz )과 개발자( @kira_puka )까지♪

    참고로 한 사이트


  • javascript – 단일 페이지 애플리케이션 (SPA) 페이지를 강제로 업데이트하는 방법 - 코드 로그
  • 【React.js】SPA에서의 리비전 업 대책 - Qiita
    • Error: An AuthUI instance already exists for the key "[DEFAULT]"에 대한 해결책
    jQuery로 간단한 SPA 샘플을 만들어 보았습니다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage