以太坊区块链浏览器搭建

write by donaldhan, 2020-05-19 10:01

Ethereum

引言

针对私有化的方式，如果链已经搭好，如何查看链上的数据，除了使用web3j命令行，和相关RPC接口拉取链上数据，有没有其他的方式呢，答案是有的，今天我们来看如何使用成熟的浏览器方案，搭建浏览器，已对链上的区块，交易，合约数据可视化的监控。

donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ pwd
/home/donaldhan/Documents/explorer/node-v8.11.4-linux-x64
donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ vim ~/.bashrc 
donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ source ~/.bashrc 
donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ node -v
v8.11.4
donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ 


donaldhan@Donaldhan:~/Documents/explorer/node-v8.11.4-linux-x64$ tail -n 10 ~/.bashrc 
export NODE_HOME=/home/donaldhan/Documents/explorer/node-v8.11.4-linux-x64
export PATH=${JAVA_HOME}/bin:${GO_HOME}/bin:${GETH_HOME}/bin:${NODE_HOME}/bin:$PATH

安装浏览器

下载eth区块链浏览器源码

donaldhan@Donaldhan:~/Documents/explorer$  git clone https://github.com/etherparty/explorer

首先需要进入到你刚刚下载explorer的目录

到下载explorer的目录，使用 npm 安装 bower

npm install -g bower -y

donaldhan@Donaldhan:~/Documents/explorer$ cd explorer/
donaldhan@Donaldhan:~/Documents/explorer/explorer$ ls
app  bower.json  e2e-tests  karma.conf.js  LICENSE  package.json  README.md
donaldhan@Donaldhan:~/Documents/explorer/explorer$ npm install -g bower -y
npm WARN deprecated bower@1.8.8: We don't recommend using Bower for new projects. Please consider Yarn and Webpack or Parcel. You can read how to migrate legacy project here: https://bower.io/blog/2017/how-to-migrate-away-from-bower/
/home/donaldhan/Documents/explorer/node-v8.11.4-linux-x64/bin/bower -> /home/donaldhan/Documents/explorer/node-v8.11.4-linux-x64/lib/node_modules/bower/bin/bower
+ bower@1.8.8
added 1 package in 5.805s
donaldhan@Donaldhan:~/Documents/explorer/explorer$ bower -v
1.8.8

初始化bower

初始化 bower

bower init

donaldhan@Donaldhan:~/Documents/explorer/explorer$ bower init
bower existing      The existing bower.json file will be used and filled in
? name angular-seed
? description A starter project for AngularJS
? main file 
? keywords 
? authors 
? license MIT
? homepage https://github.com/angular/angular-seed
? set currently installed components as dependencies? No
? add commonly ignored files to ignore list? Yes
? would you like to mark this package as private which prevents it from being accidentally published to the registry? Yes

{
  name: 'angular-seed',
  description: 'A starter project for AngularJS',
  version: '0.0.0',
  homepage: 'https://github.com/angular/angular-seed',
  license: 'MIT',
  private: true,
  dependencies: {
    angular: '~1.4.0',
    'angular-route': '~1.4.0',
    'angular-loader': '~1.4.0',
    'angular-mocks': '~1.4.0',
    'html5-boilerplate': '~5.2.0',
    web3: '~0.14.0',
    'angular-bootstrap': '~0.13.3'
  },
  main: '',
  ignore: [
    '**/.*',
    'node_modules',
    'bower_components',
    'app/bower_components',
    'test',
    'tests'
  ]
}

? Looks good? Yes
donaldhan@Donaldhan:~/Documents/explorer/explorer$ 

bower 安装

使用如下命令

bower install --allow-root

启动以太坊

具体参考如下文章： Geth搭建私链

启动explorer

在下载的explorer目录下执行 npm start

donaldhan@Donaldhan:~/Documents/explorer/explorer$ npm start
Starting up http-server, serving ./app on port: 8000
Hit CTRL-C to stop the server

访问http://192.168.230.128:8000，可以搜索看到我们的区块信息；

浏览器的使用

通过搜索框，根据交易地址，可以查看交易信息。

查看生成的区块 explorer_block

查看区块详情 explorer_block_details

根据交易地址，查看交易详情 explorer_transaction_details

如果我们先监控远程的以太坊节点或者，远程访问以太坊浏览器，我们可以修改相应的配置。

访问远程以太网节点

修改浏览的以太坊节点监听地址

root@cc-virtual-machine:~# cd explorer root@cc-virtual-machine:~/explorer# vim app/app.js 将 var eth_node_url = ‘http://localhost:8545’; // TODO: remote URL

var eth_node_url = ‘http://远程或本地以太坊节点ip:8545’;

远程访问浏览器地址

root@cc-virtual-machine:~# cd explorer
root@cc-virtual-machine:~/explorer# vim ./package.json
donaldhan@Donaldhan:~/Documents/explorer/explorer$ vim package.json 

修改浏览器绑定地址

"start": "http-server ./app -a localhost -p 8000 -c-1"

为

"start": "http-server ./app -a mainEtherNode -p 8000 -c-1"

我的hosts配置

root@Donaldhan:/home/donaldhan/Documents/explorer/explorer# cat /etc/hosts
0.0.1	localhost
0.0.1	Donaldhan
168.230.128 mainEtherNode

总结

explorer是一个基于node的以太坊浏览器，使用explorer我们界面化的查看区块链，及链上交易信息。

附

参看文献

explorer
以太坊区块链浏览器搭建
 以太坊区块链浏览器搭建

0xTTEPX

Just do it, deeply...

以太坊区块链浏览器搭建

引言

目录

环境准备

安装GIt

安装wget等

安装node