以太坊区块链浏览器搭建

• 注意1：此文所有操作一定要在root目录下，否则会出现很 多权限问题
• 参考文献：https://my.oschina.net/u/3050295/blog/2961125

1.安装Git

sudo apt-get update
sudo apt-get install -y make g++ wget ca-certificates

2.安装Nodejs

// 下载二进制源码包
      wget https://nodejs.org/dist/v8.11.4/node-v8.11.4-linux-x64.tar.xz
// 指定压缩包解压到/usr/local/目录下
sudo tar xvf node-v8.11.4-linux-x64.tar.xz -C /usr/local/
// 将node.js设置为全局可用
sudo vim /etc/profile
        export NODEJS_HOME="/usr/local/node-v8.11.4-linux-x64"
        export PATH="$PATH:$NODEJS_HOME/bin"
// 重新加载配置文件
. /etc/profile
// 查看版本
node -v
npm -v

3.下载eth区块链浏览器源码

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

4.用 npm 安装 bower

// cd explorer
    npm install -g bower -y
// 查看版本
   bower -v

5.初始化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

6.安装bower

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

7. 安装Geth

$ sudo apt-get install software-properties-common
$ sudo add-apt-repository -y ppa:ethereum/ethereum
$ sudo apt-get update
$ sudo apt-get install ethereum

8.安装GoLang

// 下载二进制源码包
wget https://dl.google.com/go/go1.11.6.linux-amd64.tar.gz

// 指定压缩包解压到/usr/local/目录下
sudo tar -zxvf go1.11.6.linux-amd64.tar.gz -C /usr/local/

//设置环境变量
sudo vim /etc/profile
export GOROOT="/usr/local/go"
export GOPATH="$HOME/go"
export GOBIN="$HOME/go/bin"
export PATH="$PATH:$GOROOT/bin:$GOPATH/bin"

//使环境变量立即生效
. /etc/profile

//查看版本
go version

//查看配置环境
go env

8.搭建以太坊私有链

注意：根目录都在root目录

1.下载go-ethereum

$ git clone https://github.com/ethereum/go-ethereum.git

2.编译

$ cd go-ethereum
$ make geth 

3.将 geth 添加到环境变量中 vi ~/.bashrc

export GETH="$GOPATH/src/github.com/ethereum/go-ethereum/build"
export PATH="$PATH:$GETH/bin"

4.然后执行 source ~/.bashrc，使配置生效。
5.检查是否安装成功

geth --help

如果输出一些帮助提示命令，则说明安装成功。

• 搭建私有链
  (1) 配置初始状态

要运行以太坊私有链，需要定义自己的创世区块，创世区块信息写在一个 JSON 格式的配置文件中。首先将下面的内容保存到一个 JSON 文件中，例如 genesis.json

$ mkdir ~/privatechain
$ cd privatechain
$ mkdir data0
$ vi genesis.json 

genesis.json 的代码

{
  "config": {
        "chainId": 10, 
        "homesteadBlock": 0,
        "eip155Block": 0,
        "eip158Block": 0
    },
  "alloc"      : {},
  "coinbase"   : "0x0000000000000000000000000000000000000000",
  "difficulty" : "0x20000",
  "extraData"  : "",
  "gasLimit"   : "0x2fefd8",
  "nonce"      : "0x0000000000000042",
  "mixhash"    : "0x0000000000000000000000000000000000000000000000000000000000000000",
  "parentHash" : "0x0000000000000000000000000000000000000000000000000000000000000000",
  "timestamp"  : "0x00"
}

其中，chainID 指定了独立的区块链网络 ID。网络 ID 在连接到其他节点的时候会用到，以太坊公网的网络 ID 是 1，为了不与公有链网络冲突，运行私有链节点的时候要指定自己的网络 ID。不同 ID 网络的节点无法相互连接。配置文件还对当前挖矿难度 difficulty、区块 Gas 消耗限制 gasLimit 等参数进行了设置。

(2) 初始化：写入创世区块

准备好创世区块配置文件后，需要初始化区块链，将上面的创世区块信息写入到区块链中。首先要新建一个目录用来存放区块链数据，假设新建的数据目录为 ~/privatechain/data0，genesis.json 保存在 ~/privatechain 中，此时目录结构应该是这样的：

privatechain
├── data0
└── genesis.json

执行初始化命令：

geth --datadir data0 init genesis.json

上面的命令的主体是 geth init，表示初始化区块链，命令可以带有选项和参数，其中 --datadir 选项后面跟一个目录名，这里为 data0，表示指定数据存放目录为 data0，genesis.json 是 init 命令的参数。
运行上面的命令，会读取 genesis.json 文件，根据其中的内容，将创世区块写入到区块链中。如果看到以下的输出内容，说明初始化成功了。

INFO [01-29|21:21:13] Maximum peer count                       ETH=25 LES=0 total=25
INFO [01-29|21:21:13] Allocated cache and file handles         database=/Users/fujinliang/privatechain/data0/geth/chaindata cache=16 handles=16
INFO [01-29|21:21:13] Writing custom genesis block 
INFO [01-29|21:21:13] Persisted trie from memory database      nodes=0 size=0.00B time=358.89µs gcnodes=0 gcsize=0.00B gctime=0s livenodes=1 livesize=0.00B
INFO [01-29|21:21:13] Successfully wrote genesis state         database=chaindata                                           hash=5e1fc7…d790e0
INFO [01-29|21:21:13] Allocated cache and file handles         database=/Users/fujinliang/privatechain/data0/geth/lightchaindata cache=16 handles=16
INFO [01-29|21:21:13] Writing custom genesis block 
INFO [01-29|21:21:13] Persisted trie from memory database      nodes=0 size=0.00B time=2.633µs  gcnodes=0 gcsize=0.00B gctime=0s livenodes=1 livesize=0.00B
INFO [01-29|21:21:13] Successfully wrote genesis state         database=lightchaindata                                           hash=5e1fc7…d790e0

初始化成功后，会在数据目录 data0 中生成 geth 和 keystore 两个文件夹，此时目录结构如下：

privatechain
├── data0
│   ├── geth
│   │   ├── chaindata
│   │   │   ├── 000001.log
│   │   │   ├── CURRENT
│   │   │   ├── LOCK
│   │   │   ├── LOG
│   │   │   └── MANIFEST-000000
│   │   └── lightchaindata
│   │       ├── 000001.log
│   │       ├── CURRENT
│   │       ├── LOCK
│   │       ├── LOG
│   │       └── MANIFEST-000000
│   └── keystore
└── genesis.json

其中 geth/chaindata 中存放的是区块数据，keystore 中存放的是账户数据。

(3) 启动私有链节点
笔者是在私链上搭建，所以与各位读者在命令上存在一些微小的差别，命令有差异的地方，笔者会标红

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

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

这里读者能正常启动geth节点就行，不需要其他任何操作。

上面命令的主体是 geth console，表示启动节点并进入交互式控制台，–datadir选项指定使用data0作为数据目录，--networkid 选项后面跟一个数字，这里是110，表示指定这个私有链的网络id为110。网络id在连接到其他节点的时候会用到，以太坊公网的网络id是1，为了不与公有链网络冲突，运行私有链节点的时候要指定自己的网络id。

运行上面的命令后，就启动了区块链节点并进入了该节点的控制台：

Welcome to the Geth JavaScript console!
instance: Geth/v1.8.10-unstable-ccc0debb/darwin-amd64/go1.10.2
modules: admin:1.0 debug:1.0 eth:1.0 miner:1.0 net:1.0 personal:1.0 rpc:1.0 txpool:1.0 web3:1.0

8.启动npm

    // cd expoerer
       npm start

目前为止，基本上就已经搭建完成了，在浏览器输入“localhost:8000”即可访问你搭建的区块链浏览器，如下图

9.让局域网内的其它主机也能访问

修改连接以太网节点地址为远程节点地址

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 

我操作一直是用虚拟机的，虚拟机配置的ip为192.168.1.201，我就把远程或本地以太坊节点ip这个改为我自己的192.168.1.201，这样在我的宿主机，也就是自己的电脑打开浏览器也就可以访问了，如下图：

文献的其他骚操作：

区块数据不显示的处理方式

笔者可能会感到迷惑，为什么不显示区块数据呢，难道是节点没连接上？并不是，事实是该源码需要的js库文件是访问的ajax.googleapis.com，如果你没有和（fan）谐（qiang）软件，就不能显示区块数据。

笔者给出以下解决方案：

1. 在项目中查找使用“ajax.googleapis.com”的地方，利用sublime提供的搜索功能，如下图

   
   
   

   image

2. 和（fan）谐（qiang）下载这两个文件的源码
   注：若没有fq资源，亦可以在网上找这两个文件的源码，应该都大同小异

3. 把下载的文件放到 explorer-master\app 目录下

4. 修改 script 引用的 src 路径

此刻读者只需要刷新一下浏览器页面，大功告成。

可能遇到的bug处理：