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

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

首先，必須有一個地方來存儲基本數(shù)據(jù)，也就是數(shù)據(jù)庫；

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

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

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

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

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

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

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

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

再進一步看看這些新穎的概念：

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

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

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

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

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

廣播新交易有兩種方式：

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

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

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

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

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

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

架構(gòu)圖如下：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

堅持與熱愛（簡書打卡 1000 日）

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

覺得不錯，給個三連吧（這是我最大的動力 ）