先來(lái)回顧下 Web2.0 應(yīng)用程序架構(gòu)，一圖勝千言：

圖示是對(duì)大多數(shù) Web 2.0 應(yīng)用程序如何工作的一個(gè)很好的抽象總結(jié)。以一個(gè)博客平臺(tái)為例：

首先，必須有一個(gè)地方來(lái)存儲(chǔ)基本數(shù)據(jù)，也就是數(shù)據(jù)庫(kù)；

其次，要有后端代碼（用 Node.js、Java 或 Python 等語(yǔ)言編寫），用于定義業(yè)務(wù)邏輯；

第三，還要有前端代碼（通常用 JavaScript、HTML 和 CSS 編寫），用于實(shí)現(xiàn) UI 和交互；

這些代碼都托管在集中式服務(wù)器上。

視角來(lái)到 Web3.0 ，消除了中心化，沒有集中式的數(shù)據(jù)庫(kù)，沒有存放后端代碼的集中式 Web 服務(wù)器。采用了區(qū)塊鏈技術(shù)，在互聯(lián)網(wǎng)上的匿名節(jié)點(diǎn)維護(hù)的分布式 狀態(tài)機(jī) 上構(gòu)建應(yīng)用程序。

“狀態(tài)機(jī)”是指一臺(tái)機(jī)器，它維護(hù)一些給定的程序狀態(tài)、以及該機(jī)器上允許的未來(lái)狀態(tài)，它具有非常嚴(yán)格的規(guī)則（即共識(shí)）來(lái)定義狀態(tài)如何轉(zhuǎn)換。

沒有一個(gè)實(shí)體可以控制這個(gè)分布式的狀態(tài)機(jī) —— 它由網(wǎng)絡(luò)中的每個(gè)人共同維護(hù)。

后端邏輯代碼化身成狀態(tài)機(jī)上的“智能合約”，這是開源的。

前端部分呢？暫按下不表，先看此時(shí)數(shù)據(jù)庫(kù)、后端代碼演變后的架構(gòu)圖：

再進(jìn)一步看看這些新穎的概念：

• ethereum blockchain，以太坊區(qū)塊鏈，被認(rèn)為是“世界計(jì)算器”，一個(gè)可全局訪問的狀態(tài)機(jī)，對(duì)等節(jié)點(diǎn)網(wǎng)絡(luò)維護(hù)，狀態(tài)的更改遵循共識(shí)規(guī)則的約束；只要是寫入了數(shù)據(jù)，就會(huì)被記錄，數(shù)據(jù)不能再更新回去；
• 智能合約：以太坊上運(yùn)行的程序，由高級(jí)編程語(yǔ)言編寫，例如 Solidity 或 Vyper；

任何人都能檢查智能合約是否合理；

• EVM 虛擬機(jī)，用于執(zhí)行合約的環(huán)境，相當(dāng)于執(zhí)行引擎；

OK，視野來(lái)到了前端代碼部分。按道理將，前端代碼應(yīng)該也是用智能合約的方式實(shí)現(xiàn)，實(shí)際上，它也確實(shí)如此，不過要更為復(fù)雜一點(diǎn)。

當(dāng)我們想要與區(qū)塊鏈上的數(shù)據(jù)和代碼進(jìn)行交互時(shí)，我們需要與這些節(jié)點(diǎn)中的一個(gè)進(jìn)行交互。任何節(jié)點(diǎn)都可以廣播在 EVM 上執(zhí)行交易的請(qǐng)求，然后礦工將執(zhí)行交易并將結(jié)果狀態(tài)更改傳播到網(wǎng)絡(luò)的其余部分。

廣播新交易有兩種方式：

1. 設(shè)置自己運(yùn)行以太坊區(qū)塊鏈軟件的節(jié)點(diǎn)；
2. 使用Infura、 Alchemy和Quicknode等第三方服務(wù)提供的節(jié)點(diǎn)；

借助第三方節(jié)點(diǎn)可能會(huì)更輕松一點(diǎn)，它的邏輯是這樣的：

每個(gè)以太坊客戶端（即提供者）都實(shí)現(xiàn)了 JSON-RPC 規(guī)范。這確保了當(dāng)前端應(yīng)用程序想要與區(qū)塊鏈交互時(shí)，有一組統(tǒng)一的方法。JSON-RPC 是一種無(wú)狀態(tài)、輕量級(jí)的遠(yuǎn)程過程調(diào)用 (RPC) 協(xié)議，定義了多個(gè)數(shù)據(jù)結(jié)構(gòu)及其處理規(guī)則。它與傳輸無(wú)關(guān)，可以通過多種方式傳輸，比如 HTTP、套接字、其它傳輸環(huán)境，JSON (RFC 4627) 作為一種數(shù)據(jù)格式。

還有一個(gè)很重要的東西，進(jìn)行身份驗(yàn)證，鑒權(quán)。通常借助 Metamask 實(shí)現(xiàn)；

Metamask 將用戶的私鑰存儲(chǔ)在瀏覽器中，每當(dāng)前端需要用戶簽署交易時(shí)，它就會(huì)調(diào)用 Metamask。

將所有內(nèi)容都存儲(chǔ)在區(qū)塊鏈上是很昂貴的，更新數(shù)據(jù)都需要收費(fèi)，所以還有一個(gè) 去中心化的鏈下存儲(chǔ)解決方案 —— IPFS/Swarm

架構(gòu)圖如下：

IPFS/Swarm 是用于存儲(chǔ)和訪問數(shù)據(jù)的分布式文件系統(tǒng)，你可以輕松去檢驗(yàn)它。

到目前為止，我們已經(jīng)討論了如何寫入，那如何讀取數(shù)據(jù)呢？

答案是借助 The Graph，The Graph 是一種鏈下索引解決方案，可以更輕松地查詢以太坊區(qū)塊鏈上的數(shù)據(jù)。前端工程師可以直接調(diào)用，這比傳統(tǒng)的 REST API 更具有吸引力。

現(xiàn)在，Dapp 架構(gòu)如下：

截至目前，架構(gòu)圖已初成雛形。

引申補(bǔ)充，完整的實(shí)現(xiàn)上圖這一架構(gòu)，成本有點(diǎn)高昂。所以，有一種流行的擴(kuò)展方案 —— L2 scaling 解決方案

在側(cè)鏈操作，然后提交到主鏈。

這樣既節(jié)約成本，又能達(dá)到目的，真是大聰明。

本瓜就把這個(gè)側(cè)鏈執(zhí)行，理解為代碼的預(yù)編譯吧，編譯后再放到瀏覽器引擎上做真正的編譯執(zhí)行。

• 附：以上框架的開發(fā)工具是 Hardhat

本篇就是完整的“淺析 Web3.0 DApp（去中心化應(yīng)用程序）設(shè)計(jì)架構(gòu)”。

以上！作為入門級(jí)架構(gòu)淺析，說(shuō)的真的很通透了！三連了！

我是掘金安東尼： 一名人氣前端技術(shù)博主（文章 100w 閱讀量）

終身寫作者（INFP 寫作人格）

堅(jiān)持與熱愛（簡(jiǎn)書打卡 1000 日）

我能陪你一起度過漫長(zhǎng)技術(shù)歲月嗎（以夢(mèng)為馬）

覺得不錯(cuò)，給個(gè)三連吧（這是我最大的動(dòng)力 ）