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というサービスですので、登録しましょう。登録時に、アクセストークンというものが発行されますので、これは大事に控えておきます。(後で使います)

あわせて読みたい

・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をコピーしました!
目次