JAMstack 架構(gòu)正日益受到關(guān)注，它提供了一種高效的網(wǎng)站構(gòu)建方法。

JAMstack 的核心原則之一是預(yù)渲染。這意味著提前將網(wǎng)站生成一系列靜態(tài)資源，以便能夠以最快的速度、最低的開銷從 CDN 或其他優(yōu)化的靜態(tài)托管環(huán)境中為訪問者提供服務(wù)。

但是，如果我們要提前預(yù)生成網(wǎng)站，如何讓它們看起來更動(dòng)態(tài)呢？如何構(gòu)建需要頻繁更改的網(wǎng)站？如何處理用戶生成的內(nèi)容？

實(shí)際上，這正是無服務(wù)器函數(shù)的理想應(yīng)用場(chǎng)景。JAMstack 和無服務(wù)器是最佳拍檔，它們完美地互補(bǔ)。

本文將探討一種模式：在幾乎完全由用戶生成內(nèi)容組成的網(wǎng)站中，使用無服務(wù)器函數(shù)作為預(yù)生成頁(yè)面的后備方案。我們將采用一種樂觀 URL 路由技術(shù)，其中 404 頁(yè)面是一個(gè)無服務(wù)器函數(shù)，以便動(dòng)態(tài)添加無服務(wù)器渲染。

聽起來很復(fù)雜？也許吧。但它有效嗎？絕對(duì)有效！

您可以試用演示網(wǎng)站來了解這個(gè)用例。但是，請(qǐng)您看完本文后再試用。

您回來了？太好了，讓我們深入探討。

這個(gè)示例網(wǎng)站的理念是：讓您創(chuàng)建一條溫馨的留言和虛擬鼓勵(lì)信息發(fā)送給朋友。您可以撰寫留言，自定義棒棒糖（或冰棒，為我的美國(guó)朋友們準(zhǔn)備的）并獲得一個(gè) URL 與您的收件人分享。就這樣，您就照亮了他們的一天。還有什么比這更好的呢？

傳統(tǒng)上，我們會(huì)使用一些服務(wù)器端腳本處理表單提交，將新的棒棒糖（我們的用戶生成內(nèi)容）添加到數(shù)據(jù)庫(kù)中并生成唯一的 URL。然后，我們會(huì)使用更多服務(wù)器端邏輯來解析對(duì)這些頁(yè)面的請(qǐng)求，查詢數(shù)據(jù)庫(kù)以獲取填充頁(yè)面視圖所需的數(shù)據(jù)，使用合適的模板進(jìn)行渲染，并將其返回給用戶。

這看起來合情合理。

但擴(kuò)展的成本是多少？

技術(shù)架構(gòu)師和技術(shù)主管在評(píng)估項(xiàng)目范圍時(shí)經(jīng)常會(huì)遇到這個(gè)問題。他們需要規(guī)劃、支付和配置足夠的資源以應(yīng)對(duì)成功的情況。

這個(gè)虛擬棒棒糖網(wǎng)站并非普通的裝飾品。由于我們都想互相發(fā)送積極的信息，這個(gè)網(wǎng)站將讓我成為億萬富翁！隨著消息的傳播，流量水平將會(huì)飆升。我最好有一個(gè)好的策略來確保服務(wù)器能夠處理繁重的負(fù)載。我可能會(huì)添加一些緩存層、一些負(fù)載均衡器，并且我會(huì)設(shè)計(jì)我的數(shù)據(jù)庫(kù)和數(shù)據(jù)庫(kù)服務(wù)器，以便能夠分擔(dān)負(fù)載，而不會(huì)因?yàn)閯?chuàng)建和提供所有這些棒棒糖的需求而不堪重負(fù)。

但是……我不知道如何做這些事情。

而且我不知道添加這些基礎(chǔ)設(shè)施并保持其正常運(yùn)行的成本是多少。這很復(fù)雜。

這就是我喜歡通過預(yù)渲染盡可能簡(jiǎn)化我的托管的原因。

提供靜態(tài)頁(yè)面比從需要執(zhí)行一些邏輯以按需為每個(gè)訪問者生成視圖的 Web 服務(wù)器動(dòng)態(tài)提供頁(yè)面要簡(jiǎn)單得多且成本更低。

