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

2021/1/1

やったこと

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

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

でもアクセスできる。 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 を取得してみた。

pikkaman.ethは利用可能

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

登録のリクエスト

ドメイン購入のトランザクション待ち

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

pikkaman.ethの購入に成功

ちなみに

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

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

IPFSにホストする

fleekとは

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

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

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

fleekからデプロイする

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

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

fleekサインイン後

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

リポジトリ選択

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

ビルド設定

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

ENSと紐付ける

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

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

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

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

おまけ

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