Build the front-end of the Blockchain explorer¶
This document introduce how to build fisco-bcos web service with vue-cli
framework.
It adapts to IE9 or above version, 360 browser of compatible version (IE9 core), 360 browser speed version and Chrome.
1. Functions¶
(1) The main functions include Blockchain overview, block and transaction details, node configuration and group switch.
(2) It supports groups switch, but it needs to configure groups and nodes before switching.
(3) The front-end also provides the transactions analysis function that you can upload and compile the contracts had deployed on the chain and it responds the decoded results which contains the inputs data and event of transactions.
(4) It provides Blockchain overview, block details, transaction and node configuration pages that execute each round of request om every 10 seconds.
2. Deploy¶
2.1 Environment dependency¶
Environment | Version |
---|---|
nginx | nginx1.6 or above version |
The detailed installation of nginx introduced in Appendix.
2.2 Pull code¶
Execute command: (when web and server are deployed on the same machine, it only needs to be pulled once)
git clone https://github.com/FISCO-BCOS/fisco-bcos-browser.git
# If you have network issue for exec the command above, please try:
git clone https://gitee.com/FISCO-BCOS/fisco-bcos-browser.git
cd fisco-bcos-browser
And then, place the dist
directory under ./web/fisco-bcos-browser-front/ into /data/app/web directory.
Tip: the directory can be cutomized, as long as the step 2 of nginx config file is kept the same.
2.3 Modify nginx config¶
The Nginx config file is placed under ./web/fisco-bcos-browser-front/doc, which can be used to replace the default nginx.conf generated by the Nginx;
Note:If nginx is installed as the way shown in Appendix, the config file route is /usr/local/nginx/conf/nginx.conf.
And then modify nginx.conf:
Modify IP address and the port for the web service.
Modify web file route and point to
dist
directory that belong to the pulled code.Modify IP and port of the server service. Please do not edit ‘/api’.
server {
listen 5100 default_server; #Step 1, web nginx monitoring port
server_name 192.168.0.1; #Step 2, web address, can be configured as domain name
location / {
root /data/app/web/dist; #Step 2, web file route
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
location /api {
proxy_pass http://192.168.0.1:5101/; #Step 3, IP and port of server (fisco-bcos-browser server)
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
2.4 Start nginx¶
(1) Start nginx
Execute command:
/usr/local/nginx/sbin/nginx
Start exception report and troubleshooting:
The log route is correct or not (error.log and access.log).
nginx service had been granted the access privilege or not.
(2) Access the Browser
Open the browser, typing the url with the web port and IP configured by nginx. For example: the url of the above config file is http:192.168.0.1:5100
(3) Configure the groups Once you access the web pages, you may need to configure group (group IP same as build chain) firstly, an then configure nodes (within the group)to get the blockchain information..
3. Appendix¶
3.1 Install nginx(Please check Network Tutorial)¶
3.1.1 Download nginx dependency¶
Please make sure you had installed gcc, pcre-devel, zlib-devel, openssl-develnginx before. If not, execute the command:
yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
Please note the permission issues when executing command. Or you may need to add sudo
.
3.1.2 Download nginx¶
nginx download address: https://nginx.org/download/(download the latest stable version) Or use the following command:
wget http://nginx.org/download/nginx-1.10.2.tar.gz (version changeable)
Then, move the downloaded package to /usr/local/
.
3.1.3 Install and test nginx¶
Decompress
tar -zxvf nginx-1.10.2.tar.gz
Enter nginx directory
cd nginx-1.10.2
Configure
./configure --prefix=/usr/local/nginx
Run the make
command
make
make install
Test the install with command:
/usr/local/nginx/sbin/nginx –t
You may get the output message if it is successful:
nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
Here are the common commands of nginx
/usr/local/nginx/sbin/nginx -s reload # reload config file
/usr/local/nginx/sbin/nginx -s reopen # restart Nginx
/usr/local/nginx/sbin/nginx -s stop # stop Nginx
ps -ef | grep nginx # view progress of nginx