区块链浏览器搭建

嗨喽，大家好，不知道大家是否遇见过类似的问题。自己使用以太坊源代码搭建了一个开发网私链时，缺少了主网或者测试网的区块链浏览器这种区块链数据直观展示的工具。那么今天就带大家一起搭建一个适合自己的区块链浏览器使用。

一、环境准备

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"  --ws --ws.port 8546 --ws.api "db,eth,net,web3,personal,admin,miner" --ws.addr "0.0.0.0" --ws.origins "*" --miner.threads 1 --mine --allow-insecure-unlock &

参数详解：

• –http：启用HTTP-RPC服务器：
• –http.api：启用基于HTTP-RPC接口提供的API
• –http.port：设置http访问端口
• –http.addr：允许访问http端口的地址
• –http.corsdomain：启用从任何来源的访问
• –ws：启用websocket访问
• –ws.port：设置WebSocket访问端口
• –ws.addr：允许访问websocket端口的地址
• –ws.api：启用基于websocket接口提供的API
• –ws.origins：允许从网页访问服务器

注：节点启动时，必须添加以上对于网络连接的参数，进行允许访问节点的配置。

三、安装及启动浏览器

3.1 下载区块链浏览器代码

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

# git clone https://github.com/xops/expedition.git
Cloning into 'expedition'...
remote: Enumerating objects: 2687, done.
remote: Counting objects: 100% (211/211), done.
remote: Compressing objects: 100% (107/107), done.
remote: Total 2687 (delta 113), reused 177 (delta 93), pack-reused 2476
Receiving objects: 100% (2687/2687), 29.66 MiB | 11.85 MiB/s, done.
Resolving deltas: 100% (1577/1577), done.

3.2 添加连接以太网节点地址

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

# cd expedition
# vim ./src/hooks/useChainList.ts

添加以下节点访问地址
{
  name: "eth - 杰哥的技术杂货铺",
  network: "testnet",
  rpc: ["http://47.242.137.189:8545"],
},

• name：节点在浏览器中的显示名称（自定义）
• network：节点网络类型（自定义）
• rpc：节点rpc端口访问地址（该端口需要对访问的终端放通）

注：以下为链节点列表文件的全部内容

// import { useEffect } from "react";
// import { uniqBy } from "lodash";
import { IChain as Chain } from "../models/chain";
import React from "react";

// const mergeChainSets = (c1: Chain[], c2: Chain[]) => uniqBy(c1.concat(c2), "name");

export default function() {
  const [chains, setChains] = React.useState<Chain[]>([
    {
      name: "eth - 杰哥的技术杂货铺",
      network: "testnet",
      rpc: ["http://47.242.137.189:8545"],
    },
    {
      name: "Ethereum Classic",
      network: "mainnet",
      rpc: ["https://www.ethercluster.com/etc"],
    },
    {
      name: "Matic",
      network: "mainnet",
      rpc: ["https://rpc-mainnet.matic.network"],
    },
    {
      name: "Matic - Mumbai",
      network: "testnet",
      rpc: ["https://rpc-mumbai.matic.today"],
    },
  ]);

  // uncomment once we add 'chain list provider' concept. This list blows.

  // useEffect(() => {
  //   if (chains === undefined) {
  //     fetch("https://chainid.network/chains.json")
  //       .then((r) => r.json())
  //       .then((chainIdNetwork) => {
  //         const filteredChains = chainIdNetwork.filter((c: Chain) => {
  //           if (c.rpc.length === 0) {
  //             return false;
  //           }
  //           return true;
  //         });
  //         if (chains) {
  //           setChains(mergeChainSets(chains, filteredChains));
  //         } else {
  //           setChains(filteredChains);
  //         };
  //       });
  //   }
  // }, [chains]);

  return [chains, setChains];
}

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

3.3 安装expedition依赖

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

命令：npm install

# npm install

> keccak@3.0.1 install /opt/xops/expedition/node_modules/keccak
> node-gyp-build || exit 0
。。。。。。
Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)
。。。。。。
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.1.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
。。。。。。
added 2654 packages from 1764 contributors and audited 2667 packages in 52.069s
found 218 vulnerabilities (4 low, 58 moderate, 116 high, 40 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

3.4 启动区块链浏览器

进入expedition目录执行：npm start

如图所示：

# npm start

> @xops.net/expedition@1.0.2 start /opt/xops/expedition
> react-scripts start

ℹ ｢wds｣: Project is running at http://192.168.220.30/
ℹ ｢wds｣: webpack output is served from 
ℹ ｢wds｣: Content not from webpack is served from /opt/xops/expedition/public
ℹ ｢wds｣: 404s will fallback to /

Starting the development server...

Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating

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

• 修改远程访问浏览器端口

注：默认访问地址为： http://节点地址:3000/ ，使用下面的方式，设置port端口

MAC/linux环境：

$ PORT=8080 npm start
使用上面命令每次启动时都需要重新设置

如果想设置一次永久生效，使用下面的命令。
$ export PORT=8081  
$ npm start

Window环境：

Window系统环境，按照顺序这样进行：

set PORT=8081
npm start

注意：关闭命令行窗口后，端口的配置会失效

四、访问expedition区块链浏览器

访问 http://节点地址:3000/， 默认可以看到我们设置的节点信息，如果需要查看其它节点信息，可以点击右上角节点列表，切换节点网络。

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

• nohup启动

# cd expedition
# 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 expedition
# screen -S expedition npm start
5 S root     28927     1  0  80   0 - 32037 poll_s May26 ?        00:00:00 SCREEN -S explorer npm start
4 S root     28928 28927  0  80   0 - 199435 ep_pol May26 pts/0   00:00:00 npm

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

六、错误解决

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

# npm start

> @xops.net/expedition@1.0.2 start /opt/xops/expedition
> react-scripts start


? Something is already running on port 3000.

Would you like to run the app on another port instead? (Y/n) 

• 解决方法：

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

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

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

---

参考文档：

• github地址：https://github.com/xops/expedition
• 部署文档：https://bsnbase.com/static/tmpFile/bzsc/openper/7-3-3.html
• 以太坊官方文档：https://geth.ethereum.org/docs/rpc/server