BlockChain

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

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

Truffleの準備

Truffle

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

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

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

しかし、これでも

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

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

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

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

ganache-cliでtruffleを起動する

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

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

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

testrpc deprecated

ganache-cliを使いましょう。

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

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

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

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

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

MetaMask

そこで再度、

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

truffleでフロントエンド表示

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

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

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

ブラウザ

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

buildに関して

できませんでした。

こちらのページによると、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という秘密鍵をインポートしてアカウントにアクセスします。アカウントのインポートから秘密鍵を入力します。

アカウントのインポート

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

送金前

送金後

注意点

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

  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が読まれなかったこともあるので、価格が表示されない時はそちらも確認してください。

参考






コメントを残す

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