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

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

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

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

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

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

  1. Перейдіть до панелі керування (opens in a new tab) та увійдіть за допомогою свого гаманця.

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

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

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

  5. Натисніть на свій CID, щоб отримати посилання. Ви можете переглянути мій застосунок тут (opens in a new tab).

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

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

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

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

Недоліки

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

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

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

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

Висновок

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

Більше моїх робіт можна знайти тут (opens in a new tab).