DappsをXサーバーで動かす

コントラクトのデータ取得とデータ書き込みをフロントエンドから行う、という内容で書いた記事のコントラクトをRopstenテストネットワークにデプロイしました。

ぱんだクリップ
JavaScript初心者が、Dappsとそのフロントエンドを作りたい | ぱんだクリップ 約1週間をかけ、CryptoZombiesをチャプター6まで終わりました。 Solidity言語については、かなり勉強させていただきました。 しかし、チャプター6のフロントエンド構築...
ぱんだクリップ
JavaScript初心者が、Dappsとそのフロントエンドを作りたい2 | ぱんだクリップ 前回は、ローカルで動作するブロックチェーンのスマートコントラクトを作成しました。 今回は、前回作成したスマートコントラクトをWebサイト上から操作するためのフロント...

参考として記載させていただきます。

フロントエンドのコードはXサーバーに配置して、動作確認しました。

サンプルへのリンクは記事末尾です。

目次

Ropstenネットワークへのデプロイ

Ropstenネットワークへデプロイするには、truffleプロジェクトファイルに含まれているtruffle.jsを編集します。

※windows環境の方は少しやり方が違うみたいですね^^;

デプロイの事前準備

・infuraサービスへの登録

Gethのように、ローカルマシンにイーサリアムのクライアントノードを作成して、ネットワーク全体と同期させるのに結構な時間(1~2日らしいです)がかかります。また、ローカルマシンのCPUリソースなどを使用してしまいます。それを代替してくれるものがinfraというサービスですので、登録しましょう。登録時に、アクセストークンというものが発行されますので、これは大事に控えておきます。(後で使います)

Infura
Infura - Home | Web3 Development Platform | IPFS API & Gateway | Blockchain Node Service Infura's development suite provides instant, scalable API access to the Ethereum and IPFS networks. Connect your app to Ethereum and IPFS now, for free!

・Ropstenネットワークでのether取得

MetaMaskの左上のネットワーク選択タブで、Ropsten Test Networkを選択しましょう。初めて使用する場合、アカウントのetherが0のため、Ropstenネットワークで使用できるイーサを取得する必要があります。アカウントの「BUY」ボタンを押して、Ropsten Test Faucetボタンを押しましょう。

そうすると、「request 1 ether from faucet」で1イーサが取得できます。

※私は、サイトのボタンがすぐに反応しないので、押しすぎてしましました^^;エラーメッセージで怒られます・・・↓

{“error”:”User is greedy.”}

・truffleファイルの編集

CarShareのプロジェクトファイルのtruffle.jsファイルを編集します。

var HDWalletProvider = require("truffle-hdwallet-provider");
var mnemonic = "MetaMaskのニーモニックです。";
var infuraAccessToken = "Infra登録時に提供されたアクセストークン";

module.exports = {
  networks: {
    development:{
      host: "localhost",
      port: 7545,
      network_id: "*"
    },
    ropsten:{
      provider: function(){
        return new HDWalletProvider(
          mnemonic,
          "https://ropsten.infura.io/" + infuraAccessToken
        );
      },
      network_id: '3',
      gas: 500000
    }
  }
};

truffleフレームワークのtruffle-hdwallet-providerというものを使用します。

「var mnemonic」には、MetaMaskのアカウント作成時のニーモニックを(保存しておいて、と言われた言葉の集まりみたいなもの)記載します。

「var infraAccessToken」には、Infra登録時に提供されたアクセストークンを入力します。

このhdwalletを使用すると、ニーモニックに指定したMetaMaskのアカウントでInfraをイーサリアムのノードとして経由し、デプロイができます。便利ですね^^

また、今までは、developmentネットワークのみでしたが、デプロイの先に(networks:)、ropstenを追加しました。

デプロイ

以下コマンドで、Ropstenテストネットワークへのデプロイが可能です。

–networkオプションは最後にsつけてコマンドが通らない、というミス、何度もしました^^;

truffle migrate --network ropsten

コマンドでデプロイしましょう。ローカルのネットワークと違い、ブロックの生成に少々時間がかかりますので、待ちましょう。

※Ropstenはテストネットワークとはいえ、メインネットと同様に動作しており、コントラクトを削除、修正したりはできません。

フロントエンドの構築

私は、test.panda-clip.comというサブドメイン上に実装してみました。

以前の記事、「JavaScript初心者が、Dappsのフロントエンドを作りたい2」で作成した3ファイル(index.html、carshare_abi.js、web3.js)をWebサーバーのホームディレクトリに配置しました。それだけです^^;

コチラからテストサイトへ飛ぶことができます。

◆オススメの書籍

ブロックチェーンの概要、スマートコントラクトの概要から、ビットコイン、イーサリアムの違い、イーサリアムのコントラクトを実装するための開発環境構築など、ブロックチェーンアプリケーションの入門にはもってこいの書籍です。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次