Nuxt.js(SPA)+FirebaseなWebサービスで強制的に更新する(リビジョンアップ対策)

SPAはとてもすてきだけど、Hostingにアップロードしてもすぐに更新されない。。
たとえば、メンテナンス画面に変更しても、キャッシュが残っててメンテナンスモードにならないとか。。

この記事をみると、Reactで強制的にリビジョンアップする方法が載っていたので、
Nuxt.jsでもできないかやってみたときの備忘録。

ざっくりとした流れ

流れとしては、こんな感じ。

  1. staticディレクトリにJSONファイルでバージョン番号を用意
  2. 環境変数にリビジョン番号を保持するように設定
  3. 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を使うようにするのとあわせて、

  1. 環境変数(VERSION)の設定したり、
  2. 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)まで♪

参考にしたサイトさま

Originally published at qiita.com

きらぷか@i18n補助ツール『トランスノート』開発者

フリーエンジニア/今はNuxt.js/いつかFlutter 受託&アプリ/Webサービス/ゲームを #個人開発 CS修士→SIer/R&D→フリー #paiza はAランクで満足/AtCoderしたい 仕事依頼やご相談はDMまで Kotlin/Python/Swift/Unity/Java/Haskell/DDD

Crieitは個人で開発中です。 興味がある方は是非記事の投稿をお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください!

ボードとは?

関連記事

コメント