Solidity + Truffle + Ganache + Nextjs でdAppを構築するときの手順まとめ

概要

前回はSolanaチェーン上でTodoアプリを作る、
というような内容で実装を行ってみました。

今回は、Solidity でも似たようなことをやってみたいと思い、
参考になるものを探したところ、Venmoと呼ばれる個人間の送金アプリのモックアップを
Solidity を用いて作っているチュートリアルがあったため、実装を追ってみました。

使っている技術スタックとしては、

Solidity + Truffle + Ganache + Nextjs です。

途中からTestNetではなく、ローカルのGanacheというローカルチェーンを使うように切り替えたのですが、
慣れていないこともあり、自分が何をやっているのか、何をどう繋げたいのかなど混乱して思ったより時間がかかってしまいました。

いくつかチュートリアル記事などは転がっているのですが、やはり公式のドキュメントを忍耐強く読むのが一番でした。
その上で、詰まったところについて、最初に知っておきたかった構成や、何をやっているのかの概念的なところなどをまとめて書いていこうと思います。

参考にしたもの

こちらにクライアント＋スマートコントラクトのコードは上げています。

こちらはSolanaチェーンの時と同じように、

こちらの動画を大いに参考にさせてもらいました。
ただ、テストネットでの開発にスピード感が持てなかったのと、faucetなどを待つのがめんどくさかったので、今回はGanacheでデプロイできるように変更しました。

構成

• フロントエンド（Nextjs + ehter.js)
• スマートコントラクト (Solidity)
• 開発環境（Truffle suite + Ganache ローカルチェーン）
• ウォレット（メタマスク）

どのような手順で開発をすればいいか、ウェブ３が初めてだとそこからわからないので、
簡単な手順を書いてみます。

開発手順

Truffleでスマートコントラクトを作成

今回の例だと、まずTruffle をインストールします。

truffle は、solidity で実装したスマートコントラクトをコンパイル、デプロイ、テストできる総合環境のようなものです。
VSCodeにもエクステンションとして導入することができますし、もちろんコマンドラインから実行することもできます。

手順についてはやはり公式ドキュメントを追うべきですが、実行する内容としては以下のような流れになります。

1. truffle init を行い、必要なフォルダやconfig ファイルを生成する。
2. スマートコントラクトを実際にコーディングする（contracts/Transaction.solファイルとか）
3. truffle compile でsolファイルをビルドします。（build/contracts/Transaction.jsonが生成されます。）
4. deployに必要なファイルを書く（migration/deploy.jsなど）

ここまでできたら、実際にどのチェーンにスマートコントラクトをデプロイするか、について整備します。

Ganacheでローカルチェーンを構築

Ganacheは、ローカル環境で動かせるEthチェーンです。
まずはダウンロードをして、Quickstart を使ってプロジェクトを立ち上げます。
最初自分は何をやっているのかわかりませんでしたが、Quickstartにより、ローカルでブロックチェーンが構築され、テスト用のETHが１００ずつ入ったアドレス（１０人プリセットされたユーザがいると思えば良い）が用意されます。

ここで、Ganacheの設定画面に行き、先ほどのTruffleのコンフィグファイルtruffle-config.jsファイルへのパスを指定し、プロジェクトを追加します。

さらに、サーバ管理タブへと進み、ポートを7545に変更します。

ここまで完了したら、Truffleのデプロイの設定に進むために、スマートコントラクトを定義したフォルダへと戻ります。

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

今回はローカルのGanacheにコントラクトをデプロイするので、truffle-config.js の以下の部分をアンコメントします。

truffle-config.js

  networks: {
    // Useful for testing. The `development` name is special - truffle uses it by default
    // if it's defined here and no other network is specified at the command line.
    // You should run a client (like ganache, geth, or parity) in a separate terminal
    // tab if you use this network and you must also set the `host`, `port` and `network_id`
    // options below to some value.
    //
    development: {
      host: "127.0.0.1",     // Localhost (default: none)
      port: 7545,            // Standard Ethereum port (default: none)
      network_id: "*",       // Any network (default: none)
    },

この変更を加えた後に、truffle migrateのコマンドをつかって、
デプロイを実行します。
成功すれば、

このようなログが発行されるので、このときのcontract addressをコピーしておきます。

ウォレットの作成と、Ganacheとの結びつけ

メタマスクウォレットをクロームの拡張機能としてインストールします。
インストールできたら、
まず、ウォレットの接続先として、ローカルのGanacheを設定するために、
Networkの追加を行います。

メタマスクのこの画面から、

Network name: 自分で名前を適当につける
New RPC URL: http://127.0.0.1:7545
Chain ID: 1337
Currency symbol: ETH

としてネットワークを設定します。
これを設定すると、メタマスクから作ったネットワークを選択できるようになります。

ローカルGanacheのネットワークをメタマスクに追加できたので、次はこのネットワーク（チェーン）のアドレスをテストのためにいくつか追加します。

この画面のimport accountを選び、

これが先ほどのGanacheの画面ですが、この1行1行がアドレスとなっているので、右の鍵マークから、それぞれのアドレスの秘密鍵を取得します。

その秘密鍵を、

ここにコピーペーストして、ウォレットをインポートします。

私はテストのために、上２つのアドレスをメタマスクと同期しました。

クライアントコードとの接続

ここまでできたら、後はクライアントコードであるNextjs に設定を追加し、
スマートコントラクトのエンドポイントに向けてクエリを発行できるように設定します。

まず、

こちらのファイルは、先ほどtruffleでコンパイルしたbuild/contracts/Transaction.jsonをそのままコピーしてきます。

次に、

こちらのcontractAddressは、truffle migrateをしたときにメモしていた
contract address　をそのまま貼り付けます。

以上で繋ぎ込みは大丈夫です。

あとは、Nextjsをyarn install + yarn startにて立ち上げると、
デモとして挙動が確認できるはずです。

このようにチェーン上のアドレス（宛先）を指定し、送信するETHの量を指定します。

結果として、Ganache上のETHが移動しているのが確認できるはずです。

また、UI上でもトランザクションの履歴が表示されます。

お疲れ様でした。！

まとめ

今回は、Solidity + Truffle + Ganache + Nextjsを用いて
送金サービスのVenmoのデモアプリを実装し、その構築手順をまとめました。

私自身ウェブ３アプリの構築手順の流れには全く慣れていないのでいろいろな場所で詰まりましたが、少しだけ慣れた気がしてよかったです。
この次はこれを解説動画のようにGoerliのTestNetに乗せてみるのがネクストステップかなと思っています。

今回はSolidityのスマートコントラクトのコード自体には言及しなかったので、
別記事で少し言及しようと思います。

今回はこの辺で。

@kenmaro