CloudFflareのWeb3 IPFS Gatewayを使ってIFPS上のウェブページにDNSLink経由でアクセスする

2022.12.20

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

本記事はCloudflareアドベントカレンダーの17日目の記事です。

Cloudflare Advent Calendar 2022 の記事一覧

今回はCloudflare WEB3シリーズのうちの一つIPFS Gatewayを利用してみたいと思います。

そもそもなにをやるの?

タイトルの通りなのですが、

IPFSDNSLinkなど聞きなれない言葉が多いかもしれないので少し解説します。

まず、IPFS(InterPlanetary File System)とは Protocol Labsにより開発が進めれられているP2Pネットワーク上で動作するハイパーメディアプロトコルとその実装です。(IPFS入門より引用)

IPFSは、現在主流となっているHTTPプロトコルをベースとしたネットワークとは異なる独立したネットワークで構築されています。

IPFS上には、画像ファイルや静的ページなどのファイルをアップロードすることが可能で、アップロードされたファイルはIPFS上のノードに分散されて保存されます。(専用のブラウザなどを利用することでファイルへアクセスが可能です。)

従来のパブリッククラウドなどを利用した中央集権的なデータの保存方法とは異なり、誰でも参加可能なネットワーク上のノードに分散してファイルを保存するため、データの耐久性や信頼性などのメリットが享受できるとされています。※IPFS入門Cloudflare IPFSゲートウェイに詳しく書かれています。

なんだかワクワクしますが、実際のところIPFSは主要なブラウザでネイティブ対応されていなかったりと、まだ発展途上です。

そのため、現在広く普及しているHTTPからIPFSネットワークが利用できるIPFSゲートウェイという仕組みが存在します。

CloudFlareでは、このゲートウェイをCloudFlareのグローバルネットワークを利用して、各エッジロケーションに自動構築する仕組みが提供されています。

また、DNSレコードを介して、IPFS上の特定のコンテンツへ任意の名前をマッピングする、DNSLinkというプロトコルにも対応した機能を提供してくれています。

これは、IPFS上のファイルの識別子であるCIDをいちいち入力させるのを避けるための仕組みです。CID(Content Identifier)はIPFS上にファイルを保存する際に生成されるハッシュ値です。

ざっくりとした解説は以上です。

ということで、今回は

Cloudflare IPFSゲートウェイを使ってIPFS上のウェブページにHTTPでアクセスする

というのを目指してやっていきたいと思います。

やってみる

kubo(go-ipfs)のインストール

まずは、IPFS上へのファイルのアップロードにはkubo(go-ipfs)が便利です。

自分はこちらからバイナリを直接ダウンロードして、sudo sh install.shでインストールします。

分からない方は、下記のサイトが参考になります。

ウェブページの用意

適当なウェブページを用意します。

$ tree -L 2 src/
src/
├── arai-seiichi.JPG
└── index.html
  • index.html
<html>

<head>
  <title>arai-test-page</title>
</head>

<body>
  <p>Hello! I'm Seiichi Arai.</p>
  <img src="arai-seiichi.JPG" width="600px" height="450px">
</body>

</html>

IPFS上にアップロード

  • デーモンを起動

ipfs daemon

  • 再帰的アップロードを実行
$ ipfs add -r src/
added QmYJCpCrCJqGXemJi9G1RCnGXCGZ3HerHLKq56c5JGWVaU src/arai-seiichi.JPG
added QmbuTQrDXN7TcE2CQ2bBk4aXRwtAndXGtpTKGYFsaojH7s src/index.html
added QmeyUYQeeawcGfVwPwj9tz1tewK6wYNn9fNFM7ocHNur8y src

この時点で、ローカルホストからIPFSのファイルにアクセスできるようになっています。

http://localhost:8080/ipfs/QmeyUYQeeawcGfVwPwj9tz1tewK6wYNn9fNFM7ocHNur8y

IPNSの設定

InterPlanetary Name System(IPNS)は、CIDへのミュータブルポインタを作成するための仕組みです。

特定のCIDに対してIPNSを設定すると、Peer IDというユニークなIDが生成されます。

つまり、Peer IDを利用者に提供しておけば、後からコンテンツを変更したい場合に、Peer IDを新しいCIDに紐づければ、利用者側はPeer IDを変更することなく新しいコンテンツにアクセスできるようになります。

  • srcディレクトリのCIDにIPNSを設定
$ ipfs name publish QmeyUYQeeawcGfVwPwj9tz1tewK6wYNn9fNFM7ocHNur8y
Published to k51qzi5uqu5diw8zjt9e2da6lfbpon3aaqyfibux1xh29x7h0d3j6kxvmspgfc: /ipfs/QmeyUYQeeawcGfVwPwj9tz1tewK6wYNn9fNFM7ocHNur8y

k51qzi5uqu5diw8zjt9e2da6lfbpon3aaqyfibux1xh29x7h0d3j6kxvmspgfcがPeer IDなります。

CIDはハッシュ値なので、src以下のファイルの中身が変わったらもちろんsrcのハッシュ値も変わります。

そういった場合に、再度ipfs name publish <new_cid>を実行してあげることで、Peer ID k51qzi5uqu5diw8zjt9e2da6lfbpon3aaqyfibux1xh29x7h0d3j6kxvmspgfcに再度紐づけされます。

ClouudFlareのWebsitesの追加

自分は既に登録済みのサイトを利用します。

新たに追加する場合は以下を参考にしてみてください。

DNSLinkの設定

サイトに入ったら左下に「Web3」と表示されているので、そこから「Create Gateway」を選択します。

「Create Gateway」を選択すると、以下のような画面が表示されます。 Hostnameには、サイトに設定しているドメインもしくはサブドメインを入力します。

DNSLinkには、先ほど生成したIPNSのPeer IDを/ipns/<peer-id>という形式で入力します。

しばらくすると、以下のように「Active」と表示されます。

動作確認

https://homepage.arai.classmethod.cfにアクセスするとホームページが表示されました。 ?

ちなみに、サイトを更新する場合は、新しく生成されるsrcのCIDをipfs name publish <new_cid>でIPNSに紐づけてあげれば、CloudFlareのWeb3 Gatewayの設定は変更する必要はありません。

まとめ

いかがだったでしょうか。

IPFSは、今までの常識とは異なる仕組みで構築されているためとても興味深いです。

CloudFlareはWeb3系に力を入れているのか、他にも​Ethereum GatewayPolygon Gatewayなどのサービスがありました。また、CloudFlare Pagesとの連携機能も今後追加されそうです。

近い将来にプロジェクトで当たり前のようにIPFSを利用する日が来るかもしれませんね。