Введение в развертывание веб-приложений в децентрализованной сети блокчейнов фонда DFINITY.
Мы создаем доказательство концепции для переноса нашего веб-приложения DeckDeckGo на Интернет-компьютер фонда DFINITY.
Первая веха нашего проекта еще не полностью достигнута, но мне удалось успешно развернуть наш редактор.
Вот несколько вещей, которые я узнал по ходу дела. Надеюсь, это тоже поможет вам начать работу.
Последнее обновление: 20 октября 2021 г.
Вступление
Для нашего проекта я выбрал путь, чтобы настроить все самостоятельно, используя DFINITY SDK и инструменты. Следующая информация, особенно касающаяся стоимости и развертывания, связана с таким подходом.
Если вы хотите упростить процесс веб-хостинга, Fleek - это то решение, которое вы ищете.
Нет уровня бесплатного пользования
По сравнению с известными поставщиками облачных услуг, фонд DFINITY еще не предлагает никаких бесплатных тарифных планов для изучения Интернет-компьютера.
При этом можно получить бесплатные циклы, чтобы начать строительство IC через их инициативу Cycles Faucet.
Кроме того, предлагается программа на 200 миллионов швейцарских франков для поддержки экосистемы разработчиков, награждение команд за создание децентрализованных приложений, инструментов и инфраструктуры на Интернет-компьютере.
Вы можете подать заявку на грант здесь. Удачи 🤞.
Предоплаченный хостинг
Что-то, что всегда немного пугает перед запуском нового приложения, - это связанные с ним расходы на случай, если оно станет широко использоваться. Особенно, если облачный провайдер не предлагает вам прямой вариант отказа от всего, а только предоставляет предупреждающие уведомления.
Интернет-компьютер работает иначе. Вы не регистрируете свои кредитные карты, чтобы покупать вычислительные мощности. Вы заранее заряжаете кошелек кредитами, так называемыми «циклами», для запуска вашего приложения.
Я предполагаю, что когда на счету больше нет кредита, приложение останавливается. Я считаю такой подход интересным и обнадеживающим.
Как покупать велосипеды
Вы должны владеть токенами Интернет-компьютерного протокола (токены ICP), собственными служебными токенами, стоимость которых определяется на открытом рынке, чтобы покупать циклы.
Другими словами: вы не можете покупать циклы напрямую с помощью своих кредитных карт и долларов. Сначала вам нужно купить ICP на платформе обмена криптовалютой и перенести их в свой кошелек, чтобы в конечном итоге преобразовать их в циклы.
Все еще не понимаете?
1. Создайте учетную запись на платформе обмена криптовалютой, я использовал Coinbase, и купите несколько токенов ICP с помощью ваших кредитных карт. Если вы просто хотите попробовать, подойдет ~ 5 долларов.
2. Для передачи и получения только что купленных токенов вам потребуется удостоверение личности и кошелек на компьютере с Интернетом. Самый простой способ - использовать приложение NNS, которое позволяет любому взаимодействовать с компьютерной сетевой нервной системой Интернета с помощью удобного пользовательского интерфейса.
3. В приложении NNS вы получаете основной кошелек по умолчанию. Вы можете создать больше учетных записей, но я просто выбрал учетную запись по умолчанию. На главном экране скопируйте связанный ID, идентификатор для передачи ICP с платформы обмена.
4. На платформе обмена найдите параметр «Отправить и получить» на панели управления и используйте указанный выше идентификатор в качестве получателя. В Coinbase вы должны ввести его в поле ввода, принимая номер телефона и адрес электронной почты. Да, верно, туда.
Вот и все, токены должны быть переданы в течение нескольких секунд, и вы сможете преобразовать ICP в циклы.
Как развернуть компьютер в Интернете
Я прочитал документацию туда и обратно, но лучшего руководства, чем эта статья, не нашел.
Он шаг за шагом показывает наиболее полный способ развертывания веб-приложения на компьютере в Интернете. Престижность автору Кайл Павлин 🙏.
Webpack и React First
Все примеры, которые вы найдете в документации и форуме, в основном ориентированы на Webpack и React.
Я использую их во многих проектах и могу понять, что команда должна уделять приоритетное внимание определенным темам, но я бы предпочел первый подход без фреймворков и сборщиков.
В любом случае, к счастью, участник MioQuispe создал интерфейс командной строки create-ic-app, который предоставляет различные варианты стартовых наборов.
Если вы используете Rollup, как мы это делаем через Stencil, вы также можете проверить наше репо (см. Stencil.config.ts и dfx.config.ts).
Развертывание
Сначала мне показалось, что Internet Computer не очень хорошо подходит для пакетов JavaScript, разделенных на несколько частей (модули ES), но я ошибался.
После нескольких итераций я решил свои проблемы и ответил на свои вопросы.
Стоимость загрузки
Выгрузка активов в контейнер требует времени и затрат. Каждый ресурс обрабатывается и развертывается в обмен на несколько циклов.
Я не нашел и не понял, как они рассчитываются, но кажется, что количество операций по передаче файлов оказывает большее влияние на связанные расходы, чем размер. Как было сказано, это мое наблюдение, это может быть неверно.
Каждый актив анализируется и обрабатывается, загрузка одного ресурса занимает несколько секунд.
Хеш создается для каждого загруженного ресурса, и, если никаких изменений не обнаружено, файлы не будут анализироваться и повторно импортироваться. Поэтому для самой первой загрузки нужно больше ресурсов, чем для тех, кто последует.
Тем не менее, я позволил вам представить, что это означало, когда я впервые попытался загрузить наше приложение, которое содержит ›290 фрагментов JavaScript и› 1'000 изображений SVG 🤪.
Как бы то ни было, в итоге мне удалось настроить свой проект на лучшую. В частности, я удалил все неиспользуемые SVG (фактически используется ‹100) и другие ресурсы, такие как .map.
Я также более подробно изучил стоимость загрузки этих ›290 фрагментов JS, которые в большинстве своем весит всего несколько тысяч байт, и заметил, что связанные с этим затраты были на самом деле низкими.
Если я правильно понял, согласно документации, 0,013 терациклов, которые были списаны с моего счета за такую операцию, на самом деле составляют менее 0,02 доллара.
Время загрузки
Если после развертывания приложения вы используете URL-адрес по умолчанию <your-app-id>.ic0.app, сервисный работник проверит, что все доставленные ресурсы сертифицированы перед загрузкой.
Это означает, что чем больше у вас ресурсов, чем больше у вас файлов JavaScript, тем медленнее он запускается.
К счастью, есть еще один поддомен, <your-app-id>.raw.ic0.app, где такая проверка не выполняется. Время загрузки де-факто улучшилось.
Модули ES
Долгое время мне не удавалось развернуть или использовать наше приложение в моделируемой локальной сети.
Я использовал тестовый URL-адрес http: // localhost: 8000 /? CanisterId = ‹canister_id›, который не удался при загрузке модулей ES, потому что он не может правильно установить реферер.
К счастью, благодаря отзывам команды DFINITY, мы выяснили, что использование идентификатора контейнера в качестве локального поддомена вместо URL-адреса запроса решает проблему: http: // ‹canister_id› .localhost: 8000 /
Резюме
У меня все еще есть немного работы по повестке дня, но наша первая веха удачно сочетается. Вчера я даже начал смотреть на аутентификацию (часть нашей второй вехи). Я надеюсь, что приведенные выше советы и рекомендации могут помочь другим разработчикам начать работу с этой захватывающей новой технологией.
Бесконечность не предел!
Дэйвид
Вы можете связаться со мной в Твиттере или на моем сайте.
Попробуйте DeckDeckGo для ваших следующих презентаций.
Больше контента на plainenglish.io
