Распространенное заблуждение о Jamstack заключается в том, что приложения Jamstack не могут иметь настраиваемые серверные части.
«Но, Джейсон, - хором восклицает интернет, - разве весь смысл приложения Jamstack не в том, что у него нет серверной части?»
Не совсем! Вся суть Jamstack в том, что для этого не требуется бэкэнд (потому что мы предварительно отрисовываем как можно больше контента и помещаем полученные статические ресурсы в CDN). Мы часто нуждаемся в пользовательских движках для PreRender с , а также найти пути для постепенного повышения наших приложений путем чтения или записей данных в пользовательском бэкэнд асинхронно на основе пользовательских данных или взаимодействиях.
Берегись! Если предыдущий абзац просто сбил вас с толку, ознакомьтесь с этим обзором архитектуры Jamstack .
В этой серии руководств , состоящей из двух частей , вы создадите полноценный пользовательский бэкэнд для хранения наших пользовательских данных, а затем создадите приложение Jamstack для чтения и записи в этот бэкэнд.
В части 1 (эта статья) вы будете использовать Strapi для создания пользовательского API для хранения данных.
Во второй части вы создадите приложение Jamstack, которое использует настраиваемый бэкэнд для:
- асинхронной загрузки данных из серверной части
- обновления бэкэнда, когда пользователи нажимают кнопку
К концу этой серии вы создадите полностью функциональный интерфейс и серверную часть для приложения Jamstack, развернутого в производственной среде!
Много текста
В этой части руководства вы:
- развернете новый экземпляр Strapi в DigitalOcean с их торговой площадки
- настроите Strapi с типами сбора данных для корги и реакций (погладить/подразнить)
- настроите доступ к Strapi, чтобы разрешить публичное чтение обоих типов и публичную запись реакций
Это может показаться удивительным, но для создания этого бэкэнда не требуется кода. Если вы хотите пропустить, вы можете увидеть демонстрацию приложения Jamstack или просмотреть исходный код внешнего интерфейса на GitHub .
## Настройте новый бэкэнд Strapi в DigitalOcean
Наш первый шаг - создать серверную часть с помощью Strapi. Поскольку Strapi является приложением Node, ему требуется сервер, чтобы его можно было использовать с системами сборки и обрабатывать асинхронные запросы. В этом руководстве мы будем использовать DigitalOcean для размещения Strapi.
Берегись! Если вы новичок в DigitalOcean, вы можете зарегистрироваться, чтобы получить 100 долларов на счет DigitalOcean здесь.
Создайте новую каплю Strapi с помощью DigitalOcean Marketplace.
После того, как вы вошли в свою учетную запись DigitalOcean, создайте новую каплю Strapi из Marketplace . Вы можете найти его,нажав «Marketplace» в разделе «Discover» на боковой панели, а затем выполнив поиск “Strapi”.
Нажмите кнопку «Создать каплю Strapi» в правом верхнем углу, и вы попадете в процесс создания капли.
Настройте параметры капли.
Это руководство построено с использованием базового размера 2 GB / 1 CPU, чего должно быть более чем достаточно для запуска и работы большинства приложений.
Выберите любой центр обработки данных, который вам больше нравится. Обычно вы хотите начать с ближайшего к вам центра обработки данных. Добавьте или выберите свой SSH-ключ (и) на случай, если вам нужно войти в Droplet с вашего терминала - мы не будем этого делать во время этого руководства, но важно настроить это на случай, если вам понадобится внести изменения позже.
Берегись! Если вы не знакомы с ключами SSH, DigitalOcean написала руководство по добавлению ключей SSH в дроплеты .
Затем выберите, хотите ли вы добавить теги (они необязательны и только для организации капель в DigitalOcean) и хотите ли вы включить резервное копирование. Резервное копирование стоит 20% от стоимости Droplet, но оно также автоматически еженедельно выполняет резервное копирование всей вашей серверной ВМ - это ваш выбор, но, на мой взгляд, они того стоят.
После выбора настроек нажмите «Создать каплю», и вы увидите индикатор выполнения, когда ваша новая капля будет подготовлена и запущена.
Примерно через минуту дроплет будет полностью настроен и запущен.
## Скопируйте IP-адрес вашего нового Strapi Droplet.
Как только капля запустится, вы увидите ее IP-адрес, и если вы наведете курсор мыши, есть возможность скопировать его в буфер обмена.
Скопируйте IP-адрес - все готово к настройке Strapi!
## Настройте свой экземпляр Strapi
После создания капли ваш экземпляр Strapi запущен и работает - код не требуется! Следующим шагом является посещение IP-адреса вашей капли в браузере и настройка Strapi.
При первом посещении Strapi показывает страницу «Начало работы» со ссылкой для создания администратора.
Нажмите кнопку «Создать первого администратора», чтобы начать.
## Создайте учетную запись администратора.
Учетная запись администратора имеет полные права доступа к экземпляру Strapi. Если вы раньше работали с системами управления контентом, такими как WordPress, учетная запись администратора работает аналогично. Если вы не знакомы с учетными записями администратора, эта учетная запись может делать все, поэтому храните учетные данные в безопасности!
Установите имя пользователя, пароль и адрес электронной почты, чтобы вы могли войти в систему и, при необходимости, восстановить свою учетную запись.
## Создавайте типы контента в Strapi.
После создания учетной записи администратора вы увидите страницу Strapi dasbhoard. Поскольку содержимого еще нет, отображается панель с просьбой создать первый тип содержимого.
Нажмите кнопку «Создать свой первый тип контента».
## Создайте собственный тип коллекции корги.
Наше приложение будет показывать фотографии корги посетителям сайта. На каждой фотографии корги будут две кнопки «реакции»: вы можете погладить или подразнить корги по своему выбору.
Для начала щелкните тип «коллекция» и назовите ее «Корги».
После нажатия «Продолжить» вы увидите возможность добавления полей. Щелкните тип поля «Текст» и добавьте новое поле с именем «фото». Он будет содержать URL-адрес фотографий корги, которые будут получены с Unsplash .
На вкладке «Дополнительные настройки» у вас также есть возможность пометить поля по мере необходимости. Это помогает избежать случайных пустых записей.
После выбора дополнительных настроек для поля фотографии нажмите «Добавить другое поле» и повторите процесс для полей «кредит» и «заголовок». Когда вы закончите, у вас будет тип коллекции «Корги» с тремя текстовыми полями.
Затем вам нужно создать тип «Реакция» для обработки питомцев и бупов!
## Добавьте тип коллекции Reactions.
Чтобы отслеживать бупов и домашних животных, создайте другой тип коллекции и назовите его «Реакция».
Поскольку это приложение поддерживает только две реакции - бупы и домашних животных - выберите поле «Перечисление».
Назовите поле «type», затем поместите «pet» и «boop» в поле значений в отдельные строки.
Каждая реакция должна быть связана с корги, спровоцировавшим реакцию. Для этого добавьте поле «Связь» и установите его так, чтобы у одного корги могло быть много реакций.
После сохранения коллекции «Реакция» откройте коллекцию «Корги», и вы увидите новое reactionsполе, в котором хранится связь с нашим типом «Реакция».
Это означает, что к каждой записи корги можно привязать любое количество погладить и подразнить, но погладить или подразнить можно прикрепить только к одному корги.
Корги не делятся поглаживаниями. Они очень ревнивы.
## Создайте записи корги в пользовательском интерфейсе администратора Strapi.
Чтобы сохранить разумные рамки этого руководства, мы не будем рассматривать создание корги из внешнего интерфейса приложения. Однако процесс, которому вы будете следовать для создания реакций позже, также позволит вам создавать корги с небольшими изменениями.
На данный момент щелкните тип коллекции «Corgis» в верхнем левом углу боковой панели Strapi, и вы увидите пустой список.
Страпи говорит нам, что корги нет, так что - подождите.
Сожалею. В любом случае.
Создайте нового корги, нажав кнопку «Добавить нового корги» в правом верхнем углу. Для первого корги используйте следующие значения полей, чтобы добавить этого очень хорошего корго:
- Фото: https://images.unsplash.com/photo-1519098901909-b1553a1190af?fit=crop&w=1267&q=80
- Предоставлено: Флоренсия Поттер.
- Название: Очень хорошее корго
Для второго добавьте щенка в очках:
- Фото: https://images.unsplash.com/photo-1523567353-71ea31cb9f73?auto=format&fit=crop&w=1350&q=80
- Предоставлено: Брианна Сантеллан.
- Название: Очки!
Сохраните, затем проверьте тип коллекции Corgi, чтобы увидеть обе записи.
## Установите разрешения на чтение и запись для типов контента в Strapi.
Strapi имеет детализированный контроль доступа для каждого типа контента, поэтому мы можем явно разрешить общедоступный доступ для чтения как значений корги, так и значений реакции, разрешая только создание реакций.
Для типов «реакции», проверьте count, createи find коробку. Для типа «Корги» отметьте find и findOne.
Strapi также упрощает настройку различных типов аутентифицированного доступа, что отлично подходит для более сложных случаев использования, таких как комментирование, когда кто-то должен иметь возможность редактировать или удалять свои собственные сообщения, но не чужие .
Берегись! Если вам нужно безопасно делать запросы с использованием секретных ключей, я написал пост о защите ключей API в приложениях Jamstack с помощью бессерверных функций . Посмотрите!
После настройки разрешений перейдите на IP-адрес своей капли, /corgis и вы увидите данные корги, возвращенные как JSON.
И вот так - без написания кода и без входа на серверы - вы создали и развернули полноценный пользовательский бэкэнд с помощью Strapi!
Сейчас прекрасное время, чтобы сделать небольшой перерыв и подзарядиться. В следующем разделе вы переключитесь и узнаете, как создать интерфейс для чтения и записи из этого внутреннего интерфейса.
## Что произойдет дальше
В следующей части этой серии вы будете использовать свой собственный серверный модуль Strapi для поддержки сайта Jamstack. Помимо загрузки корги на страницу, вы также создадите возможность для посетителей сайта добавлять реакции на каждого корги и сохранять эти реакции в Strapi.