【cryptozombies後の世界②】truffleで作成したアプリケーションをINFURAを使ってRopstenにデプロイしてipfsで表示する

前回記事の続きです！

【cryptozombies後の世界①】truffleで作成したアプリケーションをganacheを使ってローカルで表示する

https://yoheitaonishi.com/dalog_local/

truffleで何かアプリケーションを作ってみようと思い立ち、今までRailsでアプリケーションを主として作成していましたがDAppsを作成して...

yoheitaonishi.com（このサイト内）

またソースコードはここにあります。（ほとんどtruffle boxのまま。）

1 全体像
2 INFURA
- 2.1 概要
- 2.2 ガス料金
3 ipfs
- 3.1 javascriptのファイルが読まれないこともあった
- 3.2 コントラクトコードがデプロイされていないというエラー
4 その他
- 4.1 structはreturnできない

全体像

truffleで作ったアプリケーションをテストネットに反映するにあたり、大きく分けて2つデプロイしなくてはいけません。

コントラクトコードをメインネットまたは、テストネットへのデプロイ
ブラウザを表示するためのフロントエンドのデプロイ

webアプリケーションで考えると、コントラクトコードのデプロイはRDSへのデプロイ、ブラウザへのデプロイはEC2へのデプロイと似ています。

INFURA

1 コントラクトコードをメインネットまたは、テストネットへのデプロイ

コントラクトコードへのデプロイは、INFURAというツールを使って簡単に実行することができます！

概要

gethも考えたのですが、ローカルで同期するのがあまり好きではない…

INFURAだと簡単にデプロイできる。

使いやすいので使うべき。登録するだけです。

今回はテストネットのropstenにデプロイしました。

実際のtruffle.jsのropsten部分は以下の通りです。

     ropsten: {
       provider: function() {
         return new HDWalletProvider(
           ropsten_mnemonic,
           "https://ropsten.infura.io/" + accessToken
         );
       },
       network_id: 3,
       gas: 4700000
     },

