Hello Dapps ローカルブロックチェーンを立ち上げる

[前記事に移動](https://qiita.com/NT1123/private/e2c36b438bb712460d68)

#5 ローカルブロックチェーンを立ち上げる

テストネットにDappsをDeployする前に、ローカルで立ち上げたブロックチェーン上でDappsが所望の動作をすることを確認します。


##5.1 Metamaskの設定
ローカルでブロックチェーンを動作させるため、Metamaskからローカルのブロックチェーンにアクセスできるように設定します。

まずHello DappsのTopディレクトリ  \metitに移動しtruffle developを行う。Hello Dappsのディレクトリ構造は[こちら](https://camo.qiitausercontent.com/a77a7a6474dc1e62588be4a5ad7b3b176d4e1958/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3135303232332f32386138663334392d613139372d623434652d356437612d3163383331316631613363652e6a706567)に記載しております

下記のログによるとローカルブロックチェーンはhttp://127.0.0.1:9545(http://localhost:9545と同じ)　
で動作することが分かります。

```console:/metit
C:\Users\Takeshi\metit>truffle develop
Truffle Develop started at http://127.0.0.1:9545/

Accounts:
(0) 0xb480cce949949318c1d4ef1b09f96be981521e02ains, or else you risk losing funds.
(1) 0xf08b57f5339d9e9ad89e17f0ab8411d0f4be7a6c
(2) 0x87be62e2520b5e8385c4bbeeec1d1bdc7ddc27ea
(3) 0xaaf45bc3b350c00ffe623d75812d79a3f67b42b6
(4) 0x308d9c66a8b09831cddde828bf13385a8e509e03
(5) 0xa145c62a6d4b8f019d587efb3a172aec579e153b
(6) 0xad3aa417aee6238f0251bc10f5f363ca7c0b3882
(7) 0x97713d978418b1906d0bb4baaad60619fc1c76e6
(8) 0xe68c44d3f87f7b5b10e48026a29af8c1814e9eac
(9) 0x3412ac8e46e234f50e499c4370d14d8b17ce59d7

Private Keys:
(0) e05929b2d6a1853fd00de1097845a887661a97a1163fa64e959526513433c3f6
(1) 0e89a488d3f20205f8b88ad309163f0fa285ea931193f2601a441efdf9397112
(2) 4c2155a2394658288a4c3e5c4f29ccd23b79bdf600002957d5e357852361d622
(3) 9fa86a39ac0a8fb871f231e5752c1cfcd662929a7434336484367a0a60a8efa0
(4) 5c4f266e4ea6e383d89ceee417c56fa9659233c7a36159aa7e9ab7c039a1d6d0
(5) a83f477854ebaa74ec95df7a366237b7f4600f68b957583998f63a405b014a9f
(6) a4f2047df6b7b820dfb255cc9f7ef9310cf7407aa8404ff4156f601925087a4d
(7) bc37156dc13e5a5909befad9460ceefc95b49cb8b5f7e305295937c0619debd0
(8) eea98e8775cfb7a01a09efe7ae45a8bafffbefe1c9203e616dbb85b864be8708
(9) 4dbd4bce6271eca4d0a8c7db1c0b9a5bf05ba5112300c254b08021e11efebd5d

Mnemonic: grid tongue intact sunset lava paper blade reunion swim traffic apart catch

⚠️  Important ⚠️  : This mnemonic was created for you by Truffle. It is not secure.
Ensure you do not use it on production blockchains, or else you risk losing funds.
```
まず、 Mnemonic: grid... をすべてコピーします。
METAMASKを立ち上げ、ウオレットのパスフレーズを要求される画面が表示されたら上記でコピーしたMnemonic: grid... をペーストします。また新規パスワードは任意に設定してください。
![21.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/4ae05204-decb-b8fa-6652-055634dd5cf0.jpeg)

ウオレットが作成されました。
![22.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/d7f07ea0-7c90-91fb-adbe-1b9de0bb7d06.jpeg)


次に、METAMASK上でネットワーク→カスタムRPCを選択します。

![23.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/a5b98738-3167-b5a0-c088-1239baf35f9e.jpeg)

ローカルブロックチェーンは、http://localhost:9545
で動作するためNew RPC URLに「http://localhost:9545」を記入し保存します。

![24.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/e1b5d106-239d-3d58-8e9f-42402bcb8969.jpeg)

アカウント:0xB480CcE949949318C1d4ef1b09f96BE981521e02 が100ETHER持っていることが分かります。
![25.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/bc360062-d469-74af-127f-6588e33223ce.jpeg)


##5.2 ローカルブロックチェーンの再設定
場合によっては、コントラクトを再初期化しなければ正常動作しないことがあるので、コントラクトのresetが必要になることがあります。truffle developを立ち上げて、migrate --resetを実施します。migrate --resetログに現れるHelloコントラクトのコントラクトアドレスが再設定されます。

```console:/metit
C:\Users\Takeshi\metit>truffle develop
truffle(develop)> migrate --reset

Compiling your contracts...
===========================
> Everything is up to date, there is nothing to compile.


Starting migrations...
======================
> Network name:    'develop'
> Network id:      5777
> Block gas limit: 0x6691b7


1_initial_migration.js
======================

   Replacing 'Migrations'
   ----------------------
   > transaction hash:    0xe...
   > Blocks: 0            Seconds: 0
   > contract address:    0xe...
   > block number:        2
   > block timestamp:     1570843427
   > account:             0xB...
   > balance:             99.9943211
   > gas used:            261393
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00522786 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00522786 ETH


1568469596_deploy_hello.js
==========================

   Replacing 'Hello'
   -----------------
   > transaction hash:    0xc...
   > Blocks: 0            Seconds: 0
   > contract address:    0x1...  <-これをコピーする
   > block number:        4
   > block timestamp:     1570843427
   > account:             0xB...
   > balance:             99.98748358
   > gas used:            299853
   > gas price:           20 gwei
   > value sent:          0 ETH
   > total cost:          0.00599706 ETH


   > Saving migration to chain.
   > Saving artifacts
   -------------------------------------
   > Total cost:          0.00599706 ETH


Summary
=======
> Total deployments:   2
> Final cost:          0.01122492 ETH

```

再設定されたコントラクトアドレスをdemo.jsにコピーします。
   > contract address:    0x1...

![30.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/3de18396-f167-eb2c-53f0-7b5c72f770e6.jpeg)




##5.3 ローカルサーバーを立ち上げる

Hello DappsのTopディレクトリ  \metitに移動しnpm run devを行う。Hello Dappsのディレクトリ構造は[こちら](https://camo.qiitausercontent.com/a77a7a6474dc1e62588be4a5ad7b3b176d4e1958/68747470733a2f2f71696974612d696d6167652d73746f72652e73332e61702d6e6f727468656173742d312e616d617a6f6e6177732e636f6d2f302f3135303232332f32386138663334392d613139372d623434652d356437612d3163383331316631613363652e6a706567)に記載しております。

```console:/metit
C:\Users\Takeshi\metit>npm run dev

> metit@1.0.0 dev C:\Users\Takeshi\metit
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
```

コンパイルが正常終了しましたら、Chromeから　http://localhost:8080 にアクセスします。

下記の画面が立ち上がりますので、「移動」ボタンをクリックします。
![20.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/a242d806-de1a-e716-da15-5c4fb801d0ca.jpeg)

METAMASKよりAccount1にアクセスしていいか聞かれるので「Connect」をクリックします。
![26.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/86cbe6b6-7ef4-7b99-ccd1-5a0f7bfb8c48.jpeg)


下記の画面になるので、ブロックチェーンに書き込みたいデータ(下の図の場合はdate1012)をテキストボックスに入力し、「update」ボタンをクリックします。
![27.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/afbf0c57-5b2c-7e59-60ae-34d120eccbbf.jpeg)

トランザクションとGAS FEEの確認がMETAMASKより求められます。承認する場合は確認ボタンをクリックしてください。
![28.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/36192b27-ab19-96d5-d926-92ff91646278.jpeg)

ブロックチェーンへのデータ書き込みが成功すれば「Block Chainへの書き込みが完了しました」と表示され、ブロックチェーンが保持しているデータが読み出され、Data in BlockChainの項目に当該データが表示されます。
![29.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/150223/472bf551-5e00-1087-07ff-aad76170293e.jpeg)

##5.4 テストネットにコントラクトをDeployする

[次記事：テストネットにコントラクトをDeployする](https://qiita.com/NT1123/items/741a60ea0fc43712e6d8)