基础环境:
虚拟机操作系统: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