IPFSでWebサイトをホストできるサービス「Fleek」を使ってみよう
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をクリックし、接続するレポジトリを選択します。
今回は前の手順で作ったレポジトリのみを指定しています。
>をクリックして次の手順に進んでいきましょう。
２つ目の手順はIPFSにし、次に進みます。
３つ目の手順ですが、今回はフレームワークを使ったサイトではないので、デフォルトのまま進みます。
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/
こちらも変更が反映されています。
