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)用場景。 JAMstack 和無服務(wù)器是最佳拍檔，它們完美地互補(bǔ)。

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

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

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

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

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

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

這看起來合情合理。

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

技術(shù)架構(gòu)師和技術(shù)主管在評(píng)估項(xiàng)目範(fàn)圍時(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ù)庫和數(shù)據(jù)庫服務(wù)器，以便能夠分擔(dān)負(fù)載，而不會(huì)因?yàn)閯?chuàng)建和提供所有這些棒棒糖的需求而不堪重負(fù)。

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

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

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

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

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

我可能會(huì)選擇Firebase、MongoDB 或其他任何數(shù)量的數(shù)據(jù)庫。 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ù)庫服務(wù)作為一項(xiàng)完整的業(yè)務(wù)。他們擁有我永遠(yuǎn)不會(huì)擁有的深厚領(lǐng)域知識(shí)。通過使用像這樣的數(shù)據(jù)庫即服務(wù)提供商，我為我的項(xiàng)目繼承了一個(gè)專家數(shù)據(jù)服務(wù)團(tuán)隊(duì)，包括高可用性基礎(chǔ)設(shè)施、容量和合規(guī)性安心、熟練的支持工程師和豐富的文檔。

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

架構(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ù)庫中，並且它的提交會(huì)觸發(fā)新的站點(diǎn)生成和部署。
3. 站點(diǎn)部署完成後，新的棒棒糖將可通過唯一的URL 訪問。它將是一個(gè)靜態(tài)頁面，從CDN 快速提供服務(wù)，不依賴於數(shù)據(jù)庫查詢或服務(wù)器。
4. 在站點(diǎn)生成完成之前，任何新的棒棒糖都將無法作為靜態(tài)頁面訪問。對(duì)棒棒糖頁面的不成功請(qǐng)求將回退到一個(gè)頁面，該頁面通過動(dòng)態(tài)查詢數(shù)據(jù)庫API 來動(dòng)態(tài)生成棒棒糖頁面。

這種方法首先假設(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ù)庫獲取數(shù)據(jù)以生成每個(gè)頁面
• 使用無服務(wù)器函數(shù)將數(shù)據(jù)發(fā)佈到數(shù)據(jù)庫API
• 觸發(fā)完整的站點(diǎn)重新生成
• 在尚未生成頁面時(shí)按需渲染

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

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

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

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

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

 <code>// 設(shè)置與Fauna 數(shù)據(jù)庫的連接。 // 使用環(huán)境變量進(jìn)行身份驗(yàn)證// 并訪問數(shù)據(jù)庫。 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)目生成頁面的代碼，您可以在代碼存儲(chǔ)庫中查看。

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

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

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

<code></code>

收件人說些好話發(fā)件人在我們的託管方案中沒有Web 服務(wù)器，因此我們需要設(shè)計(jì)一個(gè)地方來處理從此表單提交的HTTP 發(fā)布請(qǐng)求。這是無服務(wù)器函數(shù)的完美用例。我正在為此使用Netlify Functions。如果您願(yuàn)意，可以使用AWS Lambda、Google Cloud 或Azure Functions，但我喜歡Netlify Functions 工作流程的簡單性，以及它將我的無服務(wù)器API 和我的UI 保留在同一個(gè)代碼存儲(chǔ)庫中的事實(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ù)，但如果我們願(yuàn)意，可以輕鬆地將其自定義為將數(shù)據(jù)發(fā)送到其他地方。 Netlify 為我們提供了一個(gè)簡單且高度優(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ù)庫中，
• 為新頁面創(chuàng)建一個(gè)新的URL，並
• 將用戶重定向到新創(chuàng)建的頁面，以便他們可以看到結(jié)果。

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

 <code>const faunadb = require('faunadb'); // 用于訪問FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 幫助我們解析表單數(shù)據(jù)// 首先，我們使用我們的數(shù)據(jù)庫設(shè)置一個(gè)新的連接。 // 環(huán)境變量幫助我們安全地連接// 到正確的數(shù)據(jù)庫。 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ù)庫中。

 <code>// 處理對(duì)無服務(wù)器函數(shù)的請(qǐng)求exports.handler = (event, context, callback) => { // 獲取表單數(shù)據(jù)const data = querystring.parse(event.body); // 添加一個(gè)唯一的路徑ID。并記下它- 我們稍后會(huì)將用戶發(fā)送到它c(diǎn)onst uniquePath = shortid.generate(); data.lollyPath = uniquePath; // 組裝準(zhǔn)備發(fā)送到數(shù)據(jù)庫的數(shù)據(jù)const lolly = { data: data }; // 在fauna db 中創(chuàng)建棒棒糖條目client.query(q.Create(q.Ref('classes/lollies'), lolly)) .then((response) => { // 成功！將用戶重定向到此新棒棒糖頁面的唯一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ù)庫中創(chuàng)建新的棒棒糖頁面。我們還有一個(gè)自動(dòng)構(gòu)建，它會(huì)為我們的每個(gè)棒棒糖生成一個(gè)頁面。

為了確保為每個(gè)棒棒糖都有一套完整的預(yù)生成頁面，我們應(yīng)該在每次成功將新條目添加到數(shù)據(jù)庫時(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ù)庫中記錄的每個(gè)棒棒糖的頁面，我們可以在將新數(shù)據(jù)保存到數(shù)據(jù)庫後立即向此構(gòu)建鉤子發(fā)出HTTP POST 請(qǐng)求。

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

 <code>const axios = require('axios'); // 簡化發(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ù)庫插入的成功處理程序中。

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

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

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

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

方法如下：

首先，我們需要告訴所有希望訪問棒棒糖頁面的請(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ì)棒棒糖頁面的請(qǐng)求沒有找到準(zhǔn)備提供服務(wù)的靜態(tài)頁面時(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ò)誤頁面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

如果對(duì)任何其他頁面（不在站點(diǎn)的/lolly/ 路徑內(nèi)）的請(qǐng)求返回404，我們不會(huì)將該請(qǐng)求發(fā)送到我們的無服務(wù)器函數(shù)以檢查棒棒糖。我們可以直接將用戶發(fā)送到404 頁面。我們的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)建以重新生成棒棒糖頁面的技術(shù)可能並非永遠(yuǎn)都是最佳的。雖然構(gòu)建的自動(dòng)化意味著重新部署站點(diǎn)非常簡單，但當(dāng)我們開始變得非常受歡迎時(shí)，我們可能希望開始限制和優(yōu)化事情。 （這只是時(shí)間問題，對(duì)吧？）

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

• 我們可以不為每個(gè)新條目觸發(fā)重建，而是可以將站點(diǎn)重建為計(jì)劃作業(yè)。也許這可以每小時(shí)或每天發(fā)生一次。
• 如果每天構(gòu)建一次，我們可能決定只為過去一天提交的新棒棒糖生成頁面，並將每天生成的頁面緩存以供將來使用。構(gòu)建中的這種邏輯將幫助我們支持大量棒棒糖頁面，而不會(huì)使構(gòu)建時(shí)間過長。但我不會(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)文章！