TruffleSuiteで始めるDapps開発

どうも、ブロックチェーン事業部の土田です。
主にDappsゲームにおける管理画面やAPI開発に携わっています。

今回の記事ですが、Dapps開発のためのローカル開発環境を構築したいと思います。
TruffleSuiteを使ってみたところ、思った以上に簡単に構築出来たので紹介したいと思います。 N番煎じなネタですが、ちょっとハマったポイントもあったので備忘も兼ねて書いていきます。

今回構築する環境

Reactを扱った案件がありましたので、業務で馴染みのあるReactとEthereumを使用します。また、TruffleとGanacheを使ってローカルに作っていきます。

Truffleとは

Ethereum開発向けのためのフレームワークです。コンパイルやデプロイ、テスト等のサポート機能が充実しています。 www.trufflesuite.com

Ganacheとは

Ethereumが動作する環境を提供します。ブロックチェーンノードの起動、ブロックチェーンの管理・操作等を支援するツールです。 www.trufflesuite.com

筆者環境

Windows10
WSL2(Windows Subsystem for Linux)
Ubuntu 20.04
MetaMask
Chrome

ブロックチェーン事業部では開発環境にWSL2を使っていますので、WSL2上に環境構築していきます。
MetaMaskは予め準備されている前提で進めます。

環境構築

WSL2、Ubuntuのインストール

公式の通りに進めて下さい。 docs.microsoft.com

Truffle、Ganacheのインストール

インストールしたら、Ubuntuを起動します。

公式の通りにnpmからインストールしていけば問題ないかと思います。 www.trufflesuite.com

しかし、筆者は依存関係周りのエラー沼にハマったので、yarn経由でインストールしました。 github.com

2021/07現在はyarn経由が簡単で良さそうです。

yarn add truffle ganache-cli

Reactの準備(TruffleBoxを使用)

TruffleBoxはモジュールをまとめたテンプレートのようなものです。 www.trufflesuite.com

今回はこのTruffleBoxを使用してサクっと環境構築します。 ちょっと古いものになりますが、今回は公式で用意されているReact向けのBoxを使います。検索すると様々なBoxがありますので是非覗いてみて下さい。 www.trufflesuite.com

下記コマンドを実行してください。

truffle unbox react

たったこれだけでReactがインストールされ、サンプルのスマートコントラクトやWeb3周りの実装済みのスクリプト一式を使うことができます。
ただし、この時点でReactを起動しても、接続先のブロックチェーンが存在しない等の理由によりエラーになるはずです。

Ganacheの起動

Ganacheクライアントを起動し、ブロックチェーンノードを立ち上げます。

yarn ganache-cli

下記のように起動すれば完了です。初期設定では、10個のアドレスに100ETHずつ準備されています。 f:id:teco_tsuchida:20210729085920p:plain

この環境にスマートコントラクトをデプロイして確認していきます。

スマートコントラクトデプロイ準備(Truffleの設定ファイル修正)

まずは、先程起動したGanacheの設定に合わせていきます。

Truffleをインストールしたディレクトリに設定ファイルの「truffle-config.js」があるはずです。こちらを修正します。

const path = require("path");

module.exports = {
  // See <http://truffleframework.com/docs/advanced/configuration>
  // to customize your Truffle configuration!
  contracts_build_directory: path.join(__dirname, "client/src/contracts"),
  networks: {
    development: {       // developから修正
      host: "127.0.0.1", // 追加
      port: 8545,        // ganache-cli起動時のport
      network_id: "*"    // なんでもOKなので、*を指定
    }
  }
};

その後、Truffleを起動します。

truffle console

下記の様にコンソールが起動すれば成功です。

f:id:teco_tsuchida:20210728172858p:plain

スマートコントラクトデプロイ

起動したコンソールからコンパイル、デプロイを行います。

compile
migrate

実行後、clientディレクトリ配下にcostractフォルダが作成され、各jsonが作成されるはずです。

Reactの起動

