IPFSでWebサイトをホストできるサービス「Fleek」を使ってみよう

2022.07.28

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

IPFSのクライアントツール(go-ipfs)を使って色々とIPFSの機能を試していた中で、IPNSやDNSLinkを使ったコンテンツの更新について調べていました

Webサイトだと、コンテンツが更新されてハッシュが変更されてしまうと不便だったりします(都度新しいアドレスを知らせないといけない)。 そういった時のソリューションとしてIPNSやDNSLinkが存在していました。

WebサイトをIPFSでホストする際、コマンドラインツールをインストールして、IPFSにファイルを追加したりピンニングしたりと手動で行なっていましたが、

今回はIPFSでWebサイトをホストできるサービスであるFleekについて調べていきたいと思います。

FleekのIPFSホスティングの方法

Fleekでホスティングの仕組みは、

変更をgitにプッシュ -> Fleekはサイトをビルド、ピンニング、更新 を行うワークフローになっています。

gitレポジトリは現在はGithubだけのようですが、将来的にはGitlab,Bitbucketも対応する予定とのこと。

React、Next.js、Gatsbyなどのフレームワークとも統合されていて、 ドメインの管理もでき、カスタムドメインにリンクさせることもできるようです。

やってみる

Githubの用意

Webサイトのファイルを追加するためにGitレポジトリが必要なため、Githubに用意します。

今回は新規にレポジトリを作成して行いました。

Webサイトのファイルを用意

ホスティングしたいWebサイトのファイルを作成します。

今回はビルドが必要のないシンプルなhtmlのファイルで試します。

だいぶん昔に作成してs3にホスティングしていたサイトを使うことにしました。

サイトurl : https://cm-pa-contents.s3.ap-northeast-1.amazonaws.com/twilio-flex-handson/index.html

ローカルPCでフォルダの作成

ファイル格納フォルダを作成し、gitの初期化を行います

$ mkdir ipfs-webhost-sample && cd ipfs-webhost-sample
$ git init

その後、このフォルダに必要なファイルをダウンロードしたり、新規作成したりします。

ファイルをgitにpush

対象のファイルをgitにpushします。

$ git add .
$ git commit -m 'コミットメッセージ'
$ git branch -M main
$ git remote add origin <<作成したレポジトリのURL>>
$ git push -u origin main

イエス

FleekがGithubに接続できるように

サインアップ

サインアップページにアクセスし、Githubアカウントでログインできるようにします。

FleekにGitHubプロファイルへのアクセスを許可する必要がある場合があります。

サイトの追加

サインアップが終了すると自動でログインが行われ、管理ページに遷移します。

Add New Siteをクリックしてサイトを追加します。

Connect with Githubをクリックし、接続するレポジトリを選択します。

今回は前の手順で作ったレポジトリのみを指定しています。

>をクリックして次の手順に進んでいきましょう。

2つ目の手順はIPFSにし、次に進みます。

3つ目の手順ですが、今回はフレームワークを使ったサイトではないので、デフォルトのまま進みます。

Deploy siteをクリックすると、Fleekでデプロイが開始されます。

デプロイが完了すると、Verify on IPFSのリンクからサイトを確認できます。

サイトURL: https://ipfs.fleek.co/ipfs/QmYxZyB3pZcwbmb4Riqc7Bdw3GFXfqEAF83kiE7seZXyyr/

S3にホスティングしていたものと同じです!

IPFSのリンクのほか、FleekのDNSでもアクセスが可能です。

Fleek DNS
https://bitter-morning-8634.on.fleek.co/

このDNSがサイト固有のものとなり、ファイルに変更があっても同じDNSでアクセスし続けることが可能です。

ファイルを更新してみる

試しにindex.htmlのファイルを変更してみます。

見出しのWelcome to twilioflex-handson's documentation!

ようこそこのサイトへ。歓迎します!

に変えてpushし直します。

連携しているブランチにpushすると、自動でデプロイが走るようになっていますね。

更新後のサイト確認

IPFSのURL:

https://ipfs.fleek.co/ipfs/QmTM7jr5XXwk1zdpwLxcH5fPpXysYAdvkFbNyHcuQNywVK/

CIDが変更になったため、IPFSのURLは初回と変更されています。

変更内容がきっちり反映されていますね。

Fleek DNSではどうでしょうか?

https://bitter-morning-8634.on.fleek.co/

こちらも変更が反映されています。

参考