中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

如何讓你的網(wǎng)站建設(shè)更具魅力?

2022-07-14    分類(lèi): 網(wǎng)站建設(shè)

如何讓你的網(wǎng)站建設(shè)更具魅力?  如何使用JAMstack構(gòu)建快速,安全的網(wǎng)站

在過(guò)去的幾個(gè)月中,JAMstack的接受度非常高,現(xiàn)在可以使用多種工具和服務(wù)來(lái)創(chuàng)建快速,動(dòng)態(tài)的Web應(yīng)用程序。JAMstack提倡原子部署,這種部署可以產(chǎn)生更頻繁,更輕松的部署周期,這意味著可以以簡(jiǎn)單的方式將最新更新交付給用戶(hù)。 

這改變了整個(gè)開(kāi)發(fā)流程。傳統(tǒng)上復(fù)雜的應(yīng)用程序和功能(例如身份驗(yàn)證,結(jié)帳,支付系統(tǒng)和媒體管理)現(xiàn)在可以通過(guò)幾行代碼來(lái)添加。此外,有了JAMstack,我們不再使用整體應(yīng)用程序,而是開(kāi)發(fā)較小的組件并將其原子部署到全局CDN(邊緣服務(wù)器)。開(kāi)發(fā)人員可以利用靜態(tài)網(wǎng)站生成器,并使用客戶(hù)端JavaScript和無(wú)數(shù)API來(lái)增強(qiáng)其網(wǎng)站,這意味著他們只需要關(guān)注一件事:開(kāi)發(fā)。無(wú)需處理與DevOps相關(guān)的任務(wù)。

在本文中,我們將回顧為什么您應(yīng)該關(guān)心這個(gè)新堆棧,以及如何最好地使用它來(lái)構(gòu)建更快,更安全的網(wǎng)站。您還可以在下面的蘇黎世前線會(huì)議上觀看我就此主題發(fā)表的演講。


塔馬斯Piros -釋放的JAM堆棧的力量從正面蘇黎世會(huì)議上Vimeo的。

什么是JAMstack?
jamstack:主頁(yè)
該JAMstack主頁(yè)。
JAMstack的JAM部分是作為堆棧核心的三個(gè)核心概念的首字母縮寫(xiě):JavaScript,API和標(biāo)記。但是,我們需要更深入地研究,以找出JAMstack的功能,以及如何一起使用這些技術(shù)來(lái)獲得出色的體驗(yàn)。

對(duì)JAMstack的更好描述(盡管更長(zhǎng))是,它使我們可以使用易于訪問(wèn)的服務(wù)來(lái)創(chuàng)建性能卓越的網(wǎng)站,并更快地部署它們,而無(wú)需原始服務(wù)器。

描述的最后一部分很好奇。為什么沒(méi)有原始服務(wù)器?

原始服務(wù)器是運(yùn)行應(yīng)用程序的服務(wù)器,通常是Web服務(wù)器,例如Apache或Express,它可以接受請(qǐng)求并提供響應(yīng)。

這樣做的關(guān)鍵之處在于,當(dāng)您考慮使用LAMP堆棧之類(lèi)的經(jīng)典設(shè)置時(shí),會(huì)在請(qǐng)求時(shí)生成頁(yè)面:用戶(hù)單擊鏈接,PHP文件被加載,該文件可能通過(guò)以下方式向數(shù)據(jù)庫(kù)發(fā)出請(qǐng)求: SQL查詢(xún)的一種方式,它收集數(shù)據(jù)并返回一些模板,然后將其渲染為HTML,這就是用戶(hù)所看到的最終產(chǎn)品。盡管有一些可用的緩存機(jī)制,但只要加載同一頁(yè)面,就會(huì)發(fā)生此過(guò)程,這意味著可能不需要每次都進(jìn)行數(shù)據(jù)查詢(xún)。但是,這個(gè)概念仍然存在:我們有在每個(gè)請(qǐng)求上執(zhí)行的服務(wù)器端代碼。

“換句話說(shuō),我們預(yù)先渲染了標(biāo)記,因此當(dāng)用戶(hù)請(qǐng)求頁(yè)面時(shí),根本不需要執(zhí)行服務(wù)器端代碼。”
使用JAMstack,我們的方法略有不同。如果我們?cè)跇?gòu)建時(shí)提前基于模板邏輯和結(jié)構(gòu)生成HTML文件怎么辦?換句話說(shuō),我們預(yù)先渲染了標(biāo)記,因此,當(dāng)用戶(hù)請(qǐng)求頁(yè)面時(shí),根本不需要執(zhí)行服務(wù)器端代碼。生成的HTML代碼可以放置到任何托管提供商的服務(wù)器,GitHub Pages上,甚至只是Amazon的S3上,并可以立即提供。