それでは、Reactを起動してみましょう。clientディレクトリ配下で起動します。

cd client
yarn start

f:id:teco_tsuchida:20210728172901p:plain

成功するとブラウザが起動するはずです。起動しない場合は、上記に表示されているURLにアクセスしてください。 ブラウザ起動後にMetaMaskとの連携を要求されますので、一度キャンセルして下さい。

f:id:teco_tsuchida:20210728172904p:plain

MetaMaskの連携

前述のGanache起動時に、すでに100ETH準備されたアカウントがありました。今回はそのアカウントをMetaMaskにインポートします。 まずはネットワーク設定を変更します。Ganacheクライアント起動時のポートを指定します。

f:id:teco_tsuchida:20210728180720p:plain

次にアカウントをインポートします。Ganacheクライアント起動時に表示されたPrivateKeyをコピーして下さい。

f:id:teco_tsuchida:20210729085939p:plain

MetaMaskのアカウントのインポートを押下します。

f:id:teco_tsuchida:20210728180833p:plain

コピーした秘密鍵をペーストして下さい。

f:id:teco_tsuchida:20210728180410p:plain

アカウントのインポートが成功すると、100ETH所持するアカウントが表示されるはずです。

この状態で、Reactが起動したページをF5等で更新し、インポートしたアカウントを指定して接続して下さい。

f:id:teco_tsuchida:20210728180742p:plain

f:id:teco_tsuchida:20210728180427p:plain

「接続」を押下後、下記の様な画面に切り替われば成功です。

f:id:teco_tsuchida:20210728172842p:plain

もし、うまく行かない場合はMetaMaskのネットワーク接続先を確認し、スマートコントラクトがブロックチェーンにデプロイされているか等を確認して下さい。

スマートコントラクトの動作確認

画面が切り替わると同時にMetaMaskが起動してトランザクションの確認を求められるはずです。そのまま「確認」を押下し、処理を進めて下さい。

f:id:teco_tsuchida:20210728180437p:plain

処理が完了すると、下記の通りGanacheクライアント側で処理されたことが確認出来ると思います。

f:id:teco_tsuchida:20210728172848p:plain

また、ページも切り替わっていると思います。stored valueが0から5になりました。

f:id:teco_tsuchida:20210728172850p:plain

以上で、Dapps開発の為の環境構築は終わりです。
TruffleSuiteを使えばこんな簡単に準備できちゃうんですね。凄い・・・!

おまけ

せっかくGanacheを使うので、Ganache-GUIも試してみたいと思います。 GanacheはGUIも用意されています。下記からダウンロードしてください。 www.trufflesuite.com

以降のスクリーンショットですが、Ganacheクライアントを起動しなおしてしまい、アドレスが変わってしまっています。お手数ですが、適宜読み替えて下さい。 基本は設定をあわせてアプリを起動するだけです。

Ganacheクライアントの起動

予め起動しておきます。ポート番号を控えておきましょう。 f:id:teco_tsuchida:20210729091021p:plain

Ganache GUIの起動

起動するとアプリが起動します。「NEW WORKSPACE」を押下してください。 f:id:teco_tsuchida:20210728174821p:plain

「SERVER」タブを押下してください。 f:id:teco_tsuchida:20210728175445p:plain

[HOST NAME]は「0.0.0.0」を指定します。WSL2(Ubuntu)を使う場合はこの設定でうまくいくようです。 forum.openzeppelin.com

f:id:teco_tsuchida:20210728174812p:plain

これで準備ができました。「SAVE WORKSPACE」を押下してください。 起動すると100ETHを持つアカウントが並びます。予め起動しておいたGanacheクライアントの各アドレスと一致することを確認してください。 f:id:teco_tsuchida:20210728174831p:plain

これでGUIからも確認できるようになりました。是非、開発効率アップに役立てて下さい。

終わり

今後はこの環境を使って実際にDappsゲームを開発していきたいと思います。
ここまでご覧いただき、ありがとうございました。

tecotec.co.jp