メインコンテンツへスキップ

分散型ユーザーインターフェースのためのIPFS

ipfs
dapps
フロントエンド
初級
オリ・ポメランツ
2024年6月29日
8 分で読めます

あなたは素晴らしい新しい分散型アプリケーション (dapp) を作成しました。そのためのユーザーインターフェースも作成しました。しかし今、クラウド上の1つのサーバーにすぎないユーザーインターフェースをダウンさせることで、誰かがそれを検閲しようとするのではないかと心配しています。このチュートリアルでは、ユーザーインターフェースを**IPFS (InterPlanetary File System) (opens in a new tab)**に配置して検閲を回避し、興味のある人が将来のアクセスのためにサーバーにピン留めできるようにする方法を学びます。

Fleek (opens in a new tab)などのサードパーティサービスを使用して、すべての作業を行うこともできます。このチュートリアルは、手間がかかっても、自分が何をしているのかを理解できる程度に自分で作業したい人向けです。

ローカルでの開始

複数のサードパーティのIPFSプロバイダー (opens in a new tab)がありますが、テストのためにローカルでIPFSを実行することから始めるのが最善です。

  1. IPFSユーザーインターフェース (opens in a new tab)をインストールします。

  2. ウェブサイトのディレクトリを作成します。Vite (opens in a new tab)を使用している場合は、次のコマンドを使用します。

    pnpm vite build

  3. IPFS Desktopで、Import > Folderをクリックし、前の手順で作成したディレクトリを選択します。

  4. アップロードしたフォルダを選択し、Renameをクリックします。より意味のある名前を付けます。

  5. もう一度選択し、Share linkをクリックします。URLをクリップボードにコピーします。リンクはhttps://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJのようになります。

  6. Statusをクリックします。Advancedタブを展開して、ゲートウェイアドレスを確認します。たとえば、私のシステムではアドレスはhttp://127.0.0.1:8080です。

  7. リンクの手順で取得したパスとゲートウェイアドレスを組み合わせて、自分のアドレスを見つけます。たとえば、上記の例の場合、URLはhttp://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJになります。ブラウザでそのURLを開いて、サイトを確認します。

アップロード

これでIPFSを使用してローカルでファイルを提供できるようになりましたが、これだけではあまり面白くありません。次のステップは、オフラインのときでも世界中からアクセスできるようにすることです。

よく知られているピン留めサービス (opens in a new tab)がいくつかあります。そのうちの1つを選択してください。どのサービスを使用する場合でも、アカウントを作成し、IPFS Desktopにある**コンテンツ識別子 (CID)**を提供する必要があります。

個人的には、4EVERLAND (opens in a new tab)が最も使いやすいと感じました。手順は次のとおりです。

  1. ダッシュボード (opens in a new tab)にアクセスし、ウォレットでログインします。

  2. 左側のサイドバーでStorage > 4EVER Pinをクリックします。

  3. Upload > Selected CIDをクリックします。コンテンツに名前を付け、IPFS DesktopからCIDを提供します。現在、CIDはQmで始まり、その後にQmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJのようなBase58エンコード (opens in a new tab)されたハッシュを表す44文字の英数字が続く文字列ですが、これは変更される可能性があります (opens in a new tab)。

  4. 初期ステータスはQueuedです。Pinnedに変わるまでリロードします。

  5. CIDをクリックしてリンクを取得します。私のアプリケーションはこちら (opens in a new tab)で確認できます。

  6. 1か月以上ピン留めするには、アカウントの有効化が必要になる場合があります。アカウントの有効化には約1ドルかかります。閉じてしまった場合は、ログアウトして再度ログインすると、再度有効化を求められます。

IPFSからの使用

この時点で、IPFSコンテンツを提供する中央集権型ゲートウェイへのリンクが取得できました。つまり、ユーザーインターフェースは少し安全になったかもしれませんが、まだ検閲耐性はありません。真の検閲耐性を実現するには、ユーザーがブラウザから直接 (opens in a new tab)IPFSを使用する必要があります。

それをインストールし（そしてデスクトップ版IPFSが機能していれば）、任意のサイトで/ipfs/<CID> (opens in a new tab)にアクセスすると、分散型の方法で提供されるそのコンテンツを取得できます。

欠点

IPFSファイルを確実に削除することはできないため、ユーザーインターフェースを変更している間は、中央集権型のままにしておくか、IPFS上で可変性を提供するシステムであるIPNS (InterPlanetary Name System) (opens in a new tab)を使用するのがおそらく最善です。もちろん、変更可能なものはすべて検閲される可能性があり、IPNSの場合は、対応する秘密鍵を持つ人に圧力をかけることで検閲される可能性があります。

さらに、一部のパッケージはIPFSで問題が発生するため、ウェブサイトが非常に複雑な場合、これは良い解決策ではないかもしれません。そしてもちろん、サーバー統合に依存するものは、クライアント側をIPFSに置くだけでは分散化できません。

ENSによる発見可能性

ENS名（vitalik.ethなど）をウェブサイトに向けると、完全に分散化されたウェブページと見なされ、dweb3.wtf (opens in a new tab)サービスによって自動的にピン留めされます。また、従来のウェブにおけるDuckDuckGo、Brave Search、Googleのように、web3compass.net (opens in a new tab)検索エンジンを通じて検索可能になります。

まとめ

イーサリアムがdappのデータベースとビジネスロジックの側面を分散化できるようにするのと同様に、IPFSはユーザーインターフェースを分散化できるようにします。これにより、dappに対する攻撃ベクトルをもう1つ遮断できます。

私の他の作品はこちらをご覧ください (opens in a new tab)。