プライベートチェーンを建てる　その２ Symbolエクスプローラー構築編

# はじめに

この記事はSymbolブロックチェーンでプライベートチェーンを構築するシリーズのその２です。
プライベートチェーンの構築は公式ドキュメントにも記載されています。
公式ドキュメントを参考にすると、Symbol-bootstrapを使用してプライベートテストネットを建てることができます。
ただ、公式ドキュメントではノードの構築の方法は紹介されていますが、エクスプローラーなどの周辺ツールの整備がされていません。

https://docs.symbol.dev/ja/guides/network/creating-a-private-test-net.html#private-test-networks

プライベートチェーンのノードを建ててもエクスプローラーやウォレットが使えないと色々と不便なのでそのあたりの構築方法をこのシリーズでご紹介できればと思います。

# シリーズ紹介



<details><summary>その１　statistics-service構築編</summary>

- [記事はこちら](https://qiita.com/ishidad2/items/c5ddd290b09f9ccd2dcd)
- 統計サービスです。エクスプローラーを正常に動かすために必要です。
- ネットワークのノードから定期的に情報を収集し、ノードの総数、正常性、地理的分布などを生成・提供してくれます。

</details>

<details><summary>その２　Symbolエクスプローラー構築編（この記事です）</summary>

- ブロックチェーンのコンテンツを閲覧するための読み取り専用の Web アプリケーションです。
- エクスプローラーは、特定のネットワーク上のトランザクション、アカウント、名前空間、モザイク、およびブロック情報の検索をサポートしています。

</details>

<details><summary>その３　プライベートチェーン構築編</summary>

- プライベートチェーンを構築します。
- ここではより実践的にSymbol-bootstrap組み込みのプライベートテストネットではなくあるツールを使って１から設定ファイルを作成します。

</details>

<details><summary>その４　Symbolウォレット（デスクトップウォレット）構築編</summary>

- アカウント、モザイク、名前空間、発行トランザクションを管理する Symbol のクロスプラットフォーム クライアントです。
- デスクトップウォレットはMac、Windows、および Web アプリケーションとして利用できるので、今回はWEBでアクセスする形にします。

</details>

<details><summary>その５　Faucet構築編</summary>

- Faucetとはいわゆる蛇口ですね。テストネット等で使用する基軸通貨の配布を行えるツールです。

</details>

<details><summary>その６　おまけ</summary>

- Symbol-bootstrapを使って他人に設定を共有する方法をご紹介する予定です。（もしかしたらやらないかも）

</details>

# 前提知識

全体を通して最低限以下の知識があると望ましいです。

- Linuxを扱ったことがある
- Docker、docker-composeが扱える（基本的にコマンドが叩ければOKです）
- ドメインやSSL（TLS）についての知識がある


# その２ Symbolエクスプローラー構築編

それでは、これよりSymbolエクスプローラーを構築していきます。

## Symbolエクスプローラーとは？

https://github.com/symbol/explorer

>Symbol Explorer is a read-only web application to browse the content of the blockchain. The explorer supports searching for transactions, accounts, namespaces, mosaics, and blocks information on a given network.

Deepl翻訳

>シンボルエクスプローラーは、ブロックチェーンのコンテンツを閲覧するための読み取り専用のウェブアプリケーションです。エクスプローラは、指定されたネットワーク上のトランザクション、アカウント、ネームスペース、モザイク、ブロック情報の検索をサポートしています。

要はブロックチェーンに刻まれた情報を閲覧するための読み取り専用ツールですね。
ブロックチェーン上の情報はノードによって管理されています。
エクスプローラーを使えば誰でも簡単にブロックチェーンへ刻まれた情報を閲覧することができます。

**画面イメージ**

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/5d494503-aa93-64cb-fc90-6cd86fd5fd88.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/efa6674c-79f8-5920-ec3d-8ddaed5c3923.png)


## Symbolエクスプローラーの構築方法

それでは、実際にSymbolエクスプローラーを構築していきます。

必要なこと（もの）

