Zenn
🎉

Fleekで Internet Computer上にWebサイトをホストしてみる

2021/08/15に公開
ブロックチェーン
internetcomputer
fleek
tech

1. Fleekとは

Fleek はIPFSやDfinityのInternet Computer(IC)などの分散システム上にWebサイトをホスティングしたり、IPFSをストレージとして提供したりすることができる、新しい商用サービスである。利用プランが4つ（Basic,Pro,Business,Enterprise）あり、Basicは無償で利用することができる。

これまでのWebホスティングサービスやクラウドサービスと違うところは、IPFSやICといったオープンかつ分散された環境上に、低コストでWebサイトを構築できることだろう。
実際、IC上のSNSであるDistriktなどは、このFleekを使って構築されているらしい。

またGitHubとの連携や、Gatsbyなどの最新フレームワークも利用できるようだ。

2. 事前準備

事前準備としてやることがいくつかあるが、そんなに時間はかからない。

2.1. Fleekアカウントの登録

まずはFleekのアカウントを登録する。GitHubのアカウントを使うことができる。

2.2. Team作成

Teamを作る。おそらく開発チームのことだろう。とりあえずメンバは自分だけ。

2.3. GitHubとの連携

GitHubと連携する。GitHubと連携することでリポジトリをCMSとして使うことができる。またコンテンツの変更を自動的にサイトに反映させることができる。

3. Internet Computer上での静的サイトの立ち上げ

IPFSにもとても興味はあるが、使ったことがない。今回はIC上に静的サイトを立ち上げてみた。

以下のドキュメントを参考にした。
Static Site Deployment on the Internet Computer

3.1. サイトのデプロイ手順

デプロイ手順は Fleekの画面からポチポチするだけである。

以下の手順でGitHub上のレポジトリを使ってサイトをデプロイする。

  1. [Add New Site] をクリック
  2. [Connect with GitHub] をクリック
  3. レポジトリの選択
  4. Hosting Services で [Internet Computer (Mainnet)] を選択し [Continue] をクリック
  5. [Framework] をどれか選択。とりあえずOtherとした。
  6. [Deploy Site]を選択

これでしばらく待つと、Fleek内部でdfxが動いてキャニスターが作成され、サイトがデプロイされる。

Deploy started at 2021-08-15T04:56:24.003Z

2021-08-15T04:56:26.702Z: Deploy started
2021-08-15T04:56:32.709Z: Docker image: 'node:slim'
2021-08-15T04:56:32.709Z: Build command: ''
2021-08-15T04:56:32.709Z: Triggering build execution...
2021-08-15T04:57:14.313Z: Setting wallet for identity 'default' on network 'ic' to id 'owdog-wiaaa-aaaad-qaaaq-cai'
2021-08-15T04:57:14.365Z: Deploying all canisters.
2021-08-15T04:57:14.365Z: All canisters have already been created.
2021-08-15T04:57:14.365Z: Building canisters...
2021-08-15T04:57:14.372Z: Building frontend...
2021-08-15T04:57:14.652Z: Installing canisters...
2021-08-15T04:57:15.113Z: Upgrading code for canister hosting, with canister_id tuuvz-gyaaa-aaaad-qaokq-cai
2021-08-15T04:57:21.715Z: Authorizing our identity (default) to the asset canister...
2021-08-15T04:57:24.927Z: Uploading assets to asset canister...
2021-08-15T04:57:31.495Z: /index.html 1/1 (40 bytes)
2021-08-15T04:57:35.023Z: /README.md (99 bytes) sha 5f8091c1563a0b6d046d0cac8cbbe9788c98cd5f8bb1d02c88cca493f9060f30 is already installed
2021-08-15T04:57:38.244Z: Deployed canisters.
2021-08-15T04:57:40.985Z: You can visit the new site at:
2021-08-15T04:57:40.985Z: https://tuuvz-gyaaa-aaaad-qaokq-cai.ic.fleek.co

ちなみに Walletキャニスターの情報はこうなっていた。

$ dfx canister --no-wallet --network ic info owdog-wiaaa-aaaad-qaaaq-cai
Controller: 5oynr-yl472-mav57-c2oxo-g7woc-yytib-mp5bo-kzg3b-622pu-uatef-uqe
Module hash: 0x3d5b221387875574a9fd75b3165403cf1b301650a602310e9e4229d2f6766dcc

このコントローラーはFleekのコントローラーなのだろう。

3.2. アクセス確認

独自ドメインの設定などが不要であれば、これで構築完了となる。

作成したサイトのURLはデプロイ後に表示されるので、そのままクリックするとサイトに接続できる。

GitHubのリポジトリを更新すると、Webサイトもしばらくして更新された。

4. まとめ

Fleekを使うとIC上に簡単にWebサイトを構築できることがわかった。静的サイトだけであれば、これを使えば十分かもしれない。今回はテストでサンプルページだけだったが、次はもう少し複雑なサイトを立ち上げてみたい。

一つ疑問なのは、キャニスターを生成する際のサイクル代はどうしたのかということ。こちらは何も払っていないので、おそらくFleekさんが負担してくれているのだろう。あとで請求書がこなければいいが。。

Discussion