jamstack:流程圖
JAMstack網(wǎng)站是使用JavaScript,API和標(biāo)記構(gòu)建的,無(wú)需原始服務(wù)器即可提供服務(wù)。
模板圖標(biāo)
項(xiàng)目管理:規(guī)劃您的Web設(shè)計(jì)工作流程

將免費(fèi)的項(xiàng)目管理副本:規(guī)劃Web設(shè)計(jì)工作流發(fā)送到收件箱。

電子郵件

輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營(yíng)銷(xiāo)電子郵件。您可以隨時(shí)取消訂閱。注意:該指南不會(huì)發(fā)送到基于角色的電子郵件,例如info @,developer @等。

我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。
請(qǐng)注意,
我們的電子郵件最多可能需要15分鐘
才能到達(dá)您的收件箱。
使用靜態(tài)網(wǎng)站生成器進(jìn)行預(yù)渲染
為了實(shí)現(xiàn)我們之前討論的內(nèi)容,我們需要一個(gè)能夠預(yù)渲染標(biāo)記的工具。靜態(tài)站點(diǎn)生成器(SSG)正是為此目的而設(shè)計(jì)的。今天有一些靜態(tài)站點(diǎn)生成器,其中大多數(shù)基于流行的JavaScript前端框架,例如React(Gatsby,Next.js)和Vue(Nuxt.js,Gridsome)。還有一些不基于JavaScript的語(yǔ)言,例如Jekyll(Ruby)和Hugo(Go aka Golang),或者基于香草JavaScript的語(yǔ)言(11y)。

“我們?nèi)绾晤A(yù)渲染標(biāo)記與用于該工具的編程語(yǔ)言無(wú)關(guān)。”
此時(shí),當(dāng)我們談?wù)揜uby和Go for SSG時(shí),您可能想知道JAMstack中的“ J”為什么用于JavaScript。實(shí)際上,這是我大多數(shù)演講和講習(xí)班中提到的一個(gè)問(wèn)題。關(guān)鍵的區(qū)別在于靜態(tài)站點(diǎn)生成器與JAMstack中的“ M”(標(biāo)記)相關(guān)。我們?nèi)绾晤A(yù)渲染標(biāo)記與用于該工具的編程語(yǔ)言無(wú)關(guān)。“ J”(JavaScript)位是指我們可以使用各種JavaScript功能來(lái)增強(qiáng)應(yīng)用程序,但這是應(yīng)用程序中的“客戶(hù)端”。

這使我想到了JAM API中的第二個(gè)字母。

您可能還會(huì)喜歡: 業(yè)內(nèi)人士對(duì)Shopify所采用技術(shù)的關(guān)注。

蜜蜂
您可能以前曾經(jīng)聽(tīng)說(shuō)過(guò)“站在巨人的肩膀上”的說(shuō)法。我發(fā)現(xiàn)這句話在這里非常相關(guān)。讓我舉兩個(gè)例子。 

傳統(tǒng)上(想想LAMP堆棧),創(chuàng)建聯(lián)系表單有些挑戰(zhàn)。我們必須使用HTML和JavaScript創(chuàng)建一個(gè)表單,并且必須將數(shù)據(jù)從表單發(fā)送到后端(PHP)進(jìn)行處理。服務(wù)器不僅必須處理數(shù)據(jù),而且還必須配置并運(yùn)行郵件服務(wù)器,以便可以從前端發(fā)送處理了數(shù)據(jù)的電子郵件。這需要Unix知識(shí)以及其他編程技能。

另一個(gè)示例是身份驗(yàn)證。身份驗(yàn)證通常很困難:我們需要將用戶(hù)名/密碼組合存儲(chǔ)在數(shù)據(jù)庫(kù)中,確保其安全性,生成Cookie和令牌,并對(duì)它們進(jìn)行驗(yàn)證,等等。但是,當(dāng)數(shù)據(jù)庫(kù)負(fù)載增加兩倍時(shí),會(huì)發(fā)生什么?如果我們從未有過(guò)單獨(dú)的身份驗(yàn)證數(shù)據(jù)庫(kù)怎么辦?我們?nèi)绾畏謩e縮放它們?

如今,有很多服務(wù)可以幫助我們更輕松地創(chuàng)建聯(lián)系表和身份驗(yàn)證。Formspree是聯(lián)系表單的一個(gè)示例。我們需要做的就是在action表單中添加一個(gè)指向的屬性https:[email protected]/* */,僅此而已。

