設定 HTTP 快取行為

Jeff Posnick

本程式碼研究室將說明如何變更由 Pod 傳回的 HTTP 快取標頭 以 Node.js 為基礎的網路伺服器，執行 Express 服務 這個架構的重點在於並展示如何確認快取行為符合預期 實際上正在套用於 Chrome 開發人員工具的「網路」面板。

熟悉範例專案

您在範例專案中會使用的金鑰檔案如下：

  • server.js 包含為網頁應用程式提供服務的 Node.js 程式碼 內容。使用 Express 處理 HTTP 要求 和回應具體來說，express.static() 可用來 位於公開目錄的本機檔案，因此 serve-static 說明文件 這些步驟會相當實用
  • public/index.html 是網頁應用程式的 HTML。如同大部分的 HTML 檔案 都只是網址中任何版本資訊。
  • public/app.15261a07.js 和 public/style.391484cf.css 是網頁應用程式的 JavaScript 和 CSS 素材資源每個檔案的網址都包含一個雜湊 提供不同內容的對應建議index.html負責 來追蹤要載入哪個特定版本網址

設定 HTML 的快取標頭

回應不含版本管理資訊的網址要求時，請完成 請務必在回覆訊息中加入 Cache-Control: no-cache。此外， 最好在另外兩個回應標頭中設定： Last-Modified敬上 或 ETag。 index.html屬於這個類別。可分為兩個步驟

首先，Last-Modified 和 ETag 標頭是由 etag敬上 和 lastModified 設定選項這兩個選項實際上都是預設為 true HTTP 回應，因此在目前的設定中，您不必選擇啟用此功能 行為不過，您還是可以在設定中明確設定。

第二，您必須能新增 Cache-Control: no-cache 標頭，但 僅適用於 HTML 文件 (在此例中為 index.html)。您可以輕鬆建構 將此標頭設定成 setHeaders function、 然後檢查傳入的要求是否來自 HTML 文件。

  • 按一下「Remix to Edit」即可編輯專案。

server.js 中的靜態供應設定一開始為：

app.use(express.static('public'));
  • 進行上述變更，結果 如下所示：
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    }
  },
}));

為版本化網址設定快取標頭

回應內含 「指紋」或 並且不會變更其內容 您的回覆Cache-Control: max-age=31536000。app.15261a07.js和 style.391484cf.css 屬於這個類別。

我們在 setHeaders function敬上 新增其他邏輯， 要求是版本化網址，如果是，請加入 Cache-Control: max-age=31536000 標頭。

如要這麼做，最完善的方法是使用 規則運算式 看看所要求的資產是否與特定模式相符 才能得知雜湊的來源在本例中，範例專案一律為八 數字 0 到 9 的一組字元，以及小寫英文字母 a–f (即 十六進制字元)。雜湊 兩側一律以 . 字元分隔。

規則運算式 符合其中 則可以 new RegExp('\\.[0-9a-f]{8}\\.') 表示。

  • 修改 setHeaders 函式，如下所示：
app.use(express.static('public', {
  etag: true, // Just being explicit about the default.
  lastModified: true,  // Just being explicit about the default.
  setHeaders: (res, path) => {
    const hashRegExp = new RegExp('\\.[0-9a-f]{8}\\.');

    if (path.endsWith('.html')) {
      // All of the project's HTML files end in .html
      res.setHeader('Cache-Control', 'no-cache');
    } else if (hashRegExp.test(path)) {
      // If the RegExp matched, then we have a versioned URL.
      res.setHeader('Cache-Control', 'max-age=31536000');
    }
  },
}));

使用開發人員工具確認新行為

靜態檔案伺服器修改完成後，您就能確認 請在開發人員工具「Network」面板開啟並預覽運作中的應用程式，確認已設定正確的標頭。

  • 如要預覽網站，請按下「查看應用程式」。然後按下 全螢幕 全螢幕。

  • 自訂所需的資料欄 這個面板會顯示最相關的資訊，請在 欄標題：

設定開發人員工具網路面板。

此處需要留意的資料欄為 Name、Status、Cache-Control、 ETag 和 Last-Modified。

  • 開啟開發人員工具至「網路」面板，然後重新整理頁面。

網頁載入之後，您應該在「網路」面板中看到 如下所示：

網路面板欄。

第一列代表您要前往的 HTML 文件。如此一來 透過 Cache-Control: no-cache 放送。該要求的 HTTP 回應狀態 是 304。這個 這表示瀏覽器並非立刻使用快取的 HTML，而是 使用 Last-Modified 和 ETag，向網路伺服器發出 HTTP 要求 資訊，看看是否已更新 HTML 程式碼 快取。HTTP 304 回應表示 HTML 尚未更新。

接下來的兩列是版本化的 JavaScript 和 CSS 素材資源。請 就會看到它們的 Cache-Control: max-age=31536000 狀態，而 每個則為 200。 由於使用的設定，系統不會實際向 Node.js 伺服器，點選項目就會顯示其他詳細資料。 包括回應來自「(來自磁碟快取)」。

網路回應狀態為 200。

ETag 和 Last-mod 資料欄的實際值無關緊要。 請務必確認設定是否正確無誤

正在總結

完成本程式碼研究室中的步驟後，您現在可以瞭解如何 在以 Node.js 為基礎的網路伺服器中，使用 Express 來設定 HTTP 回應標頭。 以充分運用 HTTP 快取您也須確認這些步驟 您必須透過 Cloud Shell 中的 Chrome 開發人員工具