ropsten: {

provider: function() {

return new HDWalletProvider(

ropsten_mnemonic,

"https://ropsten.infura.io/" + accessToken

);

network_id: 3,

gas: 4700000

gasを5000000に設定するとエラーでデプロイできなかったので、ここの設定を注意した方がいいです！

多くのサイトで説明がありますが、以下のように環境変数もちゃんと設定しておきましょう！（truffle-hdwallet-providerを使っています）

var HDWalletProvider = require("truffle-hdwallet-provider");
var ropsten_mnemonic = process.env.ROPSTEN_MNEMONIC;
var accessToken = process.env.INFURA_ACCESS_TOKEN;

var HDWalletProvider = require("truffle-hdwallet-provider");

var ropsten_mnemonic = process.env.ROPSTEN_MNEMONIC;

var accessToken = process.env.INFURA_ACCESS_TOKEN;

MNEMONICは、MetaMaskの設定から確認することができます！

ACCESS TOKENは、INFURAから取得しましょう！

ガス料金

デプロイする時にガス料金を設定しなくてはいけないですが、こちらのサイトが大変参考になります。

めちゃくちゃ丁寧な説明…有り難い…

ipfs

2 ブラウザを表示するためのフロントエンドのデプロイ

ipfsという分散型サーバーへデプロイします。

これも非常に簡単にできるようになっていました！

有り難い！

普通にbrewでインストールできるのでやります。

brew install ipfs

1 2	brew install ipfs

そして、デプロイしていきます。

truffleのディレクトリで実行します。

デプロイする前に念のために、truffle compileとnpm run buildはしておきましょう！

そうすると、buildディレクトリにbuildされたデプロイするファイルが集まります。

ipfs init
ipfs deamon

ipfs init

ipfs deamon

そして、確かターミナルの別タブで以下を実行します。

ipfs add -r build/

1 2	ipfs add -r build/

そうすると、ファイルがaddされていきます。

added QmfTLFBsZ2U6efTXpinvWjBRKseKmYbkpmAwtzEVT9W2fo build/app.js
added QmdBq1RDfcQ8CsX3TnyGgmrj2Jb7HQGDNqtP3ZiiW8e6jB build/contracts/ConvertLib.json
added QmeGYNtYX7juyLXujC7FT6K3UwyeWf5JCNJHcJM4JfDBX3 build/contracts/DALog.json
added QmcsKU4rFmHSLT2fw2H92WBB5WHkDLCG9wfPu9EJMfz4S3 build/contracts/Migrations.json
added QmeCZ7neAoywuAiZEfmtka6WuV1eeb6JoryNowc6me7mW2 build/images/MetaMask_1.png
added QmPGY6gkofMKRxLSHX8n8sKSDXkpdZcYR4dGjyU5uEuCaL build/images/MetaMask_2.png
added QmfKsCZWKpiebDErdY4ZYXwCzXZzvYjBKxZkkJzySdP841 build/images/MetaMask_3.png
added QmaRzoqnsHYV6f2yuWfuMU4yaz9rUqq23d5nnptWyUym2R build/images/MetaMask_4.png
added QmfYzkVD9k88xMeCt3eWezoGc8RaN6fRVT1gaggcr5SSxb build/index.html
added QmYC1jqetayy9eypUj5ptUEUFhTaCSmW3XvvHp5gDBGfUi build/contracts
added QmRZnkQj55vcihkg8hbq7BQNLkxkWtJ4ZJ4VbsK4ZYei79 build/images
added QmSJc1dDMYD4HALJ3FiJgcWCYdCk7H2EdiJ7eVyu35YteF build

added QmfTLFBsZ2U6efTXpinvWjBRKseKmYbkpmAwtzEVT9W2fo build/app.js

added QmdBq1RDfcQ8CsX3TnyGgmrj2Jb7HQGDNqtP3ZiiW8e6jB build/contracts/ConvertLib.json

added QmeGYNtYX7juyLXujC7FT6K3UwyeWf5JCNJHcJM4JfDBX3 build/contracts/DALog.json

added QmcsKU4rFmHSLT2fw2H92WBB5WHkDLCG9wfPu9EJMfz4S3 build/contracts/Migrations.json

added QmeCZ7neAoywuAiZEfmtka6WuV1eeb6JoryNowc6me7mW2 build/images/MetaMask_1.png

added QmPGY6gkofMKRxLSHX8n8sKSDXkpdZcYR4dGjyU5uEuCaL build/images/MetaMask_2.png

added QmfKsCZWKpiebDErdY4ZYXwCzXZzvYjBKxZkkJzySdP841 build/images/MetaMask_3.png

added QmaRzoqnsHYV6f2yuWfuMU4yaz9rUqq23d5nnptWyUym2R build/images/MetaMask_4.png

added QmfYzkVD9k88xMeCt3eWezoGc8RaN6fRVT1gaggcr5SSxb build/index.html

added QmYC1jqetayy9eypUj5ptUEUFhTaCSmW3XvvHp5gDBGfUi build/contracts

added QmRZnkQj55vcihkg8hbq7BQNLkxkWtJ4ZJ4VbsK4ZYei79 build/images

added QmSJc1dDMYD4HALJ3FiJgcWCYdCk7H2EdiJ7eVyu35YteF build

そして一番最後に出てきたQmSJc1dDMYD4HALJ3FiJgcWCYdCk7H2EdiJ7eVyu35YteFへアクセスできるようになります。

ブラウザからのアクセス方法は、https://gateway.ipfs.io/ipfs/文字列/という感じになるので、今回はhttps://gateway.ipfs.io/ipfs/QmSJc1dDMYD4HALJ3FiJgcWCYdCk7H2EdiJ7eVyu35YteF/です。

javascriptのファイルが読まれないこともあった

npm run buildたるものが存在することを知らなかったので…

忘れずにしましょう。

コントラクトコードがデプロイされていないというエラー

もう一度、compileしてbuildしてipsfへデプロイしたら、無事に表示された！

その他

structはreturnできない

solidityに関してですが、structで定義した変数群はfunctionでreturnできないので気をつけましょう！

デバッグ方法は前回の記事に書いてあるのが参考になると思います！

You can not return a struct because Solidity implements them only as a loose bag of variables, they are not real objects.

全体像