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:

  1. Modify IP address and the port for the web service.

  2. Modify web file route and point to dist directory that belong to the pulled code.

  3. 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:

  1. The log route is correct or not (error.log and access.log).

  2. 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