jamstack:formspree主頁(yè)
Formspree使添加聯(lián)系表單變得容易。
以同樣的方式,我們可以使用Netlify Identity或Auth0之類(lèi)的服務(wù)來(lái)向我們的應(yīng)用程序添加身份驗(yàn)證。

這一切的重點(diǎn)?有一些公司在其領(lǐng)域內(nèi)是專(zhuān)家。Formspree僅處理表單和表單集成,Auth0僅處理身份驗(yàn)證,Cloudinary僅處理圖像管理,Shopify處理電子商務(wù)和相關(guān)項(xiàng)目。這些公司(和其他公司)做一件事,并且做得很好。作為開(kāi)發(fā)人員,我們應(yīng)該利用他們的服務(wù)。這些組織幾乎專(zhuān)有地公開(kāi)了API或?yàn)槲覀兲峁┝四撤NSDK,可以很容易地與我們的代碼集成。

“這些公司(和其他公司)做一件事,并且做得很好。作為開(kāi)發(fā)人員,我們應(yīng)該利用其服務(wù)。”
在創(chuàng)建更復(fù)雜的應(yīng)用程序(例如電子商務(wù)網(wǎng)站)時(shí),問(wèn)題通常是整個(gè)應(yīng)用程序是一個(gè)巨大的,相互耦合的整體。管理界面與購(gòu)物車(chē),支付系統(tǒng),產(chǎn)品清單和評(píng)論一起綁定到了主應(yīng)用程序。一切都在一個(gè)屋檐下,管理小變化非常困難。使用JAMstack,我們可以打破僵局! 

借助Shopify 及其API等服務(wù),我們可以構(gòu)建一個(gè)脫鉤的電子商務(wù)平臺(tái)并靜態(tài)生成所有頁(yè)面,以提高性能。這意味著,當(dāng)用戶(hù)查看產(chǎn)品列表時(shí),我們不需要進(jìn)行數(shù)據(jù)庫(kù)查詢(xún)即可收集有關(guān)產(chǎn)品的數(shù)據(jù)-在構(gòu)建時(shí)就已經(jīng)為我們完成了。 

使用這種方法對(duì)應(yīng)用程序所做的更改要容易得多,因?yàn)闉榱烁漠a(chǎn)品清單中的某些內(nèi)容,我們不需要關(guān)閉整個(gè)站點(diǎn)。相反,我們可以進(jìn)行更改,重新生成頁(yè)面,并且所有內(nèi)容都將為我們發(fā)布到CDN(前提是我們使用的是Netlify之類(lèi)的服務(wù))。

jamstack:netlify主頁(yè)
該Netlify主頁(yè)。
Shopify為開(kāi)發(fā)人員提供了REST API和GraphQL API,以管理電子商務(wù)平臺(tái)的管理端,并且再次與應(yīng)用程序的其余部分完全分離。讓他們擔(dān)心擴(kuò)展,負(fù)載平衡,安全性以及其他通常不是我們要做的事情。

但是,如果我們?nèi)匀恍枰獔?zhí)行服務(wù)器端代碼怎么辦?我們可以利用功能即服務(wù)(無(wú)服務(wù)器功能),例如AWS Lambda或Google Cloud Functions。這些通常以JavaScript編寫(xiě),并且可以部署在供應(yīng)商的服務(wù)器上。最終,我們得到的只是一個(gè)端點(diǎn),可以從客戶(hù)端JavaScript代碼中調(diào)用該端點(diǎn),然后依次調(diào)用我們的函數(shù)并返回結(jié)果。

還有一個(gè)名為Serverless,Inc的組織,它是Serverless Framework的創(chuàng)建者,它封裝了所有其他服務(wù),并允許我們使用CLI工具將其部署到任何提供商。

您可能還會(huì)喜歡: 解構(gòu)Monolith:設(shè)計(jì)可大程度提高開(kāi)發(fā)人員生產(chǎn)力的軟件。

無(wú)頭CMS
通常,網(wǎng)站也需要數(shù)據(jù)??紤]一下博客或電子商務(wù)平臺(tái)之類(lèi)的東西。如果由于沒(méi)有在請(qǐng)求時(shí)渲染網(wǎng)站而沒(méi)有進(jìn)行數(shù)據(jù)庫(kù)查詢(xún)的選項(xiàng),那么如何確保仍然有可用數(shù)據(jù)? 

請(qǐng)遇到無(wú)頭的CMS?,F(xiàn)在,這個(gè)名字很好奇。什么是無(wú)頭CMS?考慮一下像WordPress這樣的經(jīng)典內(nèi)容管理系統(tǒng)。WordPress是一個(gè)前端和后端緊密耦合的整體應(yīng)用程序。沒(méi)有辦法將它們分開(kāi)。

