--- title: "IPFS для децентрализованных пользовательских интерфейсов" description: "Это руководство научит вас использовать IPFS для хранения пользовательского интерфейса децентрализованного приложения (dapp). Хотя данные и бизнес-логика приложения децентрализованы, без цензуроустойчивого пользовательского интерфейса пользователи все равно могут потерять к нему доступ." author: "Ори Померанц" tags: - ipfs - dapps - фронтенд skill: beginner breadcrumb: "IPFS для UI dapps" lang: ru published: 2024-06-29 --- Вы написали невероятное новое децентрализованное приложение (dapp). Вы даже написали для него [пользовательский интерфейс](/developers/tutorials/creating-a-wagmi-ui-for-your-contract/). Но теперь вы боитесь, что кто-то попытается подвергнуть его цензуре, отключив ваш пользовательский интерфейс, который находится всего лишь на одном сервере в облаке. В этом руководстве вы узнаете, как избежать цензуры, разместив свой пользовательский интерфейс в **[межпланетной файловой системе (IPFS)](https://ipfs.tech/developers/)**, чтобы любой желающий мог закрепить его на сервере для будущего доступа. Вы могли бы использовать сторонний сервис, такой как [Fleek](https://resources.fleek.xyz/docs/), чтобы он сделал всю работу. Это руководство предназначено для тех, кто хочет сделать достаточно, чтобы понять, что именно они делают, даже если это потребует больше усилий. ## Локальный запуск {#getting-started-locally} Существует множество [сторонних провайдеров IPFS](https://docs.ipfs.tech/how-to/work-with-pinning-services/#use-a-third-party-pinning-service), но для тестирования лучше всего начать с локального запуска IPFS. 1. Установите [пользовательский интерфейс IPFS](https://docs.ipfs.tech/install/ipfs-desktop/#install-instructions). 2. Создайте каталог с вашим веб-сайтом. Если вы используете [Vite](https://vite.dev/), выполните эту команду: ```sh 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-адрес в браузере, чтобы увидеть свой сайт. ## Загрузка {#uploading} Итак, теперь вы можете использовать IPFS для локальной раздачи файлов, что не очень захватывающе. Следующий шаг — сделать их доступными для всего мира, когда вы находитесь в автономном режиме. Существует ряд известных [сервисов закрепления (pinning services)](https://docs.ipfs.tech/concepts/persistence/#pinning-services). Выберите один из них. Какой бы сервис вы ни использовали, вам нужно создать аккаунт и предоставить ему **идентификатор контента (CID)** из вашего IPFS Desktop. Лично мне показалось, что [4EVERLAND](https://docs.4everland.org/storage/4ever-pin/guides) проще всего в использовании. Вот инструкции для него: 1. Перейдите в [панель управления](https://dashboard.4everland.org/overview) и войдите с помощью своего кошелька. 2. На левой боковой панели нажмите **Storage > 4EVER Pin**. 3. Нажмите **Upload > Selected CID**. Дайте вашему контенту имя и укажите CID из IPFS Desktop. В настоящее время CID — это строка, которая начинается с `Qm`, за которой следуют 44 буквы и цифры, представляющие собой хеш в [кодировке base-58](https://medium.com/bootdotdev/base64-vs-base58-encoding-c25553ff4524), например `QmaCuQ7yN6iyBjLmLGe8YiFuCwnePoKfVu6ue8vLBsLJQJ`, но [это, скорее всего, изменится](https://docs.ipfs.tech/concepts/content-addressing/#version-1-v1). 4. Начальный статус — **Queued** (В очереди). Обновляйте страницу, пока он не изменится на **Pinned** (Закреплено). 5. Нажмите на свой CID, чтобы получить ссылку. Вы можете посмотреть мое приложение [здесь](https://bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im.ipfs.dweb.link/). 6. Возможно, вам потребуется активация аккаунта, чтобы закрепить его более чем на месяц. Активация аккаунта стоит около 1 доллара. Если вы закрыли окно, выйдите из системы и войдите снова, чтобы получить повторный запрос на активацию. ## Использование из IPFS {#using-from-ipfs} На данном этапе у вас есть ссылка на централизованный шлюз, который обслуживает ваш контент в IPFS. Короче говоря, ваш пользовательский интерфейс может быть немного безопаснее, но он все еще не цензуроустойчивый. Для реальной цензуроустойчивости пользователям необходимо использовать IPFS [напрямую из браузера](https://docs.ipfs.tech/install/ipfs-companion/#prerequisites). Как только вы это установите (и запустите десктопный IPFS), вы сможете перейти по адресу [/ipfs/``](https://any.site/ipfs/bafybeifqka2odrne5b6l5guthqvbxu4pujko2i6rx2zslvr3qxs6u5o7im) на любом сайте и получите этот контент, предоставляемый децентрализованным образом. ## Недостатки {#drawbacks} Вы не можете надежно удалять файлы из IPFS, поэтому, пока вы вносите изменения в свой пользовательский интерфейс, вероятно, лучше либо оставить его централизованным, либо использовать [межпланетную систему имен (IPNS)](https://docs.ipfs.tech/concepts/ipns/#mutability-in-ipfs) — систему, которая обеспечивает изменяемость поверх IPFS. Конечно, все, что можно изменить, может быть подвергнуто цензуре, в случае с IPNS — путем давления на человека, владеющего соответствующим приватным ключом. Кроме того, у некоторых пакетов возникают проблемы с IPFS, поэтому, если ваш веб-сайт очень сложный, это может оказаться не лучшим решением. И, конечно же, все, что зависит от серверной интеграции, не может стать децентрализованным только за счет размещения клиентской части в IPFS. ## Обнаруживаемость через ENS {#discoverability} Если вы привяжете имя ENS (например, vitalik.eth) к своему веб-сайту, он будет считаться полностью децентрализованной веб-страницей и будет автоматически закреплен сервисом [dweb3.wtf](https://dweb3.wtf), а также станет доступен для поиска через поисковую систему [web3compass.net](https://web3compass.net), подобно тому, как это делают DuckDuckGo, Brave Search или Google для традиционного интернета. ## Заключение {#conclusion} Подобно тому, как Эфириум позволяет вам децентрализовать базу данных и бизнес-логику вашего dapp, IPFS позволяет децентрализовать пользовательский интерфейс. Это дает возможность перекрыть еще один вектор атаки на ваше приложение. [Здесь вы можете ознакомиться с другими моими работами](https://cryptodocguy.pro/).