基础环境：

虚拟机操作系统：Ubuntu 20.04

虚拟机ID地址：172.16.1.20

环境配置

安装依赖

sudo apt update
sudo apt install -y git clang curl libssl-dev
复制代码

安装 Rust

# 安装
curl https://sh.rustup.rs -sSf | sh

# 配置
source ~/.cargo/env

# 将默认工具链配置为最新稳定版
rustup default stable
rustup update

# 安装 nightly 编译链
rustup update nightly

# 给 nightly 编译链添加 wasm 编译target
rustup target add wasm32-unknown-unknown --toolchain nightly
复制代码

编译 Node Template

Node Template 是 Substrate Developer Hub 提供的一个基于 Substrate 框架的模板程序。

# 拷贝 Node Template (version v3.0.0).
git clone -b v3.0.0 --depth 1 https://github.com/substrate-developer-hub/substrate-node-template

# 编译
cd substrate-node-template
cargo build --release
复制代码

安装 Front-End Template

Front-End Template 是 Substrate Developer Hub 提供的一个基于 ReactJS 的前端应用，用来与 Substrate 区块链进行交互。

安装 Node.js

安装：

curl -fsSL https://deb.nodesource.com/setup_lts.x | sudo -E bash -
sudo apt-get install -y nodejs
复制代码

确认：

wangzk@ubuntu:~$ node -v
v14.16.1
wangzk@ubuntu:~$ npm -v
6.14.12
复制代码

安装 Yarn

安装：

sudo npm install --global yarn
复制代码

确认：

wangzk@ubuntu:~$ yarn -v
1.22.10
复制代码

安装 Front-End

# 拷贝
git clone -b v3.0.0 --depth 1 https://github.com/substrate-developer-hub/substrate-front-end-template

# 安装依赖
cd substrate-front-end-template
yarn install
复制代码

与节点交互

启动 Node

cd substrate-node-template

# 在开发模式下启动一个临时节点
./target/release/node-template --dev --tmp
复制代码

其中：

• --dev — 指定开发模式
• --tmp — 节点数据存放在临时目录

wangzk@ubuntu:~/substrate-node-template$ ./target/release/node-template --dev --tmp
2021-04-25 18:06:34  Running in --dev mode, RPC CORS has been disabled.
2021-04-25 18:06:34  Substrate Node
2021-04-25 18:06:34  ✌️  version 3.0.0-8370ddd-x86_64-linux-gnu
2021-04-25 18:06:34  ❤️  by Substrate DevHub <https://github.com/substrate-developer-hub>, 2017-2021
2021-04-25 18:06:34  ? Chain specification: Development
2021-04-25 18:06:34  ? Node name: dreary-spiders-7993
2021-04-25 18:06:34  ? Role: AUTHORITY
2021-04-25 18:06:34  ? Database: RocksDb at /tmp/substratej1rcoJ/chains/dev/db
2021-04-25 18:06:34  ⛓  Native runtime: node-template-100 (node-template-1.tx1.au1)
2021-04-25 18:06:34  ? Initializing Genesis block/state (state: 0x6d10…2825, header-hash: 0x94e8…3adb)
2021-04-25 18:06:34  ? Loading GRANDPA authority set from genesis on what appears to be first startup.
2021-04-25 18:06:34  ⏱  Loaded block-time = 6000 milliseconds from genesis on first-launch
2021-04-25 18:06:34  Using default protocol ID "sup" because none is configured in the chain specs
2021-04-25 18:06:34  ? Local node identity is: 12D3KooWR5XALiyiCRAxfg7iuro63QMZdUVBgfMifgU9CmihaNrP
2021-04-25 18:06:34  ? Highest known block at #0
2021-04-25 18:06:34  〽️ Prometheus server started at 127.0.0.1:9615
2021-04-25 18:06:34  Listening for new connections on 127.0.0.1:9944.
2021-04-25 18:06:36  ? Starting consensus session on top of parent 0x94e8821914882c9a650b6648ef0af4e7561cdfbb1585b7613eb9f153b3663adb
2021-04-25 18:06:36  Timeout fired waiting for transaction pool at block #0. Proceeding with production.
......
复制代码

输出中包含：

• Database: RocksDb at /tmp/substratej1rcoJ/chains/dev/db
• Local node identity is: 12D3KooWR5XALiyiCRAxfg7iuro63QMZdUVBgfMifgU9CmihaNrP

启动 Front-End

cd substrate-front-end-template
yarn start
复制代码

启动成功后的输出信息：

Compiled successfully!

You can now view substrate-front-end-template in the browser.

  Local:            http://localhost:8000/substrate-front-end-template
  On Your Network:  http://172.16.1.20:8000/substrate-front-end-template

Note that the development build is not optimized.
To create a production build, use yarn build.
复制代码

交互

Front-End 在启动成功时，会自动打开浏览器展示下面的页面：

遇到的问题

在虚拟机外部无法访问 http://172.16.1.20:8000/substrate-front-end-template，浏览器提示下面的报错信息：

解决方法：

首先，在启动 Node 时，添加 --ws-external 参数。

./target/release/node-template --dev --tmp --ws-external
复制代码

然后，在启动 Front-End 前，修改 development.json 文件。

cd substrate-front-end-template/src/config
vim development.json
复制代码

将配置文件中的 1237.0.0.1 改为实际的 IP 地址。

{
  "PROVIDER_SOCKET": "ws://127.0.0.1:9944"
}
// 改为
{
  "PROVIDER_SOCKET": "ws://172.16.1.20:9944" // 这是我的虚拟机的IP
}
复制代码

相关资料

Create Your First Substrate Chain

Fixing “Error Connecting to Substrate” message in Substrate Front End Template