具有云功能的 Firebase 托管 - 如何 purge/refresh CDN 缓存？

Question

我正在按照此视频中的说明进行操作，到目前为止一切正常，直到我需要清除旧的 CDN HTML:

https://www.youtube.com/watch?v=7_2CJs_VZk4

到目前为止，我已经使用 Firebase Cloud Functions 创建了一个静态 HTML 页面，并将其存储在 Firebase 云存储中。每当我的 Firebase 数据库中的数据更新时，都会呈现一个新的和更新的静态 HTML 页面并将其保存到云存储中。

Firebase 托管服务于静态 HTML 页面，它存储在 CDN 上。根据上面的视频，我为 CDN 设置了很长的刷新时间，因为我只希望它在我对 Firebase 数据库中的数据进行更改时更新（如果没有进行任何更改则不刷新 CDN）

为此，更新页面时，必须清除存储在 CDN 上的旧 HTML 页面并替换为新的 HTML 页面。

时间 33:19 的视频建议以下代码：

const purgeUrl = `${ORIGIN}/${path}`;
await request(purgeUrl, { method: "PURGE" });

不幸的是，它似乎不起作用。我可以看到该页面已在 Cloud Storage 上更新，但是当我刷新 URL 时，新的 HTML 页面未显示。我可以显示新 HTML 的唯一方法是再次重新部署 firebase 代码（终端 - firebase 部署）。

这是我的代码（在 node.js 中）：

const ORIGIN = "examplesite-30ccf.firebaseapp.com/";

function getFacts(){
  return database.ref('/web app/test').once('value').then(snap =>snap.val());
}

exports.updateHomePage = functions.database.ref('/web app/test')
.onWrite((snap, context) => {

  return getFacts()
  .then(result1 => {
    console.log("result1", result1);
      return bucket
      .file('public_html/index.html')
      .save(HomePage(result1), {
        gzip: true,
        metadata: {
          contentType: "text/html; charset=utf-8",
          cacheControl: "max-age=300, s-maxage=31536000" // indef CDN cache since we purge manually
        }
      }); 
  }).then(doNotUse => {

    const purgeUrl = `${ORIGIN}`;
    console.log("purged URL", purgeUrl);
    return request(purgeUrl, { method: "PURGE" });
}).catch(error => {
      // Handle errors of asyncFunc1() and asyncFunc2()
  });

});`

Firebase Functions 日志中没有崩溃或异常。任何帮助深表感谢。谢谢

Answer 1

我在尝试解决另一个问题时无意中找到了答案。

您需要使用付费的 Firebase 计划才能进行外部 API 调用： https://firebase.google.com/pricing/

因此，只要您升级了您的计划，PURGE 方法就会起作用。这是允许您清除 CDN 的代码（Typescript 中的Node.js）：

import * as request from "request-promise";

const purgeUrl = `examplesite.com`;
await request(purgeUrl, { method: "PURGE" });

Answer 2

简单的执行一个curl命令：

curl -X PURGE https://yoursite.com/path

Answer 3

之前答案中提供的解决方案确实有效（一旦你弄清楚一件事）：

当您运行 Firebase Hosting 重定向到该函数时，您必须将 PURGE 请求指向托管域，而不是函数域（我花了一段时间才弄明白） .
您不能让您的域也设置 CloudFlare（他们不会转发 PURGE 请求）。
如果您确实使用 Cloudflare 设置了域，那么您必须执行以下操作：

您可以创建指向 you-project.web.app/whatever-path/here url 和 Header Host: your-domain.com

的 PURGE 请求

这将响应：

{
    "status": "ok",
    "id": "13932-1644936633-2"
}

这是我使用 [got][1]:

的代码示例

const firebaseHostingUrl = 'https://you-project.web.app'
const customHostingUrl = 'https://your-domain.com'

async function handleCachePurge(context) {
  const functionUrl = `${firebaseHostingUrl}/${context.request.path}`
  try {
    gotResponse = await got(functionUrl, {
      method: 'PURGE',
      headers: {
        Host: customHostingUrl,
      },
    })
  } catch (error) {
    console.error(error)
  }
}

CURL 版本为：

curl --request PURGE \
  --url https://you-project.web.app/whatever-path/here \
  --header 'Host: your-domain.com'

具有云功能的 Firebase 托管 - 如何 purge/refresh CDN 缓存？

Firebase hosting with cloud functions - how to purge/refresh CDN cache?

caching

cdn

firebase

firebase-hosting

google-cloud-functions