另一方面,無(wú)頭CMS將數(shù)據(jù)層與表示層分開(kāi)-換句話說(shuō),數(shù)據(jù)是在一個(gè)地方進(jìn)行管理的,但是無(wú)頭CMS并不關(guān)心該數(shù)據(jù)如何呈現(xiàn)以及在何處呈現(xiàn)。 

請(qǐng)注意,一些無(wú)頭CMS提供程序確實(shí)提供了UI,但這只是可以管理基礎(chǔ)數(shù)據(jù)的管理界面-仍然不會(huì)影響將數(shù)據(jù)呈現(xiàn)給用戶(hù)的方式。

無(wú)頭CMS有兩種類(lèi)型:基于git和基于API?;贏PI的API允許我們將數(shù)據(jù)存儲(chǔ)在數(shù)據(jù)庫(kù)(SQL或NoSQL)中,并公開(kāi)可通過(guò)HTTP調(diào)用使用的API端點(diǎn)?;趃it的文件管理可在文件(例如Markdown)中找到的數(shù)據(jù),并通過(guò)YAML前題將元數(shù)據(jù)提供給markdown文件。元數(shù)據(jù)類(lèi)型是因素,例如帖子的作者或產(chǎn)品的價(jià)格。

部署
jamstack:火箭起飛 

我們已經(jīng)確定,作為開(kāi)發(fā)人員,我們需要使用工具(靜態(tài)站點(diǎn)生成器)預(yù)先渲染標(biāo)記,然后需要以某種方式將該站點(diǎn)部署到CDN網(wǎng)絡(luò)。

使用Netlify,AWS Amplify和Zeit Now之類(lèi)的服務(wù),可以通過(guò)多種方式發(fā)布和部署應(yīng)用程序。它們都將我們預(yù)先渲染的標(biāo)記推送到CDN。為什么這有用?CDN會(huì)自動(dòng)進(jìn)行負(fù)載平衡,并且它們將始終根據(jù)其地理位置將內(nèi)容提供給最近的請(qǐng)求用戶(hù)。

從歷史上看,使CDN緩存無(wú)效是很困難的。使CDN緩存無(wú)效意味著如果有新版本的應(yīng)用程序可用,則不應(yīng)將其緩存在CDN上的任何位置,因?yàn)槟承┰L問(wèn)者可能會(huì)獲取“陳舊”數(shù)據(jù)。如前所述,所有服務(wù)都會(huì)自動(dòng)處理緩存失效。

此外,從開(kāi)發(fā)人員的角度來(lái)看,可以非常迅速地部署原子更改。通常,工作流程如下所示:處理某些代碼的開(kāi)發(fā)人員執(zhí)行g(shù)it push和commit。部署服務(wù)會(huì)注意到有一個(gè)對(duì)git的新提交,并開(kāi)始了重新部署過(guò)程,該過(guò)程包括預(yù)渲染和再次使緩存無(wú)效。

“由于堆棧的預(yù)渲染,非原始服務(wù)器方面,默認(rèn)情況下站點(diǎn)將更快。”
諸如Netlify之類(lèi)的服務(wù)將使所有部署保持其歷史記錄,而只需單擊一下鼠標(biāo),即可回滾到該應(yīng)用程序的先前版本。

使用JAMstack對(duì)最終用戶(hù)和開(kāi)發(fā)人員也有許多其他好處。最終用戶(hù)顯然將能夠更快地接收到站點(diǎn)的更新/更改,并且由于堆棧中預(yù)先呈現(xiàn)的非原始服務(wù)器方面,因此默認(rèn)情況下站點(diǎn)將更快。

開(kāi)發(fā)人員和開(kāi)發(fā)團(tuán)隊(duì)可以從失去的原因中受益匪淺。首先,他們不需要管理服務(wù)器,并且與標(biāo)準(zhǔn)開(kāi)發(fā)相關(guān)的任務(wù)中添加的DevOps相關(guān)任務(wù)也更少。即使需要執(zhí)行一些服務(wù)器端代碼,無(wú)服務(wù)器功能也可以解決。

開(kāi)箱即用也可以使用JAMstack中的安全性。如果我們考慮一下LAMP堆棧,則涉及到許多服務(wù)器-應(yīng)用程序服務(wù)器,數(shù)據(jù)庫(kù)服務(wù)器-彼此連接,每個(gè)服務(wù)器執(zhí)行代碼和查詢(xún)。攻擊表面積相當(dāng)大。

