Jamstack Architecture? ?? ? ?? ??? ?? ??? ? ??? ??? ???? ??? ?????.

Jamstack? ?? ?? ? ??? ?? ??????. ?? ??? ?? ???? ?? ???? CDN ?? ?? ??? ? ?? ??? ??? ???? ?? ?? ??? ?? ?? ?? ??? ???? ?? ? ? ??? ?????.

??? ??? ? ???? ?? ? ??? ??? ???? ??? ? ???? ? ????? ??? ? ? ????? ?? ??? ??? ? ???? ???? ??? ?????? ??? ?? ???? ???? ??? ??????

??? ??? ???? ????? ???? ?? ???? ???????. Jamstack? Serverless? ??? ????? ?? ???? ?????.

? ??? ??? ?????. ?? ???? ??? ?? ? ???? ??? ? ????? Serverless ??? ?? ?? ? ???? ?? ????? ?????. 404 ???? ???? ???? ???? ???? ???? ?? ? ??? URL ??? ??? ?????.

??? ? ???? ???. ??? ?????? ????? ??????!

?? ? ???? ?? ??? ?? ??? ?? ??? ? ????. ???? ??? ?? ? ??????.

?? ??? ??, ??? ?? ??.

? ?? ? ???? ??? ??? ????. ???? ?? ??? ???? ?? ?? ???? ?? ? ????. ???? ???? Lollipop (?? ?? ???? ?? ??? ???)? ??? ???? ???? ?? ? URL? ?? ? ????. ?? ??, ??? ??? ??? ?????. ???? ? ???

????? ?? ?? ? ????? ???? ?? ??? ???? ??????? ??? ??? (??? ?? ???)? ???? ?? ? URL? ?????. ?? ?? ? ?? ?? ?? ??? ?? ??? ???? ??? ?? ???? ??????? ???? ?????? ??? ??? ????? ????? ????? ???? ? ??? ???? ?????.

??? ????? ????.

??? ?? ??? ??????

?? ???? ?? ???? ????? ??? ??? ? ??? ??? ?????. ??? ???? ??? ???? ?? ??? ??? ??, ?? ? ???????.

? ?? Lollipop ? ???? ???? ??? ????. ?? ??? ?? ??? ? ???? ??? ???? ???? ???? ?? ?? ??? ?? ????! ??? ???? ??? ??? ?????. ??? ??? ??? ?? ? ? ????? ?? ??? ?? ? ????. ?? ??, ???? ???? ?? ? ? ??? ?????? ? ?????? ??? ???? ??? ?? ?? ??? ???? ?? ? ???? ???? ????? ?? ? ? ????.

???… ?? ?? ???? ??? ???.

??? ??? ???? ???? ?? ???? ? ?? ??? ??? ??? ??????. ??? ?????.

??? ??? ?? ????? ???? ??? ? ????? ????.

?? ???? ???? ?? ? ???? ???? ???? ???? ??? ?? ???? ?????.

??? ?? ??? ?? ???? ???? ?? ??? ??? ??????? ???? ?? ?????? ?? ????? ????. ?? ???? ??? ??? ?? ?????? ?? ? ??? ???????. API? ?? ?? ???????.

FireBase, MongoDB ?? ?? ?? ??????? ??? ? ????. Chris? ??? ??? ? ??? ???? ???? ?? ??? ? ????? ???????.

? ?? ?? ?? DataStore? ?????. ?? ?? ???? ???? ?????? ??? API? ?????. SQL? ?? ???? ??? ????? ??? ??? ????.

?????, ?? ?? ?????? ???? ?????? ??? ????? ??????. ??? ?? ?? ??? ?? ??? ??? ??? ????. ?? ?? ??????? ??? ?? ??? ?????? ? ??? ???, ?? ? ?? ?? ??, ?? ? ?? ???? ? ???? ??? ???? ???? ??? ??? ??? ?? ?? ????? .

???? ??, ?? ?? ?? ???? ??????.

???? tl; dr

?? ??? ?? ?, ?? ?? ??? ??? ???? ????. ? ? ???? ?? ?? ??? ??? ????.

??? ? ?? ?? :

1. ???? ???? HTML ??? ???? ??? ???? ????.
2. ??? ???? ??????? ???? ??? ??? ??? ?? ? ??? ?????.
3. ???? ???? ??? Lollipop? ?? ? URL? ?? ??? ? ? ????. ?????? ?? ? ??? ???? ?? CDN?? ??? ???? ?? ???????.
4. ??? ??? ?? ? ??? ?? ???? ??? Lollipop? ??? ? ? ????. Lollipop ???? ?? ??? ?? ?? ?????? API? ?? Lollipop ???? ???? ???? ???? ?????.