由于我們正在處理大量用戶生成的內(nèi)容，使用數(shù)據(jù)庫(kù)仍然是有意義的，但我不會(huì)自己管理它。相反，我將選擇許多可用作服務(wù)的數(shù)據(jù)庫(kù)選項(xiàng)之一。我將通過其 API 與它進(jìn)行交互。

我可能會(huì)選擇 Firebase、MongoDB 或其他任何數(shù)量的數(shù)據(jù)庫(kù)。Chris 在一個(gè)關(guān)于無服務(wù)器資源的優(yōu)秀網(wǎng)站上編譯了一些這樣的資源，非常值得探索。

在本例中，我選擇 Fauna 作為我的數(shù)據(jù)存儲(chǔ)。Fauna 提供了一個(gè)很好的 API 用于存儲(chǔ)和查詢數(shù)據(jù)。它是一個(gè)非 SQL 風(fēng)格的數(shù)據(jù)存儲(chǔ)，它正是我所需要的。

至關(guān)重要的是，F(xiàn)auna 已將提供數(shù)據(jù)庫(kù)服務(wù)作為一項(xiàng)完整的業(yè)務(wù)。他們擁有我永遠(yuǎn)不會(huì)擁有的深厚領(lǐng)域知識(shí)。通過使用像這樣的數(shù)據(jù)庫(kù)即服務(wù)提供商，我為我的項(xiàng)目繼承了一個(gè)專家數(shù)據(jù)服務(wù)團(tuán)隊(duì)，包括高可用性基礎(chǔ)設(shè)施、容量和合規(guī)性安心、熟練的支持工程師和豐富的文檔。

與其自己動(dòng)手，不如使用這樣的第三方服務(wù)，這就是它的優(yōu)勢(shì)所在。

架構(gòu) TL;DR

在處理概念驗(yàn)證時(shí)，我經(jīng)常發(fā)現(xiàn)自己會(huì)涂鴉一些邏輯流程。這是我為這個(gè)網(wǎng)站做的涂鴉：

以及一些解釋：

1. 用戶通過填寫普通的 HTML 表單創(chuàng)建一個(gè)新的棒棒糖。
2. 新內(nèi)容保存在數(shù)據(jù)庫(kù)中，并且它的提交會(huì)觸發(fā)新的站點(diǎn)生成和部署。
3. 站點(diǎn)部署完成后，新的棒棒糖將可通過唯一的 URL 訪問。它將是一個(gè)靜態(tài)頁(yè)面，從 CDN 快速提供服務(wù)，不依賴于數(shù)據(jù)庫(kù)查詢或服務(wù)器。
4. 在站點(diǎn)生成完成之前，任何新的棒棒糖都將無法作為靜態(tài)頁(yè)面訪問。對(duì)棒棒糖頁(yè)面的不成功請(qǐng)求將回退到一個(gè)頁(yè)面，該頁(yè)面通過動(dòng)態(tài)查詢數(shù)據(jù)庫(kù) API 來動(dòng)態(tài)生成棒棒糖頁(yè)面。

這種方法首先假設(shè)靜態(tài)/預(yù)生成的資源，然后在靜態(tài)視圖不可用時(shí)才回退到動(dòng)態(tài)渲染，正如聯(lián)合利華的 Markus Schork 所描述的那樣，這被稱為“靜態(tài)優(yōu)先”，我很喜歡這個(gè)說法。

更詳細(xì)的說明

您可以直接深入研究該網(wǎng)站的代碼（它是開源的，您可以隨意探索），或者我們可以進(jìn)一步討論。

您想更深入地挖掘并探索此示例的實(shí)現(xiàn)？好的，我將更詳細(xì)地解釋：

• 從數(shù)據(jù)庫(kù)獲取數(shù)據(jù)以生成每個(gè)頁(yè)面
• 使用無服務(wù)器函數(shù)將數(shù)據(jù)發(fā)布到數(shù)據(jù)庫(kù) API
• 觸發(fā)完整的站點(diǎn)重新生成
• 在尚未生成頁(yè)面時(shí)按需渲染

從數(shù)據(jù)庫(kù)生成頁(yè)面

