静的サイトをfleekでIPFSにホストしてENSで作ったドメインでアクセスした

やったこと

作った静的サイトをfleekでIPFSにホストし、ENSのドメインでアクセスできるようにした。 また、既に持っていた .moe ドメインも紐付けたので、このサイトは以下のいずれでもアクセスできるようになった。

• https://broad-flower-5311.on.fleek.co
• https://nauka.eth.link/
• https://www.nauka.moe

さらにMetamask等のウォレットが連携されている状態であれば

• https://nauka.eth

でもアクセスできる。 ENSの画面が表示された後にトップページに遷移するはずだ。

なぜIPFSにホストするのか

分散化は楽しいからである。おわり。

ENSドメインを入手する

ENSとは

ENS (Ethereum Name Service) はEthereumのアドレスに読みやすい文字列のエイリアスを作ることができるサービスである。 Metamask等の対応ウォレットでは、送金先に覚えにくく入力を間違えやすいアドレスに代わってENSの名前を指定できる。 また、サブドメインも作成できるので、個人が目的別にアドレスを使い分けたり、組織で共通のドメインを持ちつつメンバーに規則に従った固有のアドレスを割り当てたりすることができるようになる。 人間はEthereumのアドレスを覚えられるようには出来ていないので、特にオフラインで人にアドレスを共有する際はENSを使うことになるだろう。

さらにENSはIPFSハッシュにドメインをリンクさせることができるようになったので、ウォレットを連携した状態でブラウザで .eth で終わるURLを入力すると名前解決を行いIPFS上のウェブサイトを見ることができる。 今回はこの仕組みを利用してこのサイトをIPFSにデプロイし、ENSで作ったドメインでアクセスできるようにした。

ENS Appでドメインを買う

2020年末時点ではENSのアプリ上で買うのが最も簡単である。まずMetamaskを連携させておき、欲しいドメインを検索してみる。 なお、このサイトは nauka.eth にホストしているが、この節では別のドメイン pikkaman.eth を取得してみた。

利用可能だったので購入手続きを進めた。トランザクションは2回投げる必要がある。 1回目で登録をリクエストし、他に購入しようとしている人がいないか確かめたあとに、2回目で実際にETHを支払って登録する。 15分程度かかることもあるので、画面が固まったように見えても気長に待つ。

こうしてドメインを購入することができた。

ちなみに

ENSのドメインはERC-721のNFTになっているのでOpenSeaで見ることができる。 https://opensea.io/assets/0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85/3654959839458678423803555325044096781331634546540657030260476872925042584045

この記事とは関係ないのだが、ETHにしろNFTにしろ何か別のトークンにしろ、アカウントをどのくらい分散させるべきか悩ましい。 上のアカウントは今回のために作ったが、これにまとめた方が管理は楽になるかもしれない。 どんなNFT持ってるかバレバレになるが。

IPFSにホストする

fleekとは

サイトの編集に集中するためには、GitHubのリポジトリと連携してmainブランチにpushするたびにビルドしてくれたり、いい感じにSSL対応してくれたりするサービスがあるとうれしい。 普通に静的サイトをホスティングする場合は、NetlifyやGitHub Pagesを使うことになるだろう。 今回はそのIPFS版を提供しているfleekを利用してみることにした。無料プランでも以下のスペックがあり、このような個人サイトであれば制限を超えるとは考えにくい。

• カスタムドメイン対応
• ENSドメイン対応
• SSL対応
• プロジェクト数制限なし
• 3GBのストレージ
• ビルド時間 250分/月
• データ転送量 50GB/月

もし制限を超えた場合は超過料金を払うか、別の方法を考えることになる。 具体的には自宅サーバに適当にJenkinsなりを立てて、これまた既に自宅に立っているノードを使ってなんやかんやすればできそうだ。 今度やってみることにする。

fleekからデプロイする

実際にfleekからサイトをデプロイしてみる。Netlifyとほぼ同じ手順で作業でき、また手順自体も簡単なので迷うことはない。

サインインしたら Add new site を選ぶ。

GitHubと連携し、デプロイするリポジトリを選ぶ。

ビルドの設定をする。今回はNuxt.jsを使っているので、 Framework から指定すればよい。該当するフレームワークがない場合は、Othersから良い感じに設定すればよさそうだ。

あとは Deploy site をクリックすればデプロイが始まり、3分ほどで完了してブラウザからアクセスできるようになった。

ENSと紐付ける

続いてENSと紐付ける作業を行う。SETTINGS の ENS から Add ENS を選択する。 先ほど買ったドメインを入力し、 Verify をクリックすると自分のアドレスか確認されるので、表示されているアドレスの一部が自分のものであることを確かめた上で Yes, Add ENS をクリックする。

続いてENSのcontrollerをfleekに設定する。ウォレットを選ぶポップアップが出るので、ここではMetamaskを選択してトランザクションを投げる。

こうしてウォレットを使っていれば https://nauka.eth でアクセスできるようになった。ウォレットがなくてもEthDNSによって https://nauka.eth.link/ でサイトにアクセスできるようになっている。

ちなみに、controllerをfleekに設定するとENSアプリで自分ではサブドメインの設定などができなくなるので注意した方がよい。必要であれば適宜ドメインを分けることになるだろう。

おまけ

SETTINGS の Custom Domains からは通常のDNSでドメインを指定することもできる。 持っているドメインあるいはサブドメイン（今回は www.nauka.moe ）を入力するとCNAMEレコードを指定されるので、.moe ドメインXdomainの管理画面から設定すればアクセスできるようになった。