Перейти до основного вмісту

IPFS для децентралізованих інтерфейсів користувача

ipfs
dapps
фронтенд
Для початківців
Орі Померанц
29 червня 2024 р.
4 хвилин на читання

Ви написали неймовірний новий децентралізований застосунок (dapp). Ви навіть написали для нього інтерфейс користувача. Але тепер ви боїтеся, що хтось спробує піддати його цензурі, вимкнувши ваш інтерфейс користувача, який знаходиться лише на одному сервері у хмарі. У цьому посібнику ви дізнаєтеся, як уникнути цензури, розмістивши свій інтерфейс користувача в міжпланетній файловій системі (IPFS) (відкривається в новій вкладці), щоб будь-хто зацікавлений міг закріпити його на сервері для майбутнього доступу.

Ви можете скористатися стороннім сервісом, таким як Fleek (відкривається в новій вкладці), щоб він виконав усю роботу. Цей посібник призначений для тих, хто хоче зробити достатньо, щоб зрозуміти, що саме вони роблять, навіть якщо це вимагає більше зусиль.

Початок роботи локально

Існує багато сторонніх провайдерів IPFS (відкривається в новій вкладці), але для тестування найкраще почати з локального запуску IPFS.

  1. Встановіть інтерфейс користувача IPFS (відкривається в новій вкладці).

  2. Створіть каталог із вашим вебсайтом. Якщо ви використовуєте Vite (відкривається в новій вкладці), скористайтеся цією командою:

    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 для локальної роздачі файлів, що не дуже захоплює. Наступний крок — зробити їх доступними для всього світу, коли ви перебуваєте офлайн.

Існує низка відомих сервісів закріплення (pinning services) (відкривається в новій вкладці). Виберіть один із них. Який би сервіс ви не використовували, вам потрібно створити акаунт і надати йому ідентифікатор контенту (CID) з вашого IPFS Desktop.

Особисто мені 4EVERLAND (відкривається в новій вкладці) здався найпростішим у використанні. Ось інструкції для нього:

  1. Перейдіть до панелі керування (відкривається в новій вкладці) та увійдіть за допомогою свого гаманця.

  2. На лівій бічній панелі натисніть Storage > 4EVER Pin.

  3. Натисніть Upload > Selected CID. Дайте своєму контенту назву та вкажіть CID з IPFS Desktop. Наразі CID — це рядок, який починається з Qm, за яким ідуть 44 літери та цифри, що представляють хеш, закодований у base-58 (відкривається в новій вкладці), наприклад QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ, але це, ймовірно, зміниться (відкривається в новій вкладці).

  4. Початковий статус — Queued (У черзі). Оновлюйте сторінку, доки він не зміниться на Pinned (Закріплено).

  5. Натисніть на свій CID, щоб отримати посилання. Ви можете переглянути мій застосунок тут (відкривається в новій вкладці).

  6. Можливо, вам знадобиться активація акаунта, щоб закріпити його більш ніж на місяць. Активація акаунта коштує близько 1 долара. Якщо ви закрили вікно, вийдіть із системи та увійдіть знову, щоб отримати запит на активацію ще раз.

Використання з IPFS

На цьому етапі ви маєте посилання на централізований шлюз, який обслуговує ваш контент в IPFS. Коротше кажучи, ваш інтерфейс користувача може бути трохи безпечнішим, але він усе ще не є цензуростійким. Для справжньої цензуростійкості користувачам потрібно використовувати IPFS безпосередньо з браузера (відкривається в новій вкладці).

Після того, як ви його встановите (і запрацює десктопний IPFS), ви зможете перейти за адресою /ipfs/<CID> (відкривається в новій вкладці) на будь-якому сайті та отримаєте цей контент, який надається децентралізовано.

Недоліки

Ви не можете надійно видаляти файли з IPFS, тому поки ви змінюєте свій інтерфейс користувача, ймовірно, краще або залишити його централізованим, або використовувати міжпланетну систему імен (IPNS) (відкривається в новій вкладці) — систему, яка забезпечує змінюваність поверх IPFS. Звісно, усе, що можна змінити, може бути піддано цензурі; у випадку з IPNS — шляхом тиску на особу, яка володіє відповідним приватним ключем.

Крім того, деякі пакети мають проблеми з IPFS, тому якщо ваш вебсайт дуже складний, це може бути не найкращим рішенням. І, звичайно, будь-що, що покладається на серверну інтеграцію, не може бути децентралізованим лише завдяки розміщенню клієнтської частини в IPFS.

Виявлення через ENS

Якщо ви спрямуєте ім'я ENS (наприклад, vitalik.eth) на свій вебсайт, він вважатиметься повністю децентралізованою вебсторінкою і буде автоматично закріплений сервісом dweb3.wtf (відкривається в новій вкладці), а також стане доступним для пошуку через пошукову систему web3compass.net (відкривається в новій вкладці), подібно до того, як це роблять DuckDuckGo, Brave Search або Google для традиційного інтернету.

Висновок

Так само, як Етеріум дозволяє вам децентралізувати базу даних та бізнес-логіку вашого dapp, IPFS дозволяє децентралізувати інтерфейс користувача. Це дає змогу перекрити ще один вектор атаки на ваш dapp.

Більше моїх робіт можна знайти тут (відкривається в новій вкладці).