LoginSignup
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tobisako(ryuichi tobisako)

HerokuでTokenURI用JSONサーバーを構築（OpenSea）

Last updated at Posted at 2019-04-05

FLOCスマートコントラクト開発科では、受講生の皆さんと一緒に、RinkebyにERC721トークンを発行し、OpenSeaで売却する、というワークショップをやっています。

ERC721には「TokenURI」という設定項目があり、設定したURL先にjsonファイルを置く事で、OpenSeaが自動的に Non Fungible Taken の情報を読み込んで画像や商品名、ステータスを表示してくれる、という機能があります。

「TokenURI」設定が、無いとき～。
naitoki.png
「TokenURI」設定が、あるとき～。
arutoki.png

上の２枚の画像を比較してみても分かる様に、
OpenSeaで「いしおの」を高値で売りたいなら、TokenURIは絶対設定しておいた方がいいと思います。

ちなみに今回使用しているJSONデータはこんな感じです。
json.png
でも、わざわざコレだけの為にサーバーを立てるのって、面倒ですよね？

Herokuを使ってJSONサーバーを気軽に立てよう

というわけで今回は、Herokuの軽量コンテナ（Dyno）を使って、簡単に「JSONサーバー」を立ち上げてみます。

Herokuは、小規模利用ならずっと無料で使える便利なホスティング・サービスです。
暫くアクセスしないとスリープモードに入ってしまう欠点はありますが（無料ですし）アクセスすると20～30秒位で復旧するし（中にはHerokuでWordPress運用までしてしまう猛者も居る様です。）、今回の様なちょこっと利用にはうってつけです。

まず、Herokuに登録しアカウントを作成して下さい。

次に、Getting Started on Herokuを開いて左上の「node.js」をクリックして下さい。
nodejs_erabu.png

すると次の画面で「"ローカル環境にnode.jsの準備が出来ていると仮定します"」と英語で表示されます。
後で「npm install」を使いますので、もしインストールしていない人はサクっと入れて下さい。

準備が出来たら、「I'm ready to start」をクリックしましょう。
Im_ready.png

次の画面「Set up」では、ローカル環境にherokuコマンドの準備が出来ているかを問われます。
Windows、Mac、Ubuntu(Linxu)でのインストール方法が紹介されているので、うまくインストールして下さい。

　　※要するにherokuとタイプして実行できればOKです。
　　command.png

準備できたら、一番下までスクロールして、「I have install the Heroku CLI」をクリックして下さい。
i_have_installed_the_heroku_cli.png

ここからが本題

さて、Herokuの準備が出来ている事が確認できたので、次のステップに進みます。
画面は以下の様に表示されていると思います。
icloned_.png

画像にマルで囲んでいるコマンドを使って、Heroku上でnode.jsを動かす為の各種ファイル群をダウンロード（clone）します。さっそく実行してみましょう。

git clone https://github.com/heroku/node-js-getting-started.git

　　node.js用ファイルを取得できます。
　　git_git.png

gitクローンが終わり、フォルダ「node-js-getting-started」が生成されているので、パス移動しましょう。

cd node-js-getting-started

そして、「I cloned the app source code」をクリックして次のステップに進みます。
i_clone_the_app_source_code.png

herokuに登録する

次の画面は、gitからローカルにダウンロード（clone）したファイル群を、herokuにアップロードする手順です。

heroku create

　　すると以下の様な画面になります。
　　heroku_create.png
　　今回は「sleepy-gorge-86016」という名前が割り振られました（毎回変わります）。

json-serverをインストール

さて、今回の目的は、「TokenURI」の為の「JSONサーバー」を立てる事ですので、
Herokuの手順書を見ながら進めるのはここまでです。

今回は「JSONサーバー」として、パッケージ「json-server」を使います。
以下のコマンドでインストールしましょう（「--save」は最近不要になったみたいです）。

npm install json-server

　　「+json-server@0.14.2」の様な表示になれば完了です。
　　npm_install_json-server.png

さて、パッケージをインストールすると、「package.json」が自動的に書き換えられます。

package.json
    :
  "dependencies": {
    "ejs": "^2.5.6",
    "express": "^4.15.2"
  },
    :

これが、　↓↓↓

package.json
    :
  "dependencies": {
    "ejs": "^2.5.6",
    "express": "^4.15.2",
    "json-server": "^0.14.2"
  },
    :

この様に、「json-server」の行が追加されている事が分かります。

Herokuは、この「package.json」ファイルをgit経由でアップロードすると、この中に含まれるパッケージを自動的にHeroku内で追加インストールしてくれます。

最初はとっつきにくいかもしれませんが、馴れるととても便利です。

index.jsを書き換える

Heroku上では、「package.json」の「main」設定に従い、自動的にnode.jsが実行され（てしまい）ます。

package.json
    :
  "main": "index.js",
    :

今回はTokenURI用にHerokuを使う為に、「index.js」を改造して「json-server」を使いましょう。
「index.js」の中身を丸ごと削除し、以下に置き換えて下さい。