? ???? ?? ??/?? ?? ???? ?? ? ?? ????? ??? ? ?? ? ?? ????? ?????.

?? ??? ??

? ???? ??? ?? ??? ? ???? (?? ???? ????? ?? ? ? ??).

? ?? ??? ??? ??? ???? ????? ??, ? ??? ???????.

• ? ???? ????? ???????? ???? ?????
• ???? ??? ???? ???? ?????? API? ?????
• ??? ??? ??? ??????
• ???? ???? ?? ?? ??? ???

???????? ???? ?????

??? ???? ??????? ???? ??? ?? ????? ?? ??????? ?? ?? ??? ??? ?? ? ???. ? ??? ???? ?? ? ? ???? ?? ? ?????.

?? ? ??? ???? ??? ?? ?????. ??? ???? ???? ???? ???? HTML ??? ?? ? ????????. ? ???? ?? ???? ??? ? ????. ?? ??? ???? ?? ??? ??? ??? Eleventy? ??????.

Eleventy? ?? ???? ???? ???? ?? ??? ????. ? ?? ??? ??? ? ???? ???? JavaScript? ???? ????. ?????? API? ???? ? ????.

Eleventy Data ??? ??? ????.

 <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 個條目（為了我們的示例） client.query( q.Paginate(q.Match(q.Ref("indexes/all_lollies")),{size:100000}) ).then((response) => { // 獲取每個條目的所有數(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?? ????? Lollies?? ????? Eleventy?? ?? ? ??? ?? ???? ??? ? ????.

?? ????? ?? ???? ??? ? ????. ?? ???? ??? ? ????? ?? ???? ???? ??? ??? ?? ??????? ? ? ????.

???? ???? ???? ?????

? Lollipop ???? ?? ? ??? ???? ??????? ???? ?? ??? URL ???? ??? ? ??? ? ????. ?? ?? ?? HTML ??? ???? ???? ??? ?? ???? ?????.

??? ??? ???? (?? ???? ?? ??? ??????).

<code></code>

???? ???? ??? ??? ? ??? ??? ?? ??? ? ???? ???? ?? ? HTTP ?? ??? ?? ? ??? ??? ???????. ??? ???? ??? ??? ?? ?????. ?? ??? netlify ??? ???? ????. ??? ?? AWS Lambda, Google Cloud ?? Azure ??? ??? ? ??? NetLify ?? ?? ???? ???? ??? ?? ????? ???? API? UI? ????? ??? ??? ???.

??? ?? ?? ??? ??? ??? ???? ?? ?? ?????. ??? ??? ?? ? ?? ???? ???? ??? ? ??????. ?? ?? ??? ?? ??? ??????. ? ? ????? /new?? ??? ???? ?????, ?? ??? ?? ???? ???? ????? ????.

??? ????? ???? ?? ???? ??? ? ? ????. ? ?????? ?? ? Serverless ??? ???? ??? ??? ?? ?? ??? ???? ???? ?? ??? ??? ? ????. NetLify? ???? CDN ???? ???? ???? ???? ??? ? ???? ??? ???? ???? ??? ??? ?? ??? ??? ???? ? ????.

?? ???? ?? (? ????? NetLify.TOML ??? ??)? NetLify functions?? ??? ? NewLolly.js?? ???? ??? ?? ??? ??????.

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

???? ??? ?? ?????.

• ? ???? ??????? ????
• ? ???? ? URL? ????
• ??? ? ? ??? ???? ?? ?? ???? ????????.

??, ???? ?? ???? ?? ? ??????? ???? ??? Lollipop? ?? ?? ?? ?? ID? ????? ??? ????? ?????.

 <code>const faunadb = require('faunadb'); // 用于訪問FaunaDB const shortid = require('shortid'); // 生成短唯一URL const querystring = require('querystring'); // 幫助我們解析表單數(shù)據(jù)// 首先，我們使用我們的數(shù)據(jù)庫設(shè)置一個新的連接。 // 環(huán)境變量幫助我們安全地連接// 到正確的數(shù)據(jù)庫。 const q = faunadb.query const client = new faunadb.Client({ secret: process.env.FAUNADB_SERVER_SECRET })</code>

?? ???? ??? ???? ?? ??? ?? ??? ?????. ??? ??? ?? ???? ??? ???? ?? ??? ??? ?? ?? ? ?? ? Lollipop? ?? ? ID? ?? ? ?? ? ???? ??????? ?????.

 <code>// 處理對無服務(wù)器函數(shù)的請求exports.handler = (event, context, callback) => { // 獲取表單數(shù)據(jù)const data = querystring.parse(event.body); // 添加一個唯一的路徑ID。并記下它- 我們稍后會將用戶發(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); // 錯誤！返回帶有statusCode 400 的錯誤return callback(null, { statusCode: 400, body: JSON.stringify(error) }); }); }</code>

??? ?? ??? ?????. ???????? ??? Lollipop ???? ?? ??? ??? ????. ?? ?? ??? ?? ???? ???? ?? ??? ????.

? Lollipop? ?? ?? ?? ?? ??? ??? ??? ????? ? ??? ??????? ????? ?? ? ??? ? ??? ????????. ??? ?? ????. ?? ? ??? ??? ??? ??? ????????. ??? ??? ????? ? ?? ?? ? ??????. NetLify? ???? ??? ?? ??? ?? ? ? ????. ??? WebHooks?? HTTP Post ??? ??? ???? ???? ?????. ??? NetLify? ??? ?? ???? ?? ????.

??????? ?? ? ? Lollipop? ???? ???? ???? ???? ?? ? ???? ??????? ?? ? ??? ?? ??? HTTP Post ??? ?? ? ? ????.

??? ??? ?? ?????.

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

?????? ????? ???? ???? ?? ? ?? ??? ? ? ????.

??? Lollipop? URL? ???? ???? ?? ?? ? ??? ????? ????? ?? ????. ??? ??? ???? ??? ?? ?? ???? ?? ??? URL? ?? ? ?? ???? ????.

????, ???? ? ???? ????? ?? ??? ???? ?? URL? ????? 404? ?? ????. ???? 404? ?????? ????.

??? URL ??? ? ???? ?? ????

Custom 404 ???? ???? ??? ??? Lollipop ???? ?? ???????? Lollipop ???? ?? ?? ??? ???? ?? ? ????. ??? ?? ????? JavaScript ??? ??? ?? ? ? ??? ? ?? ??? ???? ???? ? ??? ? ???? ???? ???? ????.

? ??? ??? ????.

??, Lollipop ???? ?????? ?? ?? (? ??? ?? ??)? ?? ???? ???? ????? ???????. NetLify ???? ??? ?? ??? ?????? ?????.

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

? ??? Lollipop ???? ?? ??? ?? ???? ?? ? ????? ?? ???? ?????. ???? ??? ?? ???? (HTTP 302)? ????.

 <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) => { // 從請求中獲取棒棒糖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ā)生錯誤，將悲傷的用戶發(fā)送到通用錯誤頁面console.log('Error:', error); return callback(null, { body: JSON.stringify(error), statusCode: 301, headers: { Location: `/melted/index.html`, } }); }); }</code>

?? ??? (???? / lolly / path ??? ??)? ?? ??? 404? ???? ?? ?? ??? ???? ???? ??? ???? ???? ????. ??? ???? 404 ???? ?? ?? ? ????. NetLify.tOML ??? ?? ??? ? ?? ?? ??? ???? 404 ?? ??? ??? ?? ? ? ????. ??? ? ?? ???? ??? ?????.

 <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>

??? ???! ?? URL? ?? ??? ???? ?? ?? ???? ??? ???? ???? ???? ???????? "?? ? ??"???? ????.

?? ????!

? ? ??? ?????

??? ??? ?? ? ??? Lollipop ???? ?????? ??? ????? ??? ?? ??? ????. ??? ???? ???? ???? ?? ????? ?? ?????, ??? ?? ??? ?? ??? ? ??? ???? ?????? ?? ? ????. (?? ?? ??????)

???? ????. ???????? ?? ???? ??? ???? ? ?? ?? ? ? ???? ? ??? ??? ????.

• ? ???? ??? ????? ?? ???? ??? ???? ? ?? ? ? ????. ??? ??? ??? ?? ??? ? ? ??? ? ????.
• ??? ? ? ?? ? ?? ?? ?? ?? ? ??? ???? ???? ???? ???? ?? ???? ?? ?? ???? ???? ????? ??? ? ????. ?? ?? ??? ??? ?? ?? ??? ?? ?? ?? ??? ???? ???? ? ??????. ??? ?? ??? ?? ? ??? ?? ????? ?? ????. ??? ?? ??? NetLify ???? ???? ??? ? ????.

?? ?? ?? ???? ?? ???? ???? ???? ?? ???? ?????? ???? ???? ?? ??? ???? ?? ?? ???? ???? ?? ?? ? ??? ????.

? "?? ? ??"?? ??? ???? ?? ?? ?? ??? ??? ? ?????

? ??? ?? ?? : ???? ???? ???? ?? ?? ? Jamstack ???? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!