第05课:部署合约到

第05课:部署合约到 Ropsten 测试网和主网

上一篇介绍了通过 Truffle 框架快速构建 DAPP。按我们平时的开发流程,接下来就需要提交测试。在提交测试的时候,我们需要将合约部署到 Ropsten 测试网络上。本篇将介绍如何将合约部署到 Ropsten 测试网和 Mainnet 主网。

Metamask

在开始之前,我们先介绍一款后面需要用到的工具:MetamaskMetamask 是一款浏览器(Chrome、Firefox 和 Opera)插件钱包,只需添加到浏览器扩展程序中即可使用。因其 Logo 是狐狸头像,我们也常称之为小狐狸。

大家可能会有疑问,已经有 Ganache 工具,为什么还需要借助 Metamask?这是因为 Ganache 是用于开发调试的工具,并没有集成 Ropsten 测试网和 Mainnet 主网的链接功能。而 Metamask 中已经做了集成(注意其中的 Ropsten 为选中状态):

Metamask

接下来将带领大家一步一步在 Chrome 浏览器中安装 MetaMask 插件,并创建钱包账户。

安装

在浏览器上打开 Metamask 官网 ,并点击 GET CHROME EXTENSION 按钮下载:

metamask

由于 Metamask 官网 需要翻墙才能打开,对部分用户可能有点困难。我已将插件上传到百度云盘中,大家也可以在浏览器端访问下载。

下载完 MetaMask 插件后,打开 Chrome 浏览器的扩展程序 控制面板:

chrome

在打开的扩展程序控制面板里,将刚才下载的 MetaMask 插件包拖拽进来:

chrome

接下来,Chrome 浏览器会提示 要添加 MetaMask 吗?,点击其中的 添加扩展程序按钮: chrome

MetaMask 插件就在 Chrome 浏览器中安装成功了(大家可以注意到 Chrome 浏览器右上角已经出现了一个狐狸图标):

chrome

创建钱包账户

MetaMask 插件安装成功之后,我们来创建钱包账户。点击 Chrome 浏览器右上角的狐狸图标,在弹出的界面中,点击 Accept 按钮:

metamask

弹出下一个界面后,拖动右边的滚动条到最下面,Accept 按钮才能变成可点击状态,点击 Accept

metamask

接下来就到了创建钱包账户的界面。填好密码之后,点击 create 按钮:

metamask

接下来这个界面很重要!

这里显示的是钱包账户的助记词,大家先记录下来,我们后面需要用到。

同时,强烈建议大家一定要妥善保存好助记词,一旦丢失并且自己也忘记后,将再也找不回这个钱包账户,里面的所有数字资产就全部丢了。切记切记!!!

保存好之后,点击红框中的按钮,钱包账户就创建成功了。如下图所示:

metamask

点击钱包账户界面内的 按钮,会出现四个菜单选项,分别代表的含义请看下图:

metamask

在本课程的第02课《搭建开发环境》 中有提到 Infura 提供了以太坊节点访问 URL。值得一提的是,Metamask 也是通过 Infura 来与以太坊区块链网络进行通信的。

领取 Ropsten 测试网 ETH

Metamask 钱包账户创建成功之后,我们需要准备 ETH 代币,以便能支付部署合约过程当中所消耗的 Gas 费用。需要注意的是,通过场内交易或者场外交易等方式购买的 ETH 都是基于 Mainnet 主网的以太币,不能在 Ropsten 测试网上使用。不过,我们可以通过如下方式来免费领取 Ropsten 测试网上的以太币。

在浏览器上打开:http://faucet.ropsten.be:3001,如下图所示:

faucet

填写你的钱包地址之后,点击“Send me 1 test ether!” 按钮,过几分钟后就会发送到你的钱包地址中。

接下来将讲解如何将合约部署到 Ropsten 测试网和 Mainnet 主网。

HDWalletProvider

将合约部署到区块链(不论主网还是测试网)上,都会产生一笔 Transaction。而这笔 Transaction 需要通过外部账户支付 Gas,同时进行交易签名。这里我们需要借助 HDWalletProvider 工具。HDWalletProvider 是一个独立的 npm 软件包,可以处理交易签名以及与以太坊网络的连接。

smartcontract 目录下,执行如下命令进行安装:

npm install truffle-hdwallet-provider

修改 truffle.js 配置文件

HDWalletProvider 准备好后,我们需要修改 truffle.js 文件中的配置:

require('babel-register');
//加载HDWalletProvider组件
var HDWalletProvider = require("truffle-hdwallet-provider");
//钱包助记词(请填写刚才在Metamask中创建钱包时的助记词)
var mnemonic = "domain xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx xxx";

module.exports = {
  networks: {
    development: {  //开发网络配置项
      host: '127.0.0.1',
      port: 7545,
      network_id: '*' // Match any network id
    }
    ,
    ropsten: {  //测试网络配置项
      provider: function() {
          //第1个参数是钱包助记词
          //第2个参数是Infura的Ropsten测试网节点URL(在第二篇文章中已介绍如何申请)
          return new HDWalletProvider(mnemonic, "https://ropsten.infura.io/JECwNrlpwfKgQjHW20pl")
      },
      network_id: '3', //ropsten测试网ID
      gas:4000000     //gas视网络拥堵情况,自由调整
    }
  }
}

合约部署

接下来我们执行如下命令,将合约部署到 Ropsten 测试网上:

//--network ropsten参数表示指定部署网络为ropsten
truffle migrate --network ropsten

执行结果如下: 部署

修改合约调用代码

我们打开 smartcontract/app/javascripts/app.js 文件,定位到如下代码位置 :

window.addEventListener('load', function() {
  //设置web3连接  http://127.0.0.1:7545 为Ganache提供的节点链接
  window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
  App.init();
});

将其修改为:

window.addEventListener('load', function() {
  if(typeof web3 != 'undefined'){  //判断当前浏览器中是否存在web3对象(Metamask会将web3对象注入到当前的浏览器中,请牢记这点)
    if(web3.version.network != 3){  //判断metamask中的network选项是否为 ropsten
      alert('请在metamask中选择ropsten network');
    }
    window.web3 = new Web3(web3.currentProvider); 
  }else{
      //设置web3连接  http://127.0.0.1:7545 为Ganache提供的节点链接
    window.web3 = new Web3(new Web3.providers.HttpProvider("http://127.0.0.1:7545"));
  }
  App.init();
});

然后在 smartcontract 目录下执行 npm run dev 命令即可将 DAPP 启动成功,并通过浏览器正常访问。

说明:将合约部署到 Mainnet 主网的方式和以上方式基本相同,这里不再进行赘述。

Network ID对照表

最后分享一下 Network ID 的对照表:

Network ID 以太坊网络
1 Mainnet //主网
2 Morden test network //Morden 测试网(已废弃)
3 Ropsten test network //Ropsten 测试网
4 Rinkeby test network //Rinkeby 测试网
42 Kovan test network //Kovan 测试网
上一篇
下一篇
内容互动
写评论
加载更多
评论文章