Zum Hauptinhalt springen

IPFS für dezentrale Benutzeroberflächen

ipfs
dapps
frontend
Anfänger
Ori Pomerantz
29. Juni 2024
4 Minuten Lesezeit

Du hast eine unglaubliche neue dezentrale Anwendung (Dapp) geschrieben. Du hast sogar eine Benutzeroberfläche dafür entwickelt. Aber jetzt befürchtest du, dass jemand versuchen könnte, sie zu zensieren, indem er deine Benutzeroberfläche offline nimmt, die nur auf einem einzigen Server in der Cloud liegt. In diesem Tutorial lernst du, wie du Zensur vermeidest, indem du deine Benutzeroberfläche im Interplanetary File System (IPFS) (opens in a new tab) bereitstellst, sodass jeder Interessierte sie für den zukünftigen Zugriff auf einem Server anpinnen (pinnen) kann.

Du könntest einen Drittanbieter-Dienst wie Fleek (opens in a new tab) nutzen, um die ganze Arbeit zu erledigen. Dieses Tutorial richtet sich an Personen, die genug selbst machen möchten, um zu verstehen, was sie tun, auch wenn es mehr Arbeit bedeutet.

Lokal loslegen

Es gibt mehrere IPFS-Drittanbieter (opens in a new tab), aber für Testzwecke ist es am besten, IPFS zunächst lokal auszuführen.

  1. Installiere die IPFS-Benutzeroberfläche (opens in a new tab).

  2. Erstelle ein Verzeichnis mit deiner Website. Wenn du Vite (opens in a new tab) verwendest, nutze diesen Befehl:

    pnpm vite build

  3. Klicke in IPFS Desktop auf Import > Folder und wähle das im vorherigen Schritt erstellte Verzeichnis aus.

  4. Wähle den gerade hochgeladenen Ordner aus und klicke auf Rename. Gib ihm einen aussagekräftigeren Namen.

  5. Wähle ihn erneut aus und klicke auf Share link. Kopiere die URL in die Zwischenablage. Der Link sieht ähnlich aus wie https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Klicke auf Status. Klappe den Tab Advanced auf, um die Gateway-Adresse zu sehen. Auf meinem System lautet die Adresse beispielsweise http://127.0.0.1:8080.

  7. Kombiniere den Pfad aus dem Link-Schritt mit der Gateway-Adresse, um deine Adresse zu ermitteln. Für das obige Beispiel lautet die URL beispielsweise http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Öffne diese URL in einem Browser, um deine Website zu sehen.

Hochladen

Jetzt kannst du IPFS also nutzen, um Dateien lokal bereitzustellen, was noch nicht sehr aufregend ist. Der nächste Schritt besteht darin, sie für die Welt verfügbar zu machen, wenn du offline bist.

Es gibt eine Reihe bekannter Pinning-Dienste (opens in a new tab). Wähle einen davon aus. Unabhängig davon, welchen Dienst du nutzt, musst du ein Konto erstellen und ihm den Content Identifier (CID) aus deinem IPFS-Desktop zur Verfügung stellen.

Persönlich fand ich 4EVERLAND (opens in a new tab) am einfachsten zu bedienen. Hier ist die Anleitung dafür:

  1. Gehe zum Dashboard (opens in a new tab) und melde dich mit deiner Wallet an.

  2. Klicke in der linken Seitenleiste auf Storage > 4EVER Pin.

  3. Klicke auf Upload > Selected CID. Gib deinem Inhalt einen Namen und trage die CID aus dem IPFS-Desktop ein. Derzeit ist eine CID eine Zeichenfolge, die mit Qm beginnt, gefolgt von 44 Buchstaben und Ziffern, die einen Base-58-kodierten (opens in a new tab) Hash darstellen, wie zum Beispiel QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Dies wird sich jedoch wahrscheinlich ändern (opens in a new tab).

  4. Der anfängliche Status ist Queued (In der Warteschlange). Lade die Seite neu, bis er zu Pinned (Gepinnt) wechselt.

  5. Klicke auf deine CID, um den Link zu erhalten. Du kannst meine Anwendung hier (opens in a new tab) sehen.

  6. Möglicherweise musst du dein Konto aktivieren, damit es länger als einen Monat gepinnt bleibt. Die Konto-Aktivierung kostet etwa 1 $. Wenn du das Fenster geschlossen hast, melde dich ab und wieder an, um erneut zur Aktivierung aufgefordert zu werden.

Nutzung über IPFS

An diesem Punkt hast du einen Link zu einem zentralisierten Gateway, das deine IPFS-Inhalte bereitstellt. Kurz gesagt: Deine Benutzeroberfläche ist vielleicht etwas sicherer, aber immer noch nicht zensurresistent. Für echte Zensurresistenz müssen Benutzer IPFS direkt über einen Browser (opens in a new tab) nutzen.

Sobald du das installiert hast (und das Desktop-IPFS funktioniert), kannst du auf jeder Website zu /ipfs/<CID> (opens in a new tab) gehen und erhältst diesen Inhalt auf dezentrale Weise bereitgestellt.

Nachteile

Du kannst IPFS-Dateien nicht zuverlässig löschen. Solange du also deine Benutzeroberfläche noch veränderst, ist es wahrscheinlich am besten, sie entweder zentralisiert zu belassen oder das Interplanetary Name System (IPNS) (opens in a new tab) zu verwenden, ein System, das Veränderbarkeit (Mutability) auf IPFS aufbaut. Natürlich kann alles, was veränderbar ist, zensiert werden – im Fall von IPNS, indem Druck auf die Person mit dem entsprechenden privaten Schlüssel ausgeübt wird.

Zusätzlich haben einige Pakete Probleme mit IPFS. Wenn deine Website also sehr komplex ist, ist dies möglicherweise keine gute Lösung. Und natürlich kann nichts, was auf Serverintegration angewiesen ist, dezentralisiert werden, nur indem die Client-Seite auf IPFS liegt.

Auffindbarkeit über ENS

Wenn du einen ENS-Namen (wie vitalik.eth) auf deine Website verweisen lässt, wird sie als vollständig dezentrale Webseite betrachtet und automatisch vom Dienst dweb3.wtf (opens in a new tab) gepinnt. Außerdem wird sie über die Suchmaschine web3compass.net (opens in a new tab) durchsuchbar gemacht, ähnlich wie es DuckDuckGo, Brave Search oder Google für das traditionelle Web tun.

Fazit

Genauso wie Ethereum es dir ermöglicht, die Datenbank- und Geschäftslogik-Aspekte deiner Dapp zu dezentralisieren, ermöglicht dir IPFS die Dezentralisierung der Benutzeroberfläche. Dadurch kannst du einen weiteren Angriffsvektor gegen deine Dapp ausschalten.

Hier findest du weitere meiner Arbeiten (opens in a new tab).