以太坊区块链浏览器搭建

嗨喽，大家好。继上一篇 区块链浏览器搭建 文章写完以后。继续为大家带来一篇区块链浏览器搭建的文章。希望大家能够根据以下文档解决自己的实际问题。

一、环境准备

1.1 安装git、wget、screen

yum -y install git wget screen

1.2 安装node

• 下载nodejs二进制包

 wget https://nodejs.org/download/release/v10.12.0/node-v10.12.0-linux-x64.tar.xz

• 解压压缩包

tar xvf node-v10.12.0-linux-x64.tar.xz 

• 更改包名

mv node-v10.12.0-linux-x64 /usr/local/nodejs

• 添加环境变量

#  vim /etc/profile
#nodejs
export NODE_HOME=/usr/local/nodejs
export PATH=$NODE_HOME/bin:$PATH

• 生效环境变量

source /etc/profile

• 验证nodejs是否部署成功

# node -v
v10.12.0

# npm -v
6.4.1

二、启动以太坊节点

部署以太坊节点此处不再赘述，若需要可查看以下文档：

• docker 部署以太坊私链v1.10.16版本
• docker 部署以太坊主网v1.10.16版本

注：可参考以下节点启动命令

geth --gcmode "archive" --networkid=666666 --http --http.api "db,eth,net,web3,personal,admin,miner" --http.corsdomain "*" --http.addr "0.0.0.0" --http.port "8545"  --miner.threads 1 --mine --allow-insecure-unlock & 

注：需要注意的是，在以太坊1.10.9版本中,已将将所有rpc选项替换为它们的http等效项：

• 启用HTTP-RPC服务器： –rpc => --http
• 启用基于HTTP-RPC接口提供的API： –rpcapi => --http.api
• 启用从任何来源的访问： –rpccorsdomain => --http.corsdomain

节点启动时，必须添加 –http.corsdomain 参数，进行允许访问地址的配置。

ETH、BSC、HECO等链节点需要添加此启动参数，Polygon节点启动时，不需要添加类似配置参数。

三、安装及启动浏览器

3.1 下载区块链浏览器代码

• 下载explorer区块链浏览器代码

#  git clone https://github.com/etherparty/explorer
Cloning into 'explorer'...
remote: Enumerating objects: 269, done.
remote: Total 269 (delta 0), reused 0 (delta 0), pack-reused 269
Receiving objects: 100% (269/269), 59.61 KiB | 0 bytes/s, done.
Resolving deltas: 100% (139/139), done.

3.2 修改explorer项目文件中的配置

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

# cd explorer
# vim app/app.js
 30 var eth_node_url = 'http://47.242.137.189:8545'; // TODO: remote URL

注：默认配置的url是http://localhost:8545，修改该配置连接一个有效节点（客户端可以连接节点的IP和端口）

• 修改远程访问浏览器地址

# vim package.json 
23 "start": "http-server ./app -a 0.0.0.0 -p 8000 -c-1",

注：修改explorer浏览器允许访问的地址及端口

3.3 下载bower工具

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

• npm 安装 bower

命令：npm install -g bower -y

# npm install -g bower -y
/usr/local/nodejs/bin/bower -> /usr/local/nodejs/lib/node_modules/bower/bin/bower
+ bower@1.8.14
updated 1 package in 3.299s

• 初始化 bower

命令：bower init （一直回车即可）

# bower init
bower ESUDO         Please do not run with sudo
。。。。。。
? 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
。。。。。。
? Looks good? Yes

• bower 安装

命令：bower install --allow-root

# bower install --allow-root
bower angular#~1.4.0            cached https://github.com/angular/bower-angular.git#1.4.14
。。。。。。
bignumber.js#9.0.2 app/bower_components/bignumber.js

• bower 安装

命令： bower install angular --save-dev --allow-root

#  bower install angular --save-dev --allow-root
bower angular#*                 cached 
。。。。。。
? Answer 1  // 输入1

3.4 启动区块链浏览器

进入explorer目录执行：npm start

如图所示：

# npm start

> EthereumExplorer@0.1.0 prestart /opt/llq/explorer
> npm install


> bufferutil@1.2.1 install /opt/llq/explorer/node_modules/bufferutil
> node-gyp rebuild
。。。。。。
> EthereumExplorer@0.1.0 start /opt/llq/explorer
> http-server ./app -a 0.0.0.0 -p 8000 -c-1

Starting up http-server, serving ./app on port: 8000
Hit CTRL-C to stop the server

注：启动的开始会有很多的 WARN 和 ERR，这个不用管，由项目继续运行即可

四、访问explorer区块链浏览器

• 访问explorer区块链浏览器

访问http://服务器地址:8000， 可以搜索看到我们的区块信息；

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

• 访问加速

访问地址：http://localhost:8000，这个时候会加载很慢，是因为js中使用了ajax.googleapis.com，它是国内谷歌公共库镜像，我们需要有一个可以提供相同服务的镜像来替换ajax.googleapis.com，例如镜像ajax.lug.ustc.edu.cn

只要把所有JS中的ajax.googleapis.com替换成ajax.lug.ustc.edu.cn即可正常使用。

使用以下命令进行全局批量替换即可：

sed -i "s/ajax.googleapis.com/ajax.lug.ustc.edu.cn/g" `grep "ajax.googleapis.com" -rl explorer/`

其中，ajax.googleapis.com是待被替换的字符串，ajax.lug.ustc.edu.cn是待替换的新字符串，grep操作主要是按照所给的路径查找ajax.googleapis.com，explorer/是所替换文件的路径；

-i 选项是直接在文件中替换，不在终端输出；

-r 选项是所给explorer/中的目录递归查找；

-l 选项是输出所有匹配到ajax.googleapis.com的文件；

注：修改镜像后，重启 npm start 启动explorer服务即可

五、后台启动explorer区块链浏览器

• nohup启动

# cd explorer
# nohup npm start &
# ps -elf |grep npm
0 S root     28337 28256  1  80   0 - 199434 ep_pol 16:55 pts/0   00:00:00 npm

注意：使用nohup启动后，然后把终端关闭（切断SSH连接）之后,发现该程序中断，主要原因为挂断(SIGHUP) 信号，我们应该使用exit推出终端即可。

• screen启动

# cd explorer
# screen -S explorer npm start
# ps -lf |grep npm
0 S root     28988 28897  0  80   0 - 28205 pipe_r 17:08 pts/1    00:00:00 grep --color=auto npm

注意：如果我们需要退出screen，但保持进程后台运行，需要使用Ctrl键+a+d 进行退出

六、错误解决

• 报错现象：无法启动项目,出现以下报错

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! EthereumExplorer@0.1.0 start: `http-server ./app -a 0.0.0.0 -p 8000 -c-1`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the EthereumExplorer@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2022-05-26T09_12_09_076Z-debug.log

• 解决方法：

使用以下命令检查程序进程是否已经存在

 # ps -lf |grep npm
 # netstat -lnptu|grep node

若项目进程已经存在，则关闭进程后，重启启动即可。

---

参考文档：

• github地址：https://github.com/etherparty/explorer
• 部署文档：https://eth-dev-docs.readthedocs.io/en/latest/explorer/index.html
• 部署文档：https://donaldhan.github.io/blockchain/2020/05/19/%E5%8C%BA%E5%9D%97%E9%93%BE%E6%B5%8F%E8%A7%88%E5%99%A8.html#%E5%AE%89%E8%A3%85%E6%B5%8F%E8%A7%88%E5%99%A8