# 鍖哄潡閾炬祻瑙堝櫒

## 姒傝堪

鍖哄潡閾炬祻瑙堝櫒鎻愪緵浜嗗疄鏃舵祻瑙堛€佹煡璇㈠尯鍧楅摼淇℃伅鍜岀粺璁′俊鎭殑鍔熻兘銆備富瑕佺敱鍓嶇锛坄Web`灞曠ず锛夈€佸悗绔強鏁版嵁搴撲笁閮ㄥ垎缁勬垚銆傛暟鎹簱閲囩敤鐨勬槸`MySQL`锛屽悗绔噰鐢╣o璇█寮€鍙戯紝鍓嶇浣跨敤鐨勬槸`react`妗嗘灦銆�

## 瀹夎鎸囧崡

### 鐜渚濊禆
**golang**

鐗堟湰涓篳1.15`鎴栦互涓�

涓嬭浇鍦板潃锛歨ttps://golang.org/dl/

鑻ュ凡瀹夎锛岃閫氳繃鍛戒护鏌ョ湅鐗堟湰锛�

```bash
$ go version
```
**mysql**

鐗堟湰涓篳5.6`鎴栦互涓�

涓嬭浇鍦板潃锛歨ttps://dev.mysql.com/downloads/installer/

鑻ュ凡瀹夎锛岃閫氳繃鍛戒护鏌ョ湅鐗堟湰锛�

```bash
$ mysql -V
```

**npm**

`npm`鐗堟湰涓篳6.14.13`鎴栦互涓�
`node`鐗堟湰涓篳v14.17.0`鎴栦互涓�

涓嬭浇鍦板潃锛歨ttps://nodejs.org/en/

鑻ュ凡瀹夎锛岃閫氳繃鍛戒护鏌ョ湅鐗堟湰锛�

```bash
$ npm -v
$ node -v
```

**nginx**

鐗堟湰涓篳1.18.0`鎴栦互涓�

涓嬭浇鍦板潃锛歨ttp://nginx.org/en/download.html

鑻ュ凡瀹夎锛岃閫氳繃鍛戒护鏌ョ湅鐗堟湰锛�

```bash
$ nginx -v
```
瀹夎瀹屾垚鍚庯紝鍚姩nginx锛屽懡浠ゅ涓嬶細
```bash
$ service nginx start
```

### 鍚庣妯″潡閮ㄧ讲

#### 鍓嶇疆鐜

娴忚鍣ㄩ儴缃查渶瑕佷緷璧栦竴涓猔ChainMaker`杩愯鐜銆傚叿浣撶殑`ChainMaker`鐜瀹夎閮ㄧ讲璇峰弬鑰冨搴旂殑鏂囨。[銆婂揩閫熷叆闂ㄣ€媇(../tutorial/蹇€熷叆闂�.md)銆�

#### 浠ｇ爜涓嬭浇

涓嬭浇鍦板潃锛� https://git.chainmaker.org.cn/chainmaker/chainmaker-explorer

涓嬭浇浠ｇ爜锛�

```bash
$ git clone --recurse-submodules -b v1.1.1 https://git.chainmaker.org.cn/chainmaker/chainmaker-explorer.git
```

灏嗘寚瀹氱増鏈唬鐮�(鍖呮嫭瀛愭ā鍧梎chainmaker-sdk-go`)涓嬭浇鍒版湰鍦帮紝鍒囨崲瀛愰」鐩甡chainmaker-sdk-go`鐨勭増鏈负`chainmaker`鐨勫搴旂増鏈�

#### 鏁版嵁搴撳垵濮嬪寲

鏁版嵁搴揱sql`鏂囦欢淇濆瓨鍦╜docs`鐩綍涓紙`chainmaker-browser-db.sql`锛�,璇锋墽琛宍sql`鏂囦欢锛屽湪鏁版嵁搴撲腑鍒涘缓琛紙鏁版嵁搴撳悕鑷鎸囧畾锛屼笉闄愬埗锛夈€�


#### 閰嶇疆璋冩暣

娴忚鍣ㄩ厤缃枃浠讹細`configs/config.yml`锛屽畠鐨勯厤缃唴瀹瑰寘鎷洓閮ㄥ垎锛屼互涓嬫槸璇︾粏璇存槑锛�

