GPUSOROBAN上でブロックチェインにスマートコントラクトをデプロイしてみよう(2)

Contents

はじめに

ブロックチェインにスマートコントラクトをデプロイするにはTruffleとGanacheを使うことで、実現することができます。Truffleとはブロックチェインを開発するにはよく使われる一つのフレームワークです。そして、Ganacheはローカル・ブロックチェイン・ネットワーク上にスマートコントラクトをデプロイするためのノードを作るためのツールです。前回ではテンプレートのmetacoin boxを利用しました。今回は異なるreact boxの利用を紹介致します。react boxを用いることで、Chrome上にあるMetamaskとの連携をすることができます。

  • 前提条件:GPUSOROBAN上でブロックチェインにスマートコントラクトをデプロイしてみよう(1)にならって下記のインストールを行ったことです。そして、Chromeの利用もあり、developerモードとして利用する必要があります。
    • Yarn
    • Truffle
    • Ganache-cli
    • Chrome(developerモード)の利用

    インスタンスへのログイン

    まずはインスタンスにログインすることです。Windows+Rを実行し、”cmd”を入力し、Enterキーを押すことで、ターミナルを立ち上げます。ターミナルでは下記の通り、ログインをします。(*ここではインスタンスのIPアドレスは10.233.120.244とします。)下図のように表示されれば接続完了です。

    ssh -L 20122:10.233.120.244:22 user@[アクセスサーバ IP] -p 30022 -i .\.ssh\ackey.txt

    それで、もう一度 Windows+Rを実行し、”cmd”を入力し、Enterキーを押すことで、ターミナルを立ち上げます。そして、下記のコマンドを実行します。

    ssh -L 8545:localhost:8545 user@localhost -p 20122 -i .ssh/mykey.txt

    Truffleのインストール

    まずは下記のコマンドでアップデートを実施しましょう。

    sudo apt update && sudo apt upgrade -y

    Truffleをいれるために、NodeJs及びnpmをインストールする必要があります。下記一覧のコマンドで実施できます。

    sudo apt install nodejs npm -y

    次はnをインストールします。

    sudo npm install -g n

    それで、n を使って nodejs, npm をインストールします。

    sudo n 16.17.1

    インストールした後で、ターミナルの画面は下記のようになります。

    次には下記のコマンドで、NodeJsとnpmのバージョンを確認します。

    node --version
    npm -v

    次にyarnを入れ、yarnでtruffleをインストールします。まずは下記のコマンドを入力します。

    curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -

    上記の通り、OKが確認できたら、次のコマンドを入力します。次には下記のコマンドを入れます。

    echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list

    次の画面が出たら、良いです。

    次には下記のコマンドでyarnをインストールします。

    sudo apt-get update && sudo apt-get install yarn

    下記の通り、yarnのバージョンを確認できれば、yarnのインストールが完成になります。

    yarn -v

    それではいよいよTruffleのインストールになります。

    yarn global add truffle@5.5.32

    インストールを終えたら、下記の画面になります。

    次にyarnでインストールしたツールのパスを通すため、~/.bashrcを編集します。*vi を事前にインストールしておく必要があります。viがまだ入っていない場合、sudo apt-get install vim -y でインストールしてください。

    sudo apt-get install vim -y

    viをインストールしたら、下記のコマンドで、pathを修正する必要があります。

    vi ~/.bashrc

    上記のコマンドを実行すると、下記の画面が現れます。

    export PATH=$PATH:/usr/local/cuda-11.0/binの部分で下記の通り、追加してください。

    export PATH=$PATH:/usr/local/cuda-11.0/bin:$HOME/.yarn/bin

    下記の通り追加したら、Escキーを押し、:wqでファイルを保存します。

    ファイルを閉じてから、下記のコマンドを実行し、シェルの設定を即座反映させます。

    source ~/.bashrc

    Ganache-cliのインストール

    その後、下記の通り、yarnコマンドを利用し、ganache-cliをインストールします。

    yarn add ganache-cli@6.12.2

    インストールし終えたら、下記の画面になります。

    これで、ganache-cliのインストールを終えたら、Truffleで用意されているテンプレートをみてみましょう。

    React Boxを使ってみましょう

    まずはreactのフォルダを作成し、そのフォルダ内に入ってください。

    下記の通りでunboxを行います。

    truffle unbox react

    unboxを終えたら、下記の画面が見られます。

    そして、下記のreactの下側に下記のフォルダが見られます。

    Reactを unboxしたら、truffleの設定ファイルを修正する必要があります。それは後々yarnでローカルサーバーを立ち上げるために、warningsが出ないように/react/truffle/truffle-config.jsを修正する必要があります。truffle-config.jsのファイルをviで開くと、下記の通りのコードが見られます。

    下記の通り、truffle-config.jsのファイルを修正する必要があります。これはganache-cliのIP及びportをtruffle-config.jsに追加します。そしてnetworkの部分にdevelopment設定を追加します。これでtruffleコマンドを実行する時に、ネットワーク指定なしでもdevelopmentが利用されます。

    上記の通り、修正を終えれば、:wqで、truffle-config.jsのファイルを修正します。次にスムーズにフロントの実行のため、もう一つの設定を行う必要があります。それはフロント格納ディレクトリ(client)に移動し、yarn startというコマンドを実行する必要があります。ある修正を行わないと、フロント格納ディレクトリ(client)でyarn startというコマンドを実行する時に、下記の通り、warningが出ます。

    上記のwarningsは ../../contracts/というフォルダにSimpleStorage.jsonというファイルが見つからないため、warningsが出た次第です。そのSimpleStorage.jsonのpathの指定は/home/user/react/client/src/contexts/EthContext/EthProvider.jsxというファイルの中に指定されています。そのpathは/home/user/react/truffle/client/src/contracts/になります。一方、/home/user/react/truffle/client/src/contracts/というフォルダにはSimpleStorage.jsonは最初から存在していないから、warningsが出るわけです。そのファイル(SimpleStorage.json)は実は別のフォルダにあり、下記のコードを実行することで、そのファイル(SimpleStorage.json)を指定のフォルダにコピーすれば、yarn startでフロントを動作させていくときにはwarningsは解消されます。

    mkdir -p /home/user/react/client/src/contracts

    次にはSimpleStorage.jsonというファイルを所定の場所から所定の場所にコピーする必要があります。しかし、下記のコマンドを実行しても、/home/user/react/truffle/client/src/contracts/というフォルダにSimpleStorage.jsonというファイルが存在していないので、ファイルが見つかりませんというエラーメッセージが出ます。

    cp /home/user/react/truffle/client/src/contracts/SimpleStorage.json /home/user/react/client/src/contracts

    それはSimpleStrorageのコントラクトをコンパイルし、そしてマイグレーションをしないと、SimpleStorage.jsonは生成されないからです。

    それではSimpleStorageのコントラクトをコンパイルし、マイグレーションをするためにはganache-cliを立ち上げる必要があります。

    下記のコマンドでまずganache-cliを立ち上げます。

    yarn ganache-cli

    ganche-cliを立ち上げたら、最初にreact box内にコードをコンパイルし、その後、マイグレーションを行う必要があるため、新しいターミナルを下記のコマンドで、開きます。

    ssh -L 8545:localhost:8545 user@localhost -p 20122 -i .ssh/mykey.txt

    それで、新しく立ち上げたターミナルで、下記の通り、ターミナルで、truffleのフォルダにて、コンパイルを行います。

    truffle compile

    コンパイルを終えたら、今度は下記の通りでマイグレーションを実施します。

    truffle migrate

    マイグレーションを完了したら、/home/user/react/truffle/client/src/contracts/というフォルダにSimpleStorage.jsonが下記の通り生成されました。

    今度は下記のコマンドを再度実施することで、SimpleStorage.jsonというファイルが指定の場所にコピーすることができます。

    cp /home/user/react/truffle/client/src/contracts/SimpleStorage.json /home/user/react/client/src/contracts

    次には再度/home/user/react/client/という場所で、yarn startを再度実行します。

    cd /home/user/react/client/

    yarn start

    下記の画面が見られれば、yarn startがうまく行われたことが分かります。

    これでスマートコントラクトの登録やローカル・ブロックチェイン・ネットワーク上にスマートコントラクトをデプロイするためのノードの準備を終えましたので、メタマスクの設定を行います。

    メタマスク(Metamask)の設定

    Metamaskは仮想通貨やNFTを保管するための財布機能を有するDappsです。このMetamaskでブロックチェイン上でスマートコントラクトを利用することができます。このような財布機能は他にも色々ありますが、Metamaskは比較的に使いやすく、多く使われています。今回の実施例はブラウザChromeの拡張機能として利用します。Metamaskの使い方については、下記のサイトを参照ください。

    MetaMask(メタマスク)の使い方まとめ!入出金・トークン追加も超簡単

    それではまずはChromeの拡張機能にMetamaskを追加します。その後、下記の通り、ChromeをDeveloper modeに設定する必要があります。

    ここからはMetamaskの導入及びChromeの設定が完了した前提で記事を書きます。

    Metamask上のネットワークの設定

    下記の画面でSettingsのボタンを押し、ネットワークを追加する必要があります。

    下記の画面の通り、ネットワークを追加します。

    マニュアルでネットワークを追加します。

    下記の通り、ネットワークの詳細を記入します。そして保存してください。

    保存できた場合、下記の通りに示されます。

    次にはyarn ganache-cliというコマンドで立ち上げた画面から、何かPrivate KeysをMetamaskにインポートします。

    0番の疑似アカウントのPrivate Keyをコピーし、下記のようにインポートします。

    Ganache-cliで示されたPrivate Keyでインポートしたら、下記の画面になります。*Account3となっているのは元々既に2つのアカウントがあるからです。インポートを終えたら、疑似的に100ETHが入ったことを確認できます。

    ここでは試しにアカウント3からアカウント2に1ETHの送金を試みます。

    ここでConfirmを押すことで、送金が決定されます。

    ここでは下記の通り、アカウント2に1ETHが入ったことを確認できます。

    アカウント3の残高は下記の通りになります。

    まとめ

    上記の通り、簡単ではありますが、react boxを使ったスマートコントラクトをデプロイしてみました。これからはreact boxを用いてフロント側で色々スマートコントラクトと”交流”できるように試みてみたいと思います。

    引用文献:

    参考文献1:TruffleBoxsがdApps開発で便利そうなので紹介してみる

    参考文献2:Truffle + Ganache + Metamask を使って Ðapps の世界に旅立とう

関連記事

ページ上部へ戻る