index.js
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();
server.use(middlewares);
server.use(router);
server.listen(process.env.PORT || 5000, () => { console.log('JSON Server is running 5000'); });

３行目の「db.json」は、今回は以下の様な設定にしました。

db.json
{
    "cbquest0" : {"name":"ishinoono","description":"CBQuest Asset #0","image":"https://ipfs.io/ipfs/QmScp12jmbqkDcXzZxBd5bWqFfd5xSsxPXu4nwVv2UYP9g"},
    "cbquest1" : {"name":"tetsunoken","description":"CBQuest Asset #1","image":"https://ipfs.io/ipfs/QmTZEY1WRiaP7B53ak8AzvHJ9d4d5YC4oXs8rHqA9w2Ya5"},
    "cbquest2" : {"name":"yari","description":"CBQuest Asset #2","image":"https://ipfs.io/ipfs/QmUuuosmkYd19eimrRwuBatt93RsLmpUUcKE6tcBLTBjCR"},
    "cbquest3" : {"name":"yuushanoken","description":"CBQuest Asset #3","image":"https://ipfs.io/ipfs/QmUzpyYzM5FKbdpgpuiamPMLuSpjHi1DQjUkjTdAPTg4ix"},
    "cbquest4" : {"name":"meriken","description":"CBQuest Asset #4","image":"https://ipfs.io/ipfs/QmRgW8L5Dmj4Ui9VPDY2r5CMAGqvd4yR7z7fRbXsC8KysN"}
}

今回の例では「sleepy-gorge-86016」という名前が割り振られたので、以下にアクセスすればJSONを返す筈です。
　いしのおの　　　https://sleepy-gorge-86016.herokuapp.com/cbquest0
　てつのけん　　　https://sleepy-gorge-86016.herokuapp.com/cbquest1
　やり　　　　　　https://sleepy-gorge-86016.herokuapp.com/cbquest2
　ゆうしゃのけん　https://sleepy-gorge-86016.herokuapp.com/cbquest3
　メリケンサック　https://sleepy-gorge-86016.herokuapp.com/cbquest4

このファイル「db.json」を、「index.js」と同じフォルダに置けば、ファイル準備は完了です。

ローカルで修正した内容をHerokuにアップロードする

Herokuへのアップロードは全てgit経由で行う事になっています。

gitには手順があって、addコマンドでステージングする、commitコマンドでコミットする、そしてpushコマンドでHeroku側に変更を反映させる、という順に行います。

まずは「git add」です。「.」は、カレント・ディレクトリ以下のファイル変更を検知してステージングする、つまり変更があったファイルを全て反映させるという意味です。

git add .

　　すると、何事もなかった様に実行完了します。
　　git_add.png
ちゃんとステージングできたかチェックしてみましょう。

git status

　　各ファイルがステージに上がった（緑色）事が分かります。
　　git_status.png

ローカルgitに反映を確定させる為、コミットを行いましょう。「-m」は、コミットメッセージ（どんな変更を行ったのかコメントを残す）を指定するオプションです。

git commit -m "create json-server API"

　　これで反映されました。
　　git_commit_.png

最後に、Heroku側に変更を反映させましょう。pushコマンドを使います。

git push heroku master

　　これで、Heroku上で、無料で使えるjson-serverが立ち上がりました。
　　git_push_heroku_master.png
　　暫くアクセスが無いとスリープモードに入りますが、その後アクセスすると、数十秒で自動回復します。

では、それぞれアクセスできるか、試してみましょう。
　いしのおの　　　https://sleepy-gorge-86016.herokuapp.com/cbquest0
　てつのけん　　　https://sleepy-gorge-86016.herokuapp.com/cbquest1
　やり　　　　　　https://sleepy-gorge-86016.herokuapp.com/cbquest2
　ゆうしゃのけん　https://sleepy-gorge-86016.herokuapp.com/cbquest3
　メリケンサック　https://sleepy-gorge-86016.herokuapp.com/cbquest4

　　こんな感じで表示されれば成功です！
　　json_cbquest1.png

あとは、ERC721トークン生成時の「TokenURI」に、このアドレスを入れてやれば、
そのトークンをOpenSeaで売買する際、画像等が表示される様になります。

OpenSea

OpenSeaのドキュメントには、jsonの書き方が掲載されています。
alt

jsonファイルを工夫すれば、ERC721トークンに「プロパティ」を与えOpenSea上で表示させる事が出来ます。

また、OpenSeaは、プロパティのサンプルとして「OpenSea Creature」を提供しています。
opukuri.png

いろんなクリーチャーを見ながら、プロパティの作り方を勉強できて便利ですね。

最後に

今回は、FLOCブロックチェーン大学校の授業では説明しきれなかったHerokuについて触れました。
ブロックチェーン開発にはサーバー構築がつきものですが、Herokuの様なツールを使う事でサーバー周りの面倒ごとから解放され、よりERC721やOpenSeaの理解に集中出来ると思います。是非トライしてみて下さい。

1
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?