BlockChain

イーサリアムのフレームワークTruffleをブラウザで表示する

投稿日: yoheitaonishi

DAppsを構築するためにTruffleの環境を作ってみます。私の環境では、truffleのバージョンはv4.1.3でした。

Truffleの準備

Truffle

ここからはこのページを参考にやっていきます。npmのインストールは詳しいサイトがいっぱいあるので他のサイトを参考にしてみてください。
まずTruffleをインストールしましょう。

$ npm install -g truffle

必要なディレクトリやファイルが準備します。

$ mkdir truffle_project
$ cd truffle_project
$ truffle init

がしかし、appディレクトリがありません。

$ truffle init webpack

しかし、これでも

$ truffle init webpack
Error: `truffle init` no longer accepts a project template name as an argument.

 - For an empty project, use `truffle init` with no arguments
 - Or, browse the Truffle Boxes at <http://truffleframework.com/boxes>!

エラーが発生して構築できません。truffle initは引数を渡せません。ここでコメントしてくれているように、truffle unboxを使いましょう。これには引数を渡すことができます。

truffle unbox webpack

Documentにも書いていますが、Truffle Boxという機能ができました。いろんな種類のアプリケーションの雛形が準備されています。Truffle Boxのページにより詳細が記載しています。これでappディレクトリも無事インストールされました。

まず、truffle.jsのポートだけ修正します。


...

    port: 8545,

...

portだけ8545に修正しておきます。コンパイルしましょう。

truffle compile

ganache-cliでtruffleを起動する

まずは、テストしてブラウザで見れるところまでやっていきましょう。

truffleでコントラクトをテスト

$ testrpc -b 1

しかしコマンドがありません。インストールしようとしてページをみたらdeprecatedでした。

testrpc deprecated

ganache-cliを使いましょう。

npm install -g ganache-cli

これでインストールはできました。次にtruffleのテストを走らせます。デフォルトから何も変更していないですが、今回は動くところまでが目標なので進みましょう。

プロジェクトのディレクトリで、

truffle test

で実行できます。しかし、

Could not connect to your Ethereum client. Please check that your Ethereum client:
    - is running
    - is accepting RPC connections (i.e., "--rpc" option is used in geth)
    - is accessible over the network
    - is properly configured in your Truffle configuration file (truffle.js)

Ethereum clientが起動していないようですね。以下の記事を参考に先ほどインストールしたganache-cliを叩きます。

~/.nvm/versions/node/v7.10.1/bin/ganache-cli

ここはローカルの環境に応じてコマンドを変更する必要がありそうです。私の場合はこのコマンドでいけました。これでganache-cliが起動します。起動した状態だとMetaMaskにlocalhostの8545ポートが現れるので、そちらを選択します。

MetaMask

そこで再度、

truffle test

これで今うまくいきました！

$ truffle test
Using network 'development'.

Compiling ./contracts/ConvertLib.sol...
Compiling ./contracts/MetaCoin.sol...
Compiling ./test/TestMetacoin.sol...
Compiling truffle/Assert.sol...
Compiling truffle/DeployedAddresses.sol...

Compilation warnings encountered:

/Users/yoheitaonishi/block_chain/truffle_project/test/TestMetacoin.sol:9:3: Warning: No visibility specified. Defaulting to "public".
  function testInitialBalanceUsingDeployedContract() {
  ^
Spanning multiple lines.
,/Users/yoheitaonishi/block_chain/truffle_project/test/TestMetacoin.sol:17:3: Warning: No visibility specified. Defaulting to "public".
  function testInitialBalanceWithNewMetaCoin() {
  ^
Spanning multiple lines.



  TestMetacoin
    ✓ testInitialBalanceUsingDeployedContract (73ms)
    ✓ testInitialBalanceWithNewMetaCoin (110ms)

  Contract: MetaCoin
    ✓ should put 10000 MetaCoin in the first account
    ✓ should call a function that depends on a linked library (44ms)
    ✓ should send coin correctly (143ms)


  5 passing (1s)

truffleでフロントエンド表示

$ truffle server

これで起動すると思ったが起動しません。

Serving static assets in ./build on port 8080...
TypeError: fsevents is not a constructor
    at createFSEventsInstance (/Users/yoheitaonishi/.nvm/versions/node/v7.10.1/lib/node_modules/truffle/build/webpack:/~/chokidar/lib/fsevents-handler.js:26:1)
    at setFSEventsListener (/Users/yoheitaonishi/.nvm/versions/node/v7.10.1/lib/node_modules/truffle/build/webpack:/~/chokidar/lib/fsevents-handler.js:80:1)
    at FSWatcher.FsEventsHandler._watchWithFsEvents (/Users/yoheitaonishi/.nvm/versions/node/v7.10.1/lib/node_modules/truffle/build/webpack:/~/chokidar/lib/fsevents-handler.js:244:1)
    at FSWatcher.<anonymous> (/Users/yoheitaonishi/.nvm/versions/node/v7.10.1/lib/node_modules/truffle/build/webpack:/~/chokidar/lib/fsevents-handler.js:378:1)
    at LOOP (fs.js:1716:14)
    at _combinedTickCallback (internal/process/next_tick.js:73:7)
    at process._tickCallback (internal/process/next_tick.js:104:9)

コメントにあるように開発環境がOSXの場合は以下のコマンドで起動できる。

npm run dev

localhost:8080へアクセスすると、

ブラウザ

よしこれで無事に表示できました！

buildに関して

$ truffle build
Error building:

No build configuration specified. Can't build.

Build failed. See above.

できませんでした。

こちらのページによると、buildしなくてもよくなったみたいですね！

All that’s left is to use webpack to compile the app and place it in the build/ folder. A simple npm run dev and we’re done! This will build the app and serve it on http://127.0.0.1:8080. Relevant configs here:

バージョンによってかなり変わっているところが多いので、気をつけましょう。

MetaCoin送金

localhost:8080を確認します。

10000meta

ganache-cli起動時のAvailable AccountsにMetaMaskから接続します。

Available-Accounts

今回はdb89c1243529b0fe9a36473a86ee1cf8f099d0ddd73557c8727244f7cc4891f7という秘密鍵をインポートしてアカウントにアクセスします。アカウントのインポートから秘密鍵を入力します。

アカウントのインポート

これで無事に送金されました。

送金前

送金後

注意点

何故かうまくいったと思っても、次に画面を表示するとMetaCoinのAmountが表示されなかったりします。そんな時は以下の手順を試してください。

  1. 一度、ganache-cliもnpm run devも落とす
  2. ganache-cliを起動（秘密鍵をメモしておく）
  3. truffle migrateする
  4. truffle testする
  5. MetaMaskで一度メインネット（Localhost:8545以外なら何でもいい）に接続してからLocalhost:8545へ繋ぐ
  6. メモしておいた秘密鍵でMetaMaskにアカウントをインポート
  7. npm run devを起動
  8. localhost:8080へアクセス

これで金額も表示され送金もできると思います！その他にバックグランドでgethを起動させていたことを忘れていてganache-cliが読まれなかったこともあるので、価格が表示されない時はそちらも確認してください。

参考






コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です