以太坊區塊鏈瀏覽器搭建

寫在前面：

    當然，讀者若要實踐，那么電腦上必須已經搭建好了geth，並且命令“geth version”能顯示版本信息；針對以太坊各個鏈（私鏈，公鏈，測試鏈）都可以用該篇文章來搭建區塊鏈瀏覽器，且步驟幾乎一模一樣，若有疑惑，或者遇到問題，請看文末筆者給出的郵箱地址，歡迎一起探討學習。

筆者搭建環境：ubuntu16 + npm、nodejs（安裝系統自帶版本）

 

 一、下載eth區塊鏈瀏覽器源碼

git clone https://github.com/etherparty/explorer

二、下載bower

# 首先需要進入到你剛剛下載explorer的目錄 cd 下載explorer的目錄(一般就是 cd explorer)  # 用 npm 安裝 bower npm install -g bower -y

三、初始化bower 

# 初始化 bower bower init # 注1問：命令報錯 /usr/bin/env:"node" 沒有那個文件或目錄 # 注1解：sudo ln -s /usr/bin/nodejs /usr/bin/node # 注2問：命令報錯 bower esudo cannot be run with sudo # 注2解：bower init --allow-root

在命令行一直回車，下一步即可。

四、bower 安裝

bower install --allow-root

bower install angular --save-dev --allow-root

上述兩句命令筆者未遇到任何錯誤。

選擇1，繼續完成安裝

到這里，bower工具就已經安裝成功了。

五、啟動geth節點

筆者是在私鏈上搭建，所以與各位讀者在命令上存在一些微小的差別，命令有差異的地方，筆者會標紅

geth --networkid 19303 --nodiscover --datadir "/root/eth_sync/private-chain/" --rpc --rpcapi "db,net,eth,web3,personal" --port 61916 --rpcport 8545 --rpccorsdomain '*' console

geth --networkid 19303 --nodiscover --datadir "/root/eth_sync/private-chain/" --rpc --rpcapi "db,net,eth,web3,personal" --port 61916 --rpcport 8545 --rpccorsdomain '*' console

這里讀者能正常啟動geth節點就行，不需要其他任何操作。

六、啟動npm

# 在下載的explorer目錄下執行 npm start

啟動的開始會有很多的 WARN 和 ERR，這個不用管，讓他自己跑

過不了一會兒就會恢復正常，

 目前為止，基本上就已經搭建完成了，在瀏覽器輸入“localhost:8000”即可訪問你搭建的區塊鏈瀏覽器，如下圖

七、區塊數據不顯示的處理方式

筆者可能會感到迷惑，為什么不顯示區塊數據呢，難道是節點沒連接上？並不是，事實是該源碼需要的js庫文件是訪問的ajax.googleapis.com，如果你沒有和（fan）諧（qiang）軟件，就不能顯示區塊數據。

筆者給出以下解決方案：

1. 在項目中查找使用“ajax.googleapis.com”的地方，利用sublime提供的搜索功能，如下圖
   
2. 和（fan）諧（qiang）下載這兩個文件的源碼
   注：若沒有fq資源，亦可以在網上找這兩個文件的源碼，應該都大同小異
3. 把下載的文件放到 explorer-master\app 目錄下
4. 修改 script 引用的 src 路徑

此刻讀者只需要刷新一下瀏覽器頁面，大功告成。

 

1-7步，只能在本地訪問。

八、讓局域網內的其它主機也能訪問

修改連接以太網節點地址為遠程節點地址

 

root@cc-virtual-machine:~# cd explorer root@cc-virtual-machine:~/explorer# vim app/app.js 將var eth_node_url = 'http://localhost:8545'; 修改為 var eth_node_url = 'http://遠程或本地以太坊節點ip:8545';

修改瀏覽器地址為本地IP地址

root@cc-virtual-machine:~# cd explorer root@cc-virtual-machine:~/explorer# vim ./package.json 把"start": "http-server ./app -a localhost -p 8000 -c-1", 改為"start": "http-server ./app -a 本地ip -p 8000