稍后，我們將討論如何將數(shù)據(jù)發(fā)布到數(shù)據(jù)庫(kù)，但首先，讓我們假設(shè)數(shù)據(jù)庫(kù)中已經(jīng)有一些條目。我們將要生成一個(gè)包含每個(gè)條目的頁(yè)面的網(wǎng)站。

靜態(tài)網(wǎng)站生成器非常擅長(zhǎng)這一點(diǎn)。它們會(huì)處理數(shù)據(jù)，將其應(yīng)用于模板，并輸出準(zhǔn)備提供服務(wù)的 HTML 文件。我們可以為此示例使用任何生成器。我選擇 Eleventy 是因?yàn)樗鄬?duì)簡(jiǎn)單且站點(diǎn)生成速度快。

為了向 Eleventy 提供一些數(shù)據(jù)，我們有很多選擇。一種方法是提供一些返回結(jié)構(gòu)化數(shù)據(jù)的 JavaScript。這非常適合查詢數(shù)據(jù)庫(kù) API。

我們的 Eleventy 數(shù)據(jù)文件將如下所示：

<code>// 設(shè)置與 Fauna 數(shù)據(jù)庫(kù)的連接。
// 使用環(huán)境變量進(jìn)行身份驗(yàn)證
// 并訪問數(shù)據(jù)庫(kù)。
const faunadb = require('faunadb');
const q = faunadb.query;
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SERVER_SECRET
});

module.exports = () => {
  return new Promise((resolve, reject) => {
    // 獲取最新的 100,000 個(gè)條目（為了我們的示例）
    client.query(
      q.Paginate(q.Match(q.Ref("indexes/all_lollies")),{size:100000})
    ).then((response) => {
      // 獲取每個(gè)條目的所有數(shù)據(jù)
      const lollies = response.data;
      const getAllDataQuery = lollies.map((ref) => {
        return q.Get(ref);
      });
      return client.query(getAllDataQuery).then((ret) => {
        // 將數(shù)據(jù)發(fā)送回 Eleventy 以用于站點(diǎn)構(gòu)建
        resolve(ret);
      });
    }).catch((error) => {
      console.log("error", error);
      reject(error);
    });
  })
}</code>

我將此文件命名為 lollies.js，它將使其返回的所有數(shù)據(jù)在名為 lollies 的集合中可用于 Eleventy。

我們現(xiàn)在可以在我們的模板中使用該數(shù)據(jù)。如果您想查看獲取該數(shù)據(jù)并為每個(gè)項(xiàng)目生成頁(yè)面的代碼，您可以在代碼存儲(chǔ)庫(kù)中查看。

在沒有服務(wù)器的情況下提交和存儲(chǔ)數(shù)據(jù)

當(dāng)我們創(chuàng)建一個(gè)新的棒棒糖頁(yè)面時(shí)，我們需要將用戶內(nèi)容捕獲到數(shù)據(jù)庫(kù)中，以便將來可以將其用于填充給定 URL 的頁(yè)面。為此，我們使用傳統(tǒng)的 HTML 表單將數(shù)據(jù)發(fā)布到合適的表單處理程序。

表單看起來像這樣（或在存儲(chǔ)庫(kù)中查看完整代碼）：

<code></code>

收件人 說些好話 發(fā)件人 在我們的托管方案中沒有 Web 服務(wù)器，因此我們需要設(shè)計(jì)一個(gè)地方來處理從此表單提交的 HTTP 發(fā)布請(qǐng)求。這是無服務(wù)器函數(shù)的完美用例。我正在為此使用 Netlify Functions。如果您愿意，可以使用 AWS Lambda、Google Cloud 或 Azure Functions，但我喜歡 Netlify Functions 工作流程的簡(jiǎn)單性，以及它將我的無服務(wù)器 API 和我的 UI 保留在同一個(gè)代碼存儲(chǔ)庫(kù)中的事實(shí)。

避免將后端實(shí)現(xiàn)細(xì)節(jié)泄露到前端是一個(gè)好習(xí)慣。清晰的分離有助于使事情更易于移植和整潔。查看上面表單元素的 action 屬性。它將數(shù)據(jù)發(fā)布到我網(wǎng)站上名為 /new 的路徑，這并沒有真正暗示它將與哪個(gè)服務(wù)進(jìn)行通信。

