web-dev-qa-db-ja.com

Firebaseホスティング：SPAのindex.htmlのキャッシュを防ぐ方法

ほとんどすべてのパスが_index.html_に書き換えられるfirebaseでSPAをホストしています。私はwebpackハッシュベースのキャッシュ無効化を使用しているので、他のファイルではなく、常に_index.html_のキャッシュを防止したいです。そうするのは驚くほど難しいと思います。具体的には、私のファイルレイアウトは次のようになります

_/
├── index.html
├── login.html
├── js
│   ├── login.ba22ef2579d744b26c65.bundle.js
│   └── main.6d0ef60e45ae7a11063c.bundle.js
└── public
    └── favicon-16x16.ico
_

ドキュメントからこの引用を読む前に、私は_"sources": "index.html"_から始めました。

各定義には、 glob notation を使用する書き換えルールに関係なく、元の要求パスと一致するソースキーが必要です。

わかりましたので、これらのヘッダーが必要なファイルを指定する単純なグロブではなく、パスに1つが必要だと思います。ほとんどのパスはindex.htmlにリダイレクトされるため、これらのヘッダーを配置したくないすべてのパスを除外するグロブが必要です。

参考までに、私の_firebase.json_ホスティングセクションは次のようになります。

_{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "cleanUrls": true,
    "trailingSlash": false,
    "headers": [
      {
        "source": <<<WHAT-GOES-HERE?>>>,
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          },
          {
            "key": "Pragma",
            "value": "no-cache"
          },
          {
            "key": "Expires",
            "value": "0"
          }
        ]
      }
    ]
  }
}
_

そのため、index.htmlにリダイレクトし、キャッシュすべきではない例をいくつか示すために

_mysite.com  
mysite.com/  
mysite.com/foo/bar/baz  
mysite.com/index.html 
_

注：実際には使用されないため、最後の1つがキャッシュされた場合でも生きることができます。

そして、index.htmlにリダイレクトせず、キャッシュすべきでないもの

_**/*.* (ideally excluding index.html)
mysite.com/login  
_

私が自分で手に入れた最も近いものは**/!(login|*.*)です。これは上記のほとんどすべてで動作しますが、不可解にも_mysite.com_または_mysite.com/_では動作しません。これらの2ページはこのグロブと一致していません。その理由はわかりません。

firebasesingle-page-applicationcache-controlfirebase-hosting
18
zevdg

これが私が使用している設定です。ロジックは、images, css, jsなどのすべての静的ファイルにキャッシュを使用することです。他のすべての場合、つまり"source": "/**"はキャッシュをキャッシュなしに設定します。したがって、他のすべてのファイルについては、example.com、example.com/index.html、example.com/about-us、example.com/about-us.htmlキャッシュは適用されません。

{
  "hosting": {
    "public": "dist",
    "headers": [
      {
        "source": "/**",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "no-cache, no-store, must-revalidate"
          }
        ]
      },
      {
        "source":
          "**/*.@(jpg|jpeg|gif|png|svg|webp|js|css|eot|otf|ttf|ttc|woff|woff2|font.css)",
        "headers": [
          {
            "key": "Cache-Control",
            "value": "max-age=604800"
          }
        ]
      }
    ],
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"]
  }
}
37
Gijo Varghese