Vol.226 Faucetサイトの作り方 - 何もかも無料

今回はメタマスクを利用したFaucetサイトの構築について紹介します。今更かもしれませんが、サーバー作成から最後まで1円もかけずにできたので紹介します。参考にしたのはこちらのツイートです。

こちらは大手ブロガーのマナブさんですがXfreeではなくLinodeという海外のサーバーサービスを利用していました。

0円 w/ Web3

まず、Faucetサイトの最終形態は次のURLになります。こちら、NNYトークンを利用しています。Goerliテストネットにて配布しているので、こちらのサイトから入りサインアップしてアドレスを入れ、GoerliETHを入手することろから始めてください。

しかし、現状ではGoerliETHは一日当たり0.1枚しか手に入らないうえ、ガス代が0.07GoerliETHほどするので、3日くらいためないとトランザクションが実行されないかもしれません…orz

というのも、もともとRinkbyテストネットでやろうかと考えていましたが、Rinkbyがサポート終了していたのでできませんでした。

ただ、こちらのサイトはXfreeで完全無料開発したため、SSL化していません。一応、おすすめのサーバープランはロリポップのライトなどがあげられます。

大まかな流れは以下のようになります。()内は利用ツール

Xfreeでドメイン、サーバー設定(Xfree)

スマートコントラクトの実装(Remix IDE、オープンゼペリン)

Faucetサイトの作成(メモ帳)

FTPツールでサーバーにロード(FFFTP)

たった4つの手順を踏むだけで実装することができます。

まず初めにXfreeにてアカウントを作成し無料でレンタルサーバーを作ります。この際、Xfreeを利用していますがほかのレンタルサーバーサービスのほうがSSL設定できるのでいいかもしれません。

次に、スマートコントラクトの作成を行います。

オープンゼペリンというサイトからトークンの発行を行います。

トークン発行が終わったらスマートコントラクトの実装に取り掛かります。この際のコードについては下記サイトをご覧ください。

次にHTMLでフロントエンドを実装します。こちらはGithub上に公開されていたので、そのままコピーしました。

ここで注意したいのは、90行目のアドレスの部分です。実はサイトではこの部分の説明が省かれていますが、ABIファイルのコピー時にこのアドレスがありません。なので自分で追加します。

ここまでくれば最後はサーバー上にhtmlファイルを上げればいいだけです。上記faucet.htmlをindex.htmlに変えてFFFTPへアップロードすれば完了です。

FFFTP上に記入するサーバーコードは上記になります。FileZillaでやる方法もあったので、そこらへんはどっちでもいいと思います。