Fisco Bcos学习 - 区块链浏览器手动部署

前言

在区块链技术的应用与实践中，区块链浏览器是可视化查看链上数据、追踪交易记录的重要工具。FISCO BCOS提供的区块链浏览器，能直观展示区块信息、交易详情、合约数据等内容。相较于一键部署，手动部署可让我们更深入了解其架构与配置逻辑。本文将结合官方文档，详细介绍FISCO BCOS区块链浏览器的手动部署流程。

一、部署前提条件

在开始手动部署前，需确保环境满足以下要求：

1.1 环境检查

• Java环境：在终端执行java -version，确保输出JDK 8及以上版本信息。
• MySQL环境：执行mysql --version，确认MySQL版本符合要求，并提前创建好数据库及用户。
• Python环境：执行python --version，确认Python 3.4+已安装；使用pip3 install PyMySQL安装PyMySQL依赖。

二、代码获取与准备

1. 拉取代码：在终端执行以下命令，克隆FISCO BCOS区块链浏览器代码仓库：

git clone https://github.com/FISCO-BCOS/fisco-bcos-browser.git

2. 进入目录：切换至浏览器项目目录：

cd fisco-bcos-browser

3. 构建后端项目：进入server目录，执行Maven命令构建后端服务：

cd server
mvn clean package -Dmaven.test.skip=true

构建成功后，会在server/target目录生成可执行的jar包。
4. 构建前端项目：返回项目根目录，进入web目录，使用npm安装依赖并构建前端：

cd ..
cd web
npm install
npm run build

构建完成后，web/dist目录下会生成静态资源文件。

三、配置文件修改

3.1 后端配置

后端核心配置文件为server/src/main/resources/application.yml，主要修改以下内容：

• 数据库连接配置：

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/fisco_browser?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC
    username: root
    password: 123456

将url中的IP、端口、数据库名，以及username、password修改为实际的MySQL配置。

• 区块链节点连接配置：

fisco:
  groupId: 1
  peers:
    - 127.0.0.1:20200

根据实际区块链网络配置，修改groupId（群组ID）和peers（节点地址及端口）。

3.2 前端配置

前端配置文件为web/src/config/config.js，主要修改后端服务地址：

module.exports = {
  serverUrl: 'http://127.0.0.1:8080'
};

将serverUrl修改为部署后端服务的实际IP和端口。

四、服务部署与启动

4.1 数据库初始化

1. 使用MySQL客户端连接数据库，执行fisco-bcos-browser/deploy/sql/db_browser.sql文件，创建数据库表结构：

mysql -u root -p < sql/db_browser.sql

输入密码后，即可完成表结构初始化。
2. 若区块链网络已产生数据，可执行fisco-bcos-browser/deploy/sql/import_data.sql导入历史数据（可选）。

4.2 后端服务启动

进入server/target目录，执行以下命令启动后端服务：

java -jar fisco-bcos-browser-server.jar

服务启动后，默认监听8080端口（可在application.yml中修改）。

4.3 前端服务部署

将web/dist目录下的静态资源文件，部署到Web服务器（如Nginx、Apache）。以Nginx为例，修改Nginx配置文件：

server {
    listen 80;
    server_name your_domain.com;

    root /path/to/fisco-bcos-browser/web/dist;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

重启Nginx服务后，即可通过浏览器访问区块链浏览器。

五、访问与验证

在浏览器中输入http://127.0.0.1:5100/，即可进入区块链浏览器界面。可通过以下操作验证部署是否成功：

1. 查看区块信息：在“区块”页面，查看最新区块高度、时间戳等信息。
2. 查询交易记录：在“交易”页面，输入交易哈希或账户地址，查询交易详情。
3. 浏览合约数据：在“合约”页面，查看已部署合约的相关信息。