- サーバー（ローカル環境でも可）
- Docker及びdocker-composeが実行出来ること
- gitが使えること
- ドメイン（なくても可）
- [前回](https://qiita.com/ishidad2/items/c5ddd290b09f9ccd2dcd) 建てたStatistics Serviceへアクセス出来ること


## タグを指定してソースコートを取得（2022/12現在 v1.2.0）

```bash
$ git clone https://github.com/symbol/explorer.git -b v1.2.0
```

## モジュールのインストール

```bash
$ cd symbol-explorer
$ npm install
```

公式の手順に沿うとnpm run devでツールは起動出来るようですが、この方法ではツールの永続化をすることはできませんので [前回](https://qiita.com/ishidad2/items/c5ddd290b09f9ccd2dcd) 同様にDockerで永続化します。

ちなみに、エクスプローラーもDockerHubにイメージがあります。
ただし、公式に使い方は書いてありませんので私が調べた限りでご紹介します。

https://hub.docker.com/layers/symbolplatform/symbol-explorer/1.2.0/images/sha256-a494511c23af97a7457a90239398eb64b69305252aa5eeb9cc65c31599e53c0f?context=explore

まず、自分でイメージをビルドして使用するパターンです。

### 設定ファイルの変更

今回はあえてポートの変更も行っています。別途エクスプローラー用のサーバーを準備する場合にはポート変更は必要ありません。
ポート変更はローカル環境やStatistics Serviceを構築したサーバー上でポートが被らないようにするためですので、そのあたりは自身の環境と相談してやってみてください。

変更するファイル
- [src/config/default.json](https://github.com/symbol/explorer/blob/v1.2.0/src/config/default.json)
- [Dockerfile](https://github.com/symbol/explorer/blob/v1.2.0/Dockerfile)
- [server.js](https://github.com/symbol/explorer/blob/v1.2.0/server.js)


変更点は以下です。

### src/config/default.json

```json
{
	"apiNodePort": 3000,　※１
	"endpoints": {
		"marketData": "https://min-api.cryptocompare.com/",
		"statisticsService": "http://○○.○○.○○.○○:3003"　※２
	},
	"networkConfig": {
		"namespaceName": "dai.dyen",　※３
		"namespaceId": "152C174CB656773D",　※４
		"divisibility": "6"
	},
	"footer": {
		"link": [
			{
				"href": "https://github.com/symbol",
				"text": "Github",
				"icon": "IconGithub"
			},
			{
				"href": "https://discord.com/invite/xymcity",
				"text": "Discord",
				"icon": "IconDiscord"
			},
			{
				"href": "https://twitter.com/NEMofficial",
				"text": "Twitter",
				"icon": "IconTwitter"
			},
			{
				"href": "https://testnet.symbol.tools/",
				"text": "Faucet",
				"icon": "IconCurrencyUsd"
			}
		]
	},
	"timezone": "Local"
}

```

#### 補足

- ※１　SSL（TLS）対応している場合には3001、そうでない場合には3000を指定（今回はStatistics ServiceがTLS対応していないので3000を指定）
- ※２　Statistics ServiceのURLを指定
- ※３　次回作成するプライベートチェーンでの基軸通貨のnamespaceを指定
- ※４　次回作成するプライベートチェーンでの基軸通貨のnamespaceId（モザイクID）を指定（必要があればdivisibilityも変更する）


### Dockerfile

```dockerfile
FROM node:lts-alpine AS builder
RUN apk add --no-cache python3 make g++
ENV NODE_OPTIONS="--dns-result-order=ipv4first --openssl-legacy-provider"
WORKDIR /app
COPY . .
RUN npm install && npm run build

FROM node:lts-alpine AS runner
WORKDIR /app
COPY --from=builder /app /app
EXPOSE 8080　※１
CMD ["npm", "start"]
```

#### 補足

- ※１　ポートを8080に変更（エクスプローラーへアクセスする際のポート番号）

### server.js

```js
const fs = require('fs');
const http = require('http');

const PORT = 8080;　※１
const CONFIG_ROUTE = '/config';
const DEFAULT_CONFIG_PATH = '/src/config/default.json';
const STATIC_FOLDER = '/www';
const INDEX_HTML = '/index.html';
const STATIC_CACHE_AGE = 31536000;
const INDEX_CACHE_AGE = 172800;

let ENV;

...省略

```

#### 補足

- ※１　起動時のポートを8080へ変更（エクスプローラーへアクセスする際のポート番号）

## イメージのビルド

変更を反映させたDockerイメージを作成します。
下記のコマンド（イメージ名はお好きにどうぞ）でイメージをビルドします。

```bash
$ cd symbol-explorer
$ docker build -t symbol-explorer:latest .
```

## docker-compose.ymlの作成

今回は、[前回](https://qiita.com/ishidad2/items/c5ddd290b09f9ccd2dcd) 作ったdocker-compose.ymlに追記して起動してみます。
前回のstatisticsサーバーは一度停止しておきます。

```bash
$ docker-compose down
```

### docker-compose.ymlに追記

```yaml
version: "3"
services:
    mongodb:
        environment:
            MONGO_INITDB_DATABASE: statistics
        container_name: mongodb
        restart: always
        image: mongo:latest
        volumes:
            - ../databases/db:/dbdata:rw
    app:
        container_name: statistics
        restart: always
        image: symbol-statistics-service:latest
        environment:
            - PORT=4001
            - MONGODB_ENDPOINT=mongodb://mongodb:27017
            - NODES=["http://○○.○○.○○.○○:3000"]
        ports:
            - "3003:4001"
        depends_on:
            - mongodb
    explorer:
        container_name: explorer
        image: symbol-explorer:latest
        ports:
            - "8080:8080"
```

## 起動

```bash
$ docker-compose up -d
```

正常に起動したら http://IP:8080 でアクセスしてみてください。

:::note warn
**プライベートチェーンをまだ構築していないので実際には表示されません**
**プライベートチェーンを構築後、symbol-statistics-serviceのNODES=[]にプライベートチェーンのノードを指定することで初めてエクスプローラーへデータが表示されるようになります**
:::

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/934471/9403235b-4289-5b4f-763f-52470953e809.png)


以上で、Symbolエクスプローラー構築編を終わります。

次回は、いよいよメインの**プライベートチェーン構築編**をお届けします。