我們可以使用重定向?qū)⑺酚傻轿覀兿矚g的任何服務(wù)。我將它發(fā)送到我將在此項(xiàng)目中配置的無服務(wù)器函數(shù)，但如果我們?cè)敢?，可以輕松地將其自定義為將數(shù)據(jù)發(fā)送到其他地方。Netlify 為我們提供了一個(gè)簡(jiǎn)單且高度優(yōu)化的重定向引擎，該引擎在 CDN 級(jí)別引導(dǎo)我們的流量，因此用戶可以非?？焖俚芈酚傻秸_的位置。

下面的重定向規(guī)則（位于我的項(xiàng)目的 netlify.toml 文件中）將 /new 的請(qǐng)求代理到由 Netlify Functions 托管的名為 newLolly.js 的無服務(wù)器函數(shù)。

<code># 將“new”URL 解析為函數(shù)
[[redirects]]
  from = "/new"
  to = "/.netlify/functions/newLolly"
  status = 200</code>

讓我們看看那個(gè)無服務(wù)器函數(shù)：

• 將新數(shù)據(jù)存儲(chǔ)到數(shù)據(jù)庫(kù)中，
• 為新頁(yè)面創(chuàng)建一個(gè)新的 URL，并
• 將用戶重定向到新創(chuàng)建的頁(yè)面，以便他們可以看到結(jié)果。

首先，我們將需要各種實(shí)用程序來解析表單數(shù)據(jù)、連接到 Fauna 數(shù)據(jù)庫(kù)并為新的棒棒糖創(chuàng)建易于閱讀的短唯一 ID。

<code>const faunadb = require('faunadb');          // 用于訪問 FaunaDB
const shortid = require('shortid');          // 生成短唯一 URL
const querystring = require('querystring');  // 幫助我們解析表單數(shù)據(jù)

// 首先，我們使用我們的數(shù)據(jù)庫(kù)設(shè)置一個(gè)新的連接。
// 環(huán)境變量幫助我們安全地連接
// 到正確的數(shù)據(jù)庫(kù)。
const q = faunadb.query
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SERVER_SECRET
})</code>

現(xiàn)在，我們將向處理對(duì)無服務(wù)器函數(shù)的請(qǐng)求添加一些代碼。處理程序函數(shù)將解析請(qǐng)求以從表單提交中獲取所需的數(shù)據(jù)，然后為新的棒棒糖生成一個(gè)唯一的 ID，然后將其作為新記錄創(chuàng)建到數(shù)據(jù)庫(kù)中。

<code>// 處理對(duì)無服務(wù)器函數(shù)的請(qǐng)求
exports.handler = (event, context, callback) => {

  // 獲取表單數(shù)據(jù)
  const data = querystring.parse(event.body);
  // 添加一個(gè)唯一的路徑 ID。并記下它 - 我們稍后會(huì)將用戶發(fā)送到它
  const uniquePath = shortid.generate();
  data.lollyPath = uniquePath;

  // 組裝準(zhǔn)備發(fā)送到數(shù)據(jù)庫(kù)的數(shù)據(jù)
  const lolly = {
    data: data
  };

  // 在 fauna db 中創(chuàng)建棒棒糖條目
  client.query(q.Create(q.Ref('classes/lollies'), lolly))
    .then((response) => {
      // 成功！將用戶重定向到此新棒棒糖頁(yè)面的唯一 URL
      return callback(null, {
        statusCode: 302,
        headers: {
          Location: `/lolly/${uniquePath}`,
        }
      });
    }).catch((error) => {
      console.log('error', error);
      // 錯(cuò)誤！返回帶有 statusCode 400 的錯(cuò)誤
      return callback(null, {
        statusCode: 400,
        body: JSON.stringify(error)
      });
    });

}</code>

讓我們檢查一下我們的進(jìn)度。我們有辦法在數(shù)據(jù)庫(kù)中創(chuàng)建新的棒棒糖頁(yè)面。我們還有一個(gè)自動(dòng)構(gòu)建，它會(huì)為我們的每個(gè)棒棒糖生成一個(gè)頁(yè)面。

為了確保為每個(gè)棒棒糖都有一套完整的預(yù)生成頁(yè)面，我們應(yīng)該在每次成功將新條目添加到數(shù)據(jù)庫(kù)時(shí)觸發(fā)重建。這非常容易做到。由于我們的靜態(tài)網(wǎng)站生成器，我們的構(gòu)建已經(jīng)自動(dòng)化了。我們只需要一種觸發(fā)它的方法。使用 Netlify，我們可以定義任意數(shù)量的構(gòu)建鉤子。它們是 Webhook，如果它們收到 HTTP POST 請(qǐng)求，它們將重建和部署我們的站點(diǎn)。這是我在 Netlify 的站點(diǎn)管理控制臺(tái)中創(chuàng)建的一個(gè)：

為了重新生成站點(diǎn)，包括數(shù)據(jù)庫(kù)中記錄的每個(gè)棒棒糖的頁(yè)面，我們可以在將新數(shù)據(jù)保存到數(shù)據(jù)庫(kù)后立即向此構(gòu)建鉤子發(fā)出 HTTP POST 請(qǐng)求。

這是執(zhí)行此操作的代碼：

<code>const axios = require('axios'); // 簡(jiǎn)化發(fā)出 HTTP POST 請(qǐng)求

// 觸發(fā)新的構(gòu)建以永久凍結(jié)此棒棒糖
axios.post('https://api.netlify.com/build_hooks/5d46fa20da4a1b70XXXXXXXXX')
.then(function (response) {
  // 在無服務(wù)器函數(shù)的日志中報(bào)告
  console.log(response);
})
.catch(function (error) {
  // 描述無服務(wù)器函數(shù)日志中的任何錯(cuò)誤
  console.log(error);
});</code>

您可以在完整的代碼中看到它，它已添加到數(shù)據(jù)庫(kù)插入的成功處理程序中。

如果我們?cè)谂c收件人分享新棒棒糖的 URL 之前，愿意等待構(gòu)建和部署完成，那么這一切都很好。但是我們并不耐心，當(dāng)我們獲得剛剛創(chuàng)建的棒棒糖的新 URL 時(shí)，我們會(huì)立即想要分享它。

遺憾的是，如果我們?cè)谡军c(diǎn)完成重新生成以包含新頁(yè)面之前訪問該 URL，我們將得到 404。但令人高興的是，我們可以利用這個(gè) 404。

樂觀 URL 路由和無服務(wù)器后備方案

使用自定義 404 路由，我們可以選擇將每個(gè)對(duì)棒棒糖頁(yè)面的失敗請(qǐng)求發(fā)送到一個(gè)頁(yè)面，該頁(yè)面可以直接在數(shù)據(jù)庫(kù)中查找棒棒糖數(shù)據(jù)。如果我們?cè)敢?，我們可以在客戶?JavaScript 中執(zhí)行此操作，但更好的方法是從無服務(wù)器函數(shù)動(dòng)態(tài)生成一個(gè)準(zhǔn)備查看的頁(yè)面。

方法如下：

首先，我們需要告訴所有希望訪問棒棒糖頁(yè)面的請(qǐng)求（這些請(qǐng)求返回為空）改為轉(zhuǎn)到我們的無服務(wù)器函數(shù)。我們通過在 Netlify 重定向配置中添加另一個(gè)規(guī)則來實(shí)現(xiàn)：

<code># 未找到的棒棒糖應(yīng)該直接代理到 API
[[redirects]]
  from = "/lolly/*"
  to = "/.netlify/functions/showLolly?id=:splat"
  status = 302</code>

只有在對(duì)棒棒糖頁(yè)面的請(qǐng)求沒有找到準(zhǔn)備提供服務(wù)的靜態(tài)頁(yè)面時(shí)，才會(huì)應(yīng)用此規(guī)則。它會(huì)創(chuàng)建一個(gè)臨時(shí)重定向 (HTTP 302) 到我們的無服務(wù)器函數(shù)，該函數(shù)看起來像這樣：

<code>const faunadb = require('faunadb');                  // 用于訪問 FaunaDB
const pageTemplate = require('./lollyTemplate.js');  // JS 模板文字

// 設(shè)置和授權(quán) Fauna DB 客戶端
const q = faunadb.query;
const client = new faunadb.Client({
  secret: process.env.FAUNADB_SERVER_SECRET
});

exports.handler = (event, context, callback) => {

  // 從請(qǐng)求中獲取棒棒糖 ID
  const path = event.queryStringParameters.id.replace("/", "");

  // 在 DB 中查找棒棒糖數(shù)據(jù)
  client.query(
    q.Get(q.Match(q.Index("lolly_by_path"), path))
  ).then((response) => {
    // 如果找到，則返回視圖
    return callback(null, {
      statusCode: 200,
      body: pageTemplate(response.data)
    });

  }).catch((error) => {
    // 未找到或發(fā)生錯(cuò)誤，將悲傷的用戶發(fā)送到通用錯(cuò)誤頁(yè)面
    console.log('Error:', error);
    return callback(null, {
      body: JSON.stringify(error),
      statusCode: 301,
      headers: {
        Location: `/melted/index.html`,
      }
    });
  });
}</code>

如果對(duì)任何其他頁(yè)面（不在站點(diǎn)的 /lolly/ 路徑內(nèi)）的請(qǐng)求返回 404，我們不會(huì)將該請(qǐng)求發(fā)送到我們的無服務(wù)器函數(shù)以檢查棒棒糖。我們可以直接將用戶發(fā)送到 404 頁(yè)面。我們的 netlify.toml 配置允許我們通過在文件中添加更多回退規(guī)則來定義任意數(shù)量的 404 路由級(jí)別。文件中第一個(gè)成功的匹配將被采用。

<code># 未找到的棒棒糖應(yīng)該直接代理到 API
[[redirects]]
  from = "/lolly/*"
  to = "/.netlify/functions/showLolly?id=:splat"
  status = 302

# 真正的 404 可以直接轉(zhuǎn)到這里：
[[redirects]]
  from = "/*"
  to = "/melted/index.html"
  status = 404</code>

我們完成了！我們現(xiàn)在擁有一個(gè)“靜態(tài)優(yōu)先”的站點(diǎn)，如果尚未將 URL 生成靜態(tài)文件，它將嘗試使用無服務(wù)器函數(shù)動(dòng)態(tài)渲染內(nèi)容。

非?？焖?！

支持更大規(guī)模

每次創(chuàng)建新條目時(shí)都觸發(fā)構(gòu)建以重新生成棒棒糖頁(yè)面的技術(shù)可能并非永遠(yuǎn)都是最佳的。雖然構(gòu)建的自動(dòng)化意味著重新部署站點(diǎn)非常簡(jiǎn)單，但當(dāng)我們開始變得非常受歡迎時(shí)，我們可能希望開始限制和優(yōu)化事情。（這只是時(shí)間問題，對(duì)吧？）

沒關(guān)系。當(dāng)我們要?jiǎng)?chuàng)建非常多的頁(yè)面并且數(shù)據(jù)庫(kù)中更頻繁地添加內(nèi)容時(shí)，以下是一些需要考慮的事情：

• 我們可以不為每個(gè)新條目觸發(fā)重建，而是可以將站點(diǎn)重建為計(jì)劃作業(yè)。也許這可以每小時(shí)或每天發(fā)生一次。
• 如果每天構(gòu)建一次，我們可能決定只為過去一天提交的新棒棒糖生成頁(yè)面，并將每天生成的頁(yè)面緩存以供將來使用。構(gòu)建中的這種邏輯將幫助我們支持大量棒棒糖頁(yè)面，而不會(huì)使構(gòu)建時(shí)間過長(zhǎng)。但我不會(huì)在這里討論構(gòu)建內(nèi)緩存。如果您好奇，您可以在 Netlify 社區(qū)論壇中詢問。

通過將靜態(tài)預(yù)生成資源與提供動(dòng)態(tài)渲染的無服務(wù)器后備方案相結(jié)合，我們可以滿足令人驚訝的廣泛用例——同時(shí)避免需要配置和維護(hù)大量動(dòng)態(tài)基礎(chǔ)設(shè)施。

您還可以使用這種“靜態(tài)優(yōu)先”方法滿足哪些其他用例？

以上是靜態(tài)第一：帶有無服務(wù)器渲染作為后備的預(yù)先生成的jamstack網(wǎng)站的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！