在JAMstack中,沒(méi)有服務(wù)器端代碼執(zhí)行,默認(rèn)情況下,所有站點(diǎn)內(nèi)容都是“靜態(tài)”的,并且放置在CDN服務(wù)器上。攻擊表面積小得多。

不過(guò),請(qǐng)不要對(duì)術(shù)語(yǔ)“靜態(tài)”感到困惑。JAMstack使用稱(chēng)為靜態(tài)站點(diǎn)生成器的事實(shí)并不意味著該站點(diǎn)只是普通的舊HTML。

前面我們討論了“ J”(JavaScript)用于向應(yīng)用程序添加動(dòng)態(tài)功能和交互性??蛻?hù)端JavaScript可用于通過(guò)使用API??,使用SDK甚至增強(qiáng)水合作用來(lái)增強(qiáng)應(yīng)用程序。

您可能還會(huì)喜歡: 網(wǎng)站安全性:改善前端安全性而不被黑客入侵的13種方法。

對(duì)企業(yè)有利
企業(yè)還可以利用一個(gè)事實(shí),即使用JAMstack計(jì)劃項(xiàng)目要容易得多,并且成本也要高得多。無(wú)需購(gòu)買(mǎi)服務(wù)器即可輕松進(jìn)行成本計(jì)算,而可以購(gòu)買(mǎi)服務(wù)時(shí)間,這很容易計(jì)算。一般而言,由于無(wú)需管理物理服務(wù)器,因此對(duì)操作的依賴(lài)較少。 

此外,談到成本,必須提到開(kāi)發(fā)人員的成本。之前,我們提到過(guò)開(kāi)發(fā)人員如何專(zhuān)注于開(kāi)發(fā),這意味著他們的時(shí)間花在了應(yīng)該做的事情上,而不是在DevOps和其他與基礎(chǔ)架構(gòu)管理相關(guān)的任務(wù)上,這也節(jié)省了一些成本。

JAMstack不僅是為其帶來(lái)的開(kāi)發(fā)利益,而且為其可以提供的業(yè)務(wù)優(yōu)勢(shì)的可靠決定。

模板圖標(biāo)
項(xiàng)目管理:規(guī)劃您的Web設(shè)計(jì)工作流程

將免費(fèi)的項(xiàng)目管理副本:規(guī)劃Web設(shè)計(jì)工作流發(fā)送到收件箱。

電子郵件

輸入您的電子郵件地址
輸入您的電子郵件-我們還將向您發(fā)送與Shopify相關(guān)的營(yíng)銷(xiāo)電子郵件。您可以隨時(shí)取消訂閱。注意:該指南不會(huì)發(fā)送到基于角色的電子郵件,例如info @,developer @等。

我們的虛擬齒輪正在轉(zhuǎn)動(dòng)。
請(qǐng)注意,
我們的電子郵件最多可能需要15分鐘
才能到達(dá)您的收件箱。
天生充滿(mǎn)活力
JAMstack對(duì)最終用戶(hù)和開(kāi)發(fā)人員都有很多好處,當(dāng)然,您應(yīng)該嘗試一下它。它提供了更好的用戶(hù)體驗(yàn)和更好的整體開(kāi)發(fā)工作流程。不要害羞地利用一些出色的服務(wù)來(lái)使您本來(lái)應(yīng)該靜態(tài)的應(yīng)用程序自然地動(dòng)態(tài)化。

網(wǎng)頁(yè)標(biāo)題:如何讓你的網(wǎng)站建設(shè)更具魅力?
網(wǎng)頁(yè)URL:http://m.rwnh.cn/news42/178192.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供App設(shè)計(jì)、全網(wǎng)營(yíng)銷(xiāo)推廣、做網(wǎng)站網(wǎng)站維護(hù)、搜索引擎優(yōu)化、面包屑導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成都定制網(wǎng)站網(wǎng)頁(yè)設(shè)計(jì)

網(wǎng)站建設(shè)知識(shí)

各行業(yè)網(wǎng)站

龙川县| 澄城县| 洛阳市| 青田县| 北碚区| 万全县| 沁水县| 楚雄市| 合阳县| 蒲城县| 文昌市| 浮山县| 社旗县| 长兴县| 石棉县| 河池市| 汝阳县| 盐亭县| 合阳县| 临澧县| 霍州市| 古丈县| 镶黄旗| 武汉市| 左贡县| 乌什县| 大港区| 辽中县| 洮南市| 巴东县| 定南县| 松溪县| 崇阳县| 汪清县| 陇川县| 宜宾市| 阿城市| 麟游县| 北安市| 红河县| 高密市|