Passer au contenu principal

IPFS pour les interfaces utilisateur décentralisées

ipfs
dapps
front-end
Débutant
Ori Pomerantz
29 juin 2024
5 minutes de lecture

Vous avez écrit une nouvelle application décentralisée (dapp) incroyable. Vous avez même écrit une interface utilisateur pour celle-ci. Mais maintenant, vous craignez que quelqu'un tente de la censurer en mettant hors ligne votre interface utilisateur, qui n'est qu'un simple serveur dans le cloud. Dans ce tutoriel, vous apprendrez comment éviter la censure en hébergeant votre interface utilisateur sur le système de fichiers interplanétaire (IPFS) (opens in a new tab) afin que toute personne intéressée puisse l'épingler sur un serveur pour un accès futur.

Vous pourriez utiliser un service tiers tel que Fleek (opens in a new tab) pour faire tout le travail. Ce tutoriel s'adresse aux personnes qui souhaitent en faire suffisamment pour comprendre ce qu'elles font, même si cela demande plus de travail.

Commencer localement

Il existe de multiples fournisseurs IPFS tiers (opens in a new tab), mais il est préférable de commencer par exécuter IPFS localement pour faire des tests.

  1. Installez l'interface utilisateur IPFS (opens in a new tab).

  2. Créez un répertoire avec votre site web. Si vous utilisez Vite (opens in a new tab), utilisez cette commande :

    pnpm vite build

  3. Dans IPFS Desktop, cliquez sur Import > Folder (Importer > Dossier) et sélectionnez le répertoire que vous avez créé à l'étape précédente.

  4. Sélectionnez le dossier que vous venez de téléverser et cliquez sur Rename (Renommer). Donnez-lui un nom plus significatif.

  5. Sélectionnez-le à nouveau et cliquez sur Share link (Partager le lien). Copiez l'URL dans le presse-papiers. Le lien sera similaire à https://ipfs.io/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ.

  6. Cliquez sur Status (Statut). Développez l'onglet Advanced (Avancé) pour voir l'adresse de la passerelle. Par exemple, sur mon système, l'adresse est http://127.0.0.1:8080.

  7. Combinez le chemin de l'étape du lien avec l'adresse de la passerelle pour trouver votre adresse. Par exemple, pour l'exemple ci-dessus, l'URL est http://127.0.0.1:8080/ipfs/QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ. Ouvrez cette URL dans un navigateur pour voir votre site.

Téléversement

Vous pouvez donc maintenant utiliser IPFS pour servir des fichiers localement, ce qui n'est pas très excitant. L'étape suivante consiste à les rendre disponibles pour le monde entier lorsque vous êtes hors ligne.

Il existe un certain nombre de services d'épinglage (opens in a new tab) bien connus. Choisissez-en un. Quel que soit le service que vous utilisez, vous devez créer un compte et lui fournir l'identifiant de contenu (CID) présent dans votre IPFS Desktop.

Personnellement, j'ai trouvé que 4EVERLAND (opens in a new tab) était le plus facile à utiliser. Voici les instructions pour l'utiliser :

  1. Accédez au tableau de bord (opens in a new tab) et connectez-vous avec votre portefeuille.

  2. Dans la barre latérale gauche, cliquez sur Storage > 4EVER Pin.

  3. Cliquez sur Upload > Selected CID. Donnez un nom à votre contenu et fournissez le CID provenant d'IPFS Desktop. Actuellement, un CID est une chaîne de caractères qui commence par Qm suivie de 44 lettres et chiffres qui représentent un hash encodé en base-58 (opens in a new tab), tel que QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, mais cela est susceptible de changer (opens in a new tab).

  4. Le statut initial est Queued (En file d'attente). Rechargez la page jusqu'à ce qu'il passe à Pinned (Épinglé).

  5. Cliquez sur votre CID pour obtenir le lien. Vous pouvez voir mon application ici (opens in a new tab).

  6. Vous devrez peut-être activer votre compte pour qu'il reste épinglé pendant plus d'un mois. L'activation du compte coûte environ 1 $. Si vous l'avez fermé, déconnectez-vous puis reconnectez-vous pour qu'on vous demande de l'activer à nouveau.

Utilisation depuis IPFS

À ce stade, vous disposez d'un lien vers une passerelle centralisée qui sert votre contenu IPFS. En bref, votre interface utilisateur est peut-être un peu plus sûre, mais elle n'est toujours pas résistante à la censure. Pour une véritable résistance à la censure, les utilisateurs doivent utiliser IPFS directement depuis un navigateur (opens in a new tab).

Une fois que vous l'avez installé (et qu'IPFS Desktop fonctionne), vous pouvez aller sur /ipfs/<CID> (opens in a new tab) sur n'importe quel site et vous obtiendrez ce contenu, servi de manière décentralisée.

Inconvénients

Vous ne pouvez pas supprimer de manière fiable des fichiers IPFS, donc tant que vous modifiez votre interface utilisateur, il est probablement préférable de la laisser centralisée, ou d'utiliser le système de noms interplanétaire (IPNS) (opens in a new tab), un système qui offre de la mutabilité par-dessus IPFS. Bien sûr, tout ce qui est mutable peut être censuré, dans le cas d'IPNS en faisant pression sur la personne possédant la clé privée à laquelle il correspond.

De plus, certains paquets ont des problèmes avec IPFS, donc si votre site web est très complexe, ce n'est peut-être pas une bonne solution. Et bien sûr, tout ce qui repose sur une intégration serveur ne peut pas être décentralisé simplement en ayant le côté client sur IPFS.

Découvrabilité via ENS

Si vous faites pointer un nom ENS (comme vitalik.eth) vers votre site web, il sera considéré comme une page web entièrement décentralisée et sera automatiquement épinglé par le service dweb3.wtf (opens in a new tab), ainsi que rendu consultable via le moteur de recherche web3compass.net (opens in a new tab), un peu comme le font DuckDuckGo, Brave Search ou Google pour le web traditionnel.

Conclusion

Tout comme Ethereum vous permet de décentraliser les aspects de base de données et de logique métier de votre application décentralisée (dapp), IPFS vous permet de décentraliser l'interface utilisateur. Cela vous permet de fermer un vecteur d'attaque supplémentaire contre votre dapp.

Voir ici pour plus de mes travaux (opens in a new tab).