```plain
web:
  address:       0.0.0.0    # Web鐩戝惉缃戝崱鍦板潃
  port:          9999       # Web鐩戝惉绔彛
  cross_domain:  true       # 鏄惁寮€鍚法鍩�

node:
  update_time: 300          # 閾惧拰鑺傜偣鏇存柊鏃堕棿
  sync_time:   60           # 鑺傜偣鏂紑杩炴帴鏃堕棿鍜屾柊澧為摼鏃堕棿
  chain_id:    chain1       # chainId锛屾墍鍦ㄩ摼ID锛堥摼ID鏄摼鐨勫敮涓€鏍囪瘑锛�
  org_id:      wx-org1.chainmaker.org   # 鎵€鍦ㄧ粍缁�
  tls:         true         # 鏄惁寮€鍚疶LS
  tls_host:    chainmaker.org    # TLS鍩熷悕
  ca_paths:    configs/crypto-config/wx-org1.chainmaker.org/ca  # CA璇佷功鎵€鍦ㄨ矾寰勶紙鍗虫枃浠跺す锛屽缓璁粷瀵硅矾寰勶級
  remotes:     127.0.0.1:12301   # 鑺傜偣鍦板潃锛屾牸寮忥細IP:PORT
  user:
    priv_key_file: configs/crypto-config/wx-org1.chainmaker.org/user/admin1/admin1.tls.key      # 绠＄悊鍛樼閽ワ紙鍏蜂綋浣嶇疆锛屽缓璁粷瀵硅矾寰勶級
    cert_file: configs/crypto-config/wx-org1.chainmaker.org/user/admin1/admin1.tls.crt          # 绠＄悊鍛樿瘉涔︼紙鍏蜂綋浣嶇疆锛屽缓璁粷瀵硅矾寰勶級

db:
  url:    (127.0.0.1:3306)/chainmaker_browser_db   # 鏁版嵁搴撳湴鍧€锛屾牸寮忥細(IP)/DBName
  user:   chainmaker            # 鏁版嵁搴撶櫥褰曠敤鎴�
  passwd: Baec&chainmaker       # 鏁版嵁搴撶櫥褰曞瘑鐮�

log:
  log_level_default: INFO       # 榛樿鏃ュ織绾у埆
  log_levels:
    core: INFO
    net: INFO
  file_path: ../log/web.log     # 鏃ュ織璺緞
  max_age: 365                  # 鏃ュ織鏈€闀夸繚瀛樻椂闂达紝鍗曚綅锛氬ぉ
  max_size: 100                 # 鏃ュ織鏈€澶т繚瀛樺ぇ灏忥紝鍗曚綅mb
  rotation_time: 1              # 鏃ュ織婊氬姩鏃堕棿锛屽崟浣嶏細灏忔椂
  log_in_console: false         # 鏄惁灞曠ず鏃ュ織鍒扮粓绔紝浠呴檺浜庤皟璇曚娇鐢�
  show_color: true              # 鏄惁鎵撳嵃棰滆壊鏃ュ織

```

#### 鍚姩杩愯

鍙€氳繃`scripts/startup.sh`鑷媺璧峰悗鍙帮紝鎵ц瀹岃剼鏈悗锛屽彲浠ラ€氳繃鏌ョ湅`output`妫€鏌ュ悗鍙版槸鍚﹀惎鍔紝濡傛湭鍚姩锛屼篃鍙煡鐪嬪師鍥犮€傝剼鏈腑闇€瑕侀厤缃搴旂殑閰嶇疆鏂囦欢鎵€鍦ㄨ矾寰勫強鍚姩鏂囦欢锛岃鎸夌収瀹為檯鎯呭喌杩涜璁剧疆锛屽涓嬶細

```shell
BROWSER_BIN="chainmaker-browser.bin"

go build -o ${BROWSER_BIN} ../src
echo "Success build chainmaker-browser.bin"
CONFIG_PATH="../configs/"
nohup ./${BROWSER_BIN} -config ${CONFIG_PATH} >output 2>&1 &
```

鍙€氳繃`scripts/shutdown.sh`灏嗚鏈嶅姟鍋滄帀锛屽搴旂殑锛屽鏋滃惎鍔ㄦ枃浠舵湁鍙樺寲锛屼篃闇€瑕佸湪鑴氭湰涓繘琛岃皟鏁达紝濡備笅锛�

```shell
BROWSER_BIN="chainmaker-browser.bin"
```

### 鍓嶇妯″潡閮ㄧ讲

#### 浠ｇ爜涓嬭浇

涓嬭浇鍦板潃锛� https://git.chainmaker.org.cn/chainmaker/chainmaker-explorer-web

#### 閰嶇疆璋冩暣

杩涘叆浠ｇ爜`public`鐩綍锛屼慨鏀筦config.js`涓殑鍓嶇璇锋眰鍦板潃锛屽彲鏍规嵁鍚庡彴鍦板潃鑷閰嶇疆锛屽涓嬫墍绀猴細

```js
window.oURL = 'http://192.168.1.131:9999/chainmaker';
```

#### 鍚姩杩愯

杩涘叆鍓嶇浠ｇ爜鏈€澶栧眰鐩綍鎵ц浠ヤ笅鍛戒护锛�

```bash
$ npm install
```

鎵撳寘鏋勫缓鍓嶇浠ｇ爜锛�

```bash
$ npm run build
```

灏嗘墦鍖呮瀯寤哄ソ鐨刡uild鍖呴噷`index.html`椤甸潰鐨勮矾寰勯厤缃埌`nginx`涓紝鎵撳紑`nginx`鐨勯厤缃紙榛樿璺緞涓猴細`/etc/nginx/nginx.conf`锛夛紝淇敼浠ヤ笅鏍囨敞鐨勯厤缃細

```html
listen       8080;       #鐩戝惉绔彛
server_name  localhost;  #ServerName
  
location / {
            root /data/cmb-front/dist;              #index.html鎵€鍦ㄨ矾寰�
            index index.html;                       #index.html鏂囦欢
            try_files $uri $uri/ /index.html;       #璺宠浆闇€瑕�
        }

location ^~/chainmaker/ {                 #鍚庣璺宠浆杩囨护瀛楁
    proxy_pass http://127.0.0.1:8080;     #璺宠浆鍒板悗绔殑璇锋眰
}
```

鍏朵腑锛岃嫢鍓嶇璁块棶鍦板潃鐩存帴璇锋眰鍚庣锛屽垯鍙笉閰嶇疆鍚庣璺宠浆鐨刞location`閮ㄥ垎銆�

閰嶇疆瀹屾垚鍚庨噸鍚痐nginx`鍗冲彲鐢熸晥锛岄噸鍚懡浠ゅ涓�

```bash
$ service nginx restart
```


## 浣跨敤鎵嬪唽

### 娴忚鍣ㄩ椤�

#### 棣栭〉妫€绱�

棣栭〉鎻愪緵浜嗛摼妫€绱㈠姛鑳斤紝鍦ㄦ绱㈡杈撳叆`chainId`锛岀偣鍑绘煡璇㈠悗浼氳烦杞埌妫€绱㈠悗鐨勯摼鍒楄〃椤点€傚鍥炬墍绀猴細

<img src="../images/BrowserHomePageSearch.png" style="zoom:50%;" />

#### 缁熻鏁版嵁

棣栭〉鍙互鏌ョ湅浜ゆ槗缁熻銆佸悎绾﹀垪琛ㄣ€侀摼鏁伴噺缁熻銆佹渶鏂伴摼鍒楄〃鍜屾渶鏂板尯鍧椾俊鎭瓑鍐呭锛屽鍥炬墍绀猴細

<img src="../images/BrowserHomePageDecimal.png" style="zoom:50%;" />

### 閾惧垪琛ㄩ〉

閾惧垪琛ㄩ〉鍙互鏌ョ湅鎵€鏈夐摼鐨勫熀鏈俊鎭紝鐐瑰嚮瀵瑰簲鏌ョ湅鎸夐挳锛屽彲浠ユ煡鐪嬫瘡鏉￠摼鐨勮缁嗕俊鎭紝濡傚浘鎵€绀猴細

<img src="../images/BrowserChainList.png" style="zoom:50%;" />

### 閾捐鎯呴〉

#### 閾捐鎯呴〉妫€绱�

閾捐鎯呴〉鎻愪緵浜嗗尯鍧楀拰浜ゆ槗鐨勬绱㈠姛鑳斤紝杈撳叆`鍖哄潡Hash`鎴栬€卄浜ゆ槗ID`锛岀偣鍑绘煡璇㈠彲浠ヨ烦杞搴旂殑鍖哄潡鎴栬€呬氦鏄撹鎯呴〉锛屽鍥炬墍绀猴細

<img src="../images/BrowserChainSearch.png" style="zoom:50%;" />

#### 閾捐鎯呴〉缁熻鏁版嵁

閾捐鎯呴〉鍙互鏌ョ湅璇ラ摼鐨勪氦鏄撶粺璁°€佹渶鏂板尯鍧楀垪琛ㄣ€佹渶鏂颁氦鏄撳垪琛ㄣ€佽妭鐐圭粺璁°€佸拰鏈€鏂板尯鍧椾俊鎭瓑鍐呭锛屽鍥炬墍绀猴細

<img src="../images/BrowserChainDetail.png" style="zoom:50%;" />

### 鍖哄潡鍒楄〃椤�

鍖哄潡鍒楄〃椤靛彲浠ユ煡鐪嬭閾剧殑鎵€鏈夊尯鍧楃殑鍒楄〃鐨勫熀鏈俊鎭紝濡傚浘鎵€绀猴細

<img src="../images/BrowserBlockList.png" style="zoom:50%;" />

### 鍖哄潡璇︽儏椤�

鍖哄潡璇︽儏椤靛彲浠ユ煡鐪嬭鍖哄潡鐨勫叏閮ㄤ俊鎭紝濡傚浘鎵€绀猴細

<img src="../images/BrowserBlockDetail.png" style="zoom:50%;" />

鍖哄潡璇︽儏椤甸〉鍙互鏌ョ湅璇ュ尯鍧楀唴鐨勪氦鏄撳垪琛紝璇︾粏淇℃伅鍙互鍙傝€僠浜ゆ槗鍒楄〃椤礰

### 浜ゆ槗鍒楄〃椤�

浜ゆ槗鍒楄〃椤靛彲浠ユ煡鐪嬭閾剧殑鎵€鏈変氦鏄撶殑鍒楄〃鐨勫熀鏈俊鎭紝濡傚浘鎵€绀猴細

<img src="../images/BrowserTxList.png" style="zoom:50%;" />

### 浜ゆ槗璇︽儏椤�

浜ゆ槗璇︽儏椤靛彲浠ユ煡鐪嬭浜ゆ槗鐨勫叏閮ㄤ俊鎭紝濡傚浘鎵€绀猴細

<img src="../images/BrowserTxDetail.png" style="zoom:50%;" />

## 璁捐鏂规

### 鍖哄潡閾炬暟鎹瓨鍌�

鍖哄潡閾炬祻瑙堝櫒鐨勬墍鏈夋暟鎹紝閮芥槸浠庨摼涓婂悓姝ュ埌鏁版嵁搴撲箣鍚庯紝鍐嶆彁渚涚粰鍓嶇娴忚鍜屾绱€€�

### 閾惧拰鑺傜偣淇℃伅鍚屾

鍖哄潡閾炬祻瑙堝櫒鍚庡彴鍙互閫氳繃`config.yml`涓厤缃殑鐨勮妭鐐逛俊鎭紝鍚屾閾惧拰鑺傜偣淇℃伅鍒版暟鎹簱涓紝鍙互閫氳繃`config.yml`涓殑`update_time`閰嶇疆鏉ヨ皟鏁村悓姝ユ椂闂撮棿闅斻€�

### 鍖哄潡鍜屼氦鏄撲俊鎭悓姝�

鍖哄潡閾炬祻瑙堝櫒鍚庡彴鍦ㄥ拰鑺傜偣寤虹珛杩炴帴鍚庯紝鍙互瀹炴椂鐩戝惉鍖哄潡鍜屼氦鏄撲俊鎭紝鍚屾鍏ュ簱銆