如何讓你的網站建設更具魅力？
2022-07-14 分類： 網站建設
如何讓你的網站建設更具魅力？ 如何使用JAMstack構建快速，安全的網站
在過去的幾個月中，JAMstack的接受度非常高，現在可以使用多種工具和服務來創建快速，動態的Web應用程序。JAMstack提倡原子部署，這種部署可以產生更頻繁，更輕松的部署周期，這意味著可以以簡單的方式將最新更新交付給用戶。
這改變了整個開發流程。傳統上復雜的應用程序和功能（例如身份驗證，結帳，支付系統和媒體管理）現在可以通過幾行代碼來添加。此外，有了JAMstack，我們不再使用整體應用程序，而是開發較小的組件并將其原子部署到全局CDN（邊緣服務器）。開發人員可以利用靜態網站生成器，并使用客戶端JavaScript和無數API來增強其網站，這意味著他們只需要關注一件事：開發。無需處理與DevOps相關的任務。
在本文中，我們將回顧為什么您應該關心這個新堆棧，以及如何最好地使用它來構建更快，更安全的網站。您還可以在下面的蘇黎世前線會議上觀看我就此主題發表的演講。
塔馬斯Piros -釋放的JAM堆棧的力量從正面蘇黎世會議上Vimeo的。
什么是JAMstack？
jamstack：主頁
該JAMstack主頁。
JAMstack的JAM部分是作為堆棧核心的三個核心概念的首字母縮寫：JavaScript，API和標記。但是，我們需要更深入地研究，以找出JAMstack的功能，以及如何一起使用這些技術來獲得出色的體驗。
對JAMstack的更好描述（盡管更長）是，它使我們可以使用易于訪問的服務來創建性能卓越的網站，并更快地部署它們，而無需原始服務器。
描述的最后一部分很好奇。為什么沒有原始服務器？
原始服務器是運行應用程序的服務器，通常是Web服務器，例如Apache或Express，它可以接受請求并提供響應。
這樣做的關鍵之處在于，當您考慮使用LAMP堆棧之類的經典設置時，會在請求時生成頁面：用戶單擊鏈接，PHP文件被加載，該文件可能通過以下方式向數據庫發出請求： SQL查詢的一種方式，它收集數據并返回一些模板，然后將其渲染為HTML，這就是用戶所看到的最終產品。盡管有一些可用的緩存機制，但只要加載同一頁面，就會發生此過程，這意味著可能不需要每次都進行數據查詢。但是，這個概念仍然存在：我們有在每個請求上執行的服務器端代碼。
“換句話說，我們預先渲染了標記，因此當用戶請求頁面時，根本不需要執行服務器端代碼。”
使用JAMstack，我們的方法略有不同。如果我們在構建時提前基于模板邏輯和結構生成HTML文件怎么辦？換句話說，我們預先渲染了標記，因此，當用戶請求頁面時，根本不需要執行服務器端代碼。生成的HTML代碼可以放置到任何托管提供商的服務器，GitHub Pages上，甚至只是Amazon的S3上，并可以立即提供。
jamstack：流程圖
JAMstack網站是使用JavaScript，API和標記構建的，無需原始服務器即可提供服務。
模板圖標
項目管理：規劃您的Web設計工作流程
將免費的項目管理副本：規劃Web設計工作流發送到收件箱。
電子郵件
輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發送與Shopify相關的營銷電子郵件。您可以隨時取消訂閱。注意：該指南不會發送到基于角色的電子郵件，例如info @，developer @等。
我們的虛擬齒輪正在轉動。
請注意，
我們的電子郵件最多可能需要15分鐘
才能到達您的收件箱。
使用靜態網站生成器進行預渲染
為了實現我們之前討論的內容，我們需要一個能夠預渲染標記的工具。靜態站點生成器（SSG）正是為此目的而設計的。今天有一些靜態站點生成器，其中大多數基于流行的JavaScript前端框架，例如React（Gatsby，Next.js）和Vue（Nuxt.js，Gridsome）。還有一些不基于JavaScript的語言，例如Jekyll（Ruby）和Hugo（Go aka Golang），或者基于香草JavaScript的語言（11y）。
“我們如何預渲染標記與用于該工具的編程語言無關。”
此時，當我們談論Ruby和Go for SSG時，您可能想知道JAMstack中的“ J”為什么用于JavaScript。實際上，這是我大多數演講和講習班中提到的一個問題。關鍵的區別在于靜態站點生成器與JAMstack中的“ M”（標記）相關。我們如何預渲染標記與用于該工具的編程語言無關。“ J”（JavaScript）位是指我們可以使用各種JavaScript功能來增強應用程序，但這是應用程序中的“客戶端”。
這使我想到了JAM API中的第二個字母。
您可能還會喜歡： 業內人士對Shopify所采用技術的關注。
蜜蜂
您可能以前曾經聽說過“站在巨人的肩膀上”的說法。我發現這句話在這里非常相關。讓我舉兩個例子。
傳統上（想想LAMP堆棧），創建聯系表單有些挑戰。我們必須使用HTML和JavaScript創建一個表單，并且必須將數據從表單發送到后端（PHP）進行處理。服務器不僅必須處理數據，而且還必須配置并運行郵件服務器，以便可以從前端發送處理了數據的電子郵件。這需要Unix知識以及其他編程技能。
另一個示例是身份驗證。身份驗證通常很困難：我們需要將用戶名/密碼組合存儲在數據庫中，確保其安全性，生成Cookie和令牌，并對它們進行驗證，等等。但是，當數據庫負載增加兩倍時，會發生什么？如果我們從未有過單獨的身份驗證數據庫怎么辦？我們如何分別縮放它們？
如今，有很多服務可以幫助我們更輕松地創建聯系表和身份驗證。Formspree是聯系表單的一個示例。我們需要做的就是在action表單中添加一個指向的屬性https:[email protected]/* */，僅此而已。
jamstack：formspree主頁
Formspree使添加聯系表單變得容易。
以同樣的方式，我們可以使用Netlify Identity或Auth0之類的服務來向我們的應用程序添加身份驗證。
這一切的重點？有一些公司在其領域內是專家。Formspree僅處理表單和表單集成，Auth0僅處理身份驗證，Cloudinary僅處理圖像管理，Shopify處理電子商務和相關項目。這些公司（和其他公司）做一件事，并且做得很好。作為開發人員，我們應該利用他們的服務。這些組織幾乎專有地公開了API或為我們提供了某種SDK，可以很容易地與我們的代碼集成。
“這些公司（和其他公司）做一件事，并且做得很好。作為開發人員，我們應該利用其服務。”
在創建更復雜的應用程序（例如電子商務網站）時，問題通常是整個應用程序是一個巨大的，相互耦合的整體。管理界面與購物車，支付系統，產品清單和評論一起綁定到了主應用程序。一切都在一個屋檐下，管理小變化非常困難。使用JAMstack，我們可以打破僵局！
借助Shopify 及其API等服務，我們可以構建一個脫鉤的電子商務平臺并靜態生成所有頁面，以提高性能。這意味著，當用戶查看產品列表時，我們不需要進行數據庫查詢即可收集有關產品的數據-在構建時就已經為我們完成了。
使用這種方法對應用程序所做的更改要容易得多，因為為了更改產品清單中的某些內容，我們不需要關閉整個站點。相反，我們可以進行更改，重新生成頁面，并且所有內容都將為我們發布到CDN（前提是我們使用的是Netlify之類的服務）。
jamstack：netlify主頁
該Netlify主頁。
Shopify為開發人員提供了REST API和GraphQL API，以管理電子商務平臺的管理端，并且再次與應用程序的其余部分完全分離。讓他們擔心擴展，負載平衡，安全性以及其他通常不是我們要做的事情。
但是，如果我們仍然需要執行服務器端代碼怎么辦？我們可以利用功能即服務（無服務器功能），例如AWS Lambda或Google Cloud Functions。這些通常以JavaScript編寫，并且可以部署在供應商的服務器上。最終，我們得到的只是一個端點，可以從客戶端JavaScript代碼中調用該端點，然后依次調用我們的函數并返回結果。
還有一個名為Serverless，Inc的組織，它是Serverless Framework的創建者，它封裝了所有其他服務，并允許我們使用CLI工具將其部署到任何提供商。
您可能還會喜歡： 解構Monolith：設計可大程度提高開發人員生產力的軟件。
無頭CMS
通常，網站也需要數據。考慮一下博客或電子商務平臺之類的東西。如果由于沒有在請求時渲染網站而沒有進行數據庫查詢的選項，那么如何確保仍然有可用數據？
請遇到無頭的CMS。現在，這個名字很好奇。什么是無頭CMS？考慮一下像WordPress這樣的經典內容管理系統。WordPress是一個前端和后端緊密耦合的整體應用程序。沒有辦法將它們分開。
另一方面，無頭CMS將數據層與表示層分開-換句話說，數據是在一個地方進行管理的，但是無頭CMS并不關心該數據如何呈現以及在何處呈現。
請注意，一些無頭CMS提供程序確實提供了UI，但這只是可以管理基礎數據的管理界面-仍然不會影響將數據呈現給用戶的方式。
無頭CMS有兩種類型：基于git和基于API。基于API的API允許我們將數據存儲在數據庫（SQL或NoSQL）中，并公開可通過HTTP調用使用的API端點。基于git的文件管理可在文件（例如Markdown）中找到的數據，并通過YAML前題將元數據提供給markdown文件。元數據類型是因素，例如帖子的作者或產品的價格。
部署
jamstack：火箭起飛
我們已經確定，作為開發人員，我們需要使用工具（靜態站點生成器）預先渲染標記，然后需要以某種方式將該站點部署到CDN網絡。
使用Netlify，AWS Amplify和Zeit Now之類的服務，可以通過多種方式發布和部署應用程序。它們都將我們預先渲染的標記推送到CDN。為什么這有用？CDN會自動進行負載平衡，并且它們將始終根據其地理位置將內容提供給最近的請求用戶。
從歷史上看，使CDN緩存無效是很困難的。使CDN緩存無效意味著如果有新版本的應用程序可用，則不應將其緩存在CDN上的任何位置，因為某些訪問者可能會獲取“陳舊”數據。如前所述，所有服務都會自動處理緩存失效。
此外，從開發人員的角度來看，可以非常迅速地部署原子更改。通常，工作流程如下所示：處理某些代碼的開發人員執行git push和commit。部署服務會注意到有一個對git的新提交，并開始了重新部署過程，該過程包括預渲染和再次使緩存無效。
“由于堆棧的預渲染，非原始服務器方面，默認情況下站點將更快。”
諸如Netlify之類的服務將使所有部署保持其歷史記錄，而只需單擊一下鼠標，即可回滾到該應用程序的先前版本。
使用JAMstack對最終用戶和開發人員也有許多其他好處。最終用戶顯然將能夠更快地接收到站點的更新/更改，并且由于堆棧中預先呈現的非原始服務器方面，因此默認情況下站點將更快。
開發人員和開發團隊可以從失去的原因中受益匪淺。首先，他們不需要管理服務器，并且與標準開發相關的任務中添加的DevOps相關任務也更少。即使需要執行一些服務器端代碼，無服務器功能也可以解決。
開箱即用也可以使用JAMstack中的安全性。如果我們考慮一下LAMP堆棧，則涉及到許多服務器-應用程序服務器，數據庫服務器-彼此連接，每個服務器執行代碼和查詢。攻擊表面積相當大。
在JAMstack中，沒有服務器端代碼執行，默認情況下，所有站點內容都是“靜態”的，并且放置在CDN服務器上。攻擊表面積小得多。
不過，請不要對術語“靜態”感到困惑。JAMstack使用稱為靜態站點生成器的事實并不意味著該站點只是普通的舊HTML。
前面我們討論了“ J”（JavaScript）用于向應用程序添加動態功能和交互性。客戶端JavaScript可用于通過使用API??，使用SDK甚至增強水合作用來增強應用程序。
您可能還會喜歡： 網站安全性：改善前端安全性而不被黑客入侵的13種方法。
對企業有利
企業還可以利用一個事實，即使用JAMstack計劃項目要容易得多，并且成本也要高得多。無需購買服務器即可輕松進行成本計算，而可以購買服務時間，這很容易計算。一般而言，由于無需管理物理服務器，因此對操作的依賴較少。
此外，談到成本，必須提到開發人員的成本。之前，我們提到過開發人員如何專注于開發，這意味著他們的時間花在了應該做的事情上，而不是在DevOps和其他與基礎架構管理相關的任務上，這也節省了一些成本。
JAMstack不僅是為其帶來的開發利益，而且為其可以提供的業務優勢的可靠決定。
模板圖標
項目管理：規劃您的Web設計工作流程
將免費的項目管理副本：規劃Web設計工作流發送到收件箱。
電子郵件
輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發送與Shopify相關的營銷電子郵件。您可以隨時取消訂閱。注意：該指南不會發送到基于角色的電子郵件，例如info @，developer @等。
我們的虛擬齒輪正在轉動。
請注意，
我們的電子郵件最多可能需要15分鐘
才能到達您的收件箱。
天生充滿活力
JAMstack對最終用戶和開發人員都有很多好處，當然，您應該嘗試一下它。它提供了更好的用戶體驗和更好的整體開發工作流程。不要害羞地利用一些出色的服務來使您本來應該靜態的應用程序自然地動態化。
網頁標題：如何讓你的網站建設更具魅力？
網頁URL：http://www.js-pz168.com/news42/178192.html
成都網站建設公司_創新互聯，為您提供App設計、全網營銷推廣、做網站、網站維護、搜索引擎優化、面包屑導航
聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯
猜你還喜歡下面的內容
- SEO十大命令 2022-07-14
- 怎么才能做好SEO 站內優化、競爭對手分析一個都不能少 2022-07-14
- seo博客優化:排名只是渠道，流量轉化才是王道 2022-07-14
- 企業網站建造做的好不好，要特別留意6個方面 2022-07-14
- 成都網站優化如何做在線教育優化？ 2022-07-14
- 新建網站怎么測試驗收 2022-07-14
