Хостинг бесплатной Strapi CMS на железной дороге [Создание персонального сайта блога часть 1]

Это первая часть серии «Создание персонального сайта-блога». В этой серии мы настроим бесплатную CMS для хранения контента нашего блога на Railway, создадим приложение React с помощью генерации статических сайтов Next.js и TailwindCSS для представления статей и разместим его на Netlify.

❗ Это обновленная версия руководства. В первоначальном варианте вместо Railway использовался Heroku, но поскольку Heroku свернул свой бесплатный уровень, я решил переписать первые части этой серии, чтобы по-прежнему использовать только бесплатные ресурсы.

Все статьи:
Часть 1: Хостинг бесплатной Strapi CMS на Railway

Если вы хотите создать простой блог или сайт-портфолио, всегда полезно использовать хорошую CMS (систему управления контентом). Довольно долго WordPress был наиболее популярным решением, но сейчас выбор не так очевиден. Как амбициозный разработчик вы, конечно, можете попробовать написать свою собственную CMS, но давайте будем откровенны — в большинстве случаев лучший способ — использовать уже существующую. Именно таким был мой подход, когда я начал работать над своим личным сайтом.

Меня интересовало следующее:

  • возможность изменять содержимое сайта без изменения кода
  • простая функциональность блога
  • готовая интеграция с GraphQL
  • дешевое обслуживание сайта (желательно бесплатное).

После некоторого времени «исследований» я выбрал Strapi CMS по первым трем пунктам и Railway по последнему.

Почему Strapi?

  • Она легкая — по сравнению с другими CMS Strapi легкая и очень простая в настройке.
  • Она безголовая по дизайну — я определенно предпочитаю безголовые CMS решения традиционным CMS, они дают гораздо больше гибкости.
  • Она написана на JavaScript — это определенно помогает в написании расширений/плагинов, если вы используете JS на ежедневной основе (что я и делаю).
  • У него действительно обширная документация — документация Strapi помогла мне в тоннах ситуаций, если у вас возникнет проблема с Strapi, почти гарантированно вы найдете помощь в документации.

Почему безголовый?

Основная причина — она не зависит от технологии — традиционные CMS требуют, чтобы вы писали шаблоны и т.д. в той технологии, в которой написана CMS. С headless эта проблема отпадает. Вы используете конечные точки REST/GraphQL для получения данных и отображения их так, как вам удобно.

Как это настроить?

Для установки вашей Strapi CMS вы будете использовать Railway. Процесс развертывания довольно прост, но чтобы сделать его еще проще, вы начнете с настройки Cloudinary. Если вы сделаете это сейчас — настройка Strapi для использования Cloudinary в качестве хранилища изображений будет простым делом — Railway потребуются ключи API, а затем он настроит все автоматически.

Поскольку вы создаете личный блог, вполне возможно, что вы захотите использовать некоторые изображения в записях блога. CMS размещена на бесплатном хостинге Railway, поэтому хранилище довольно ограничено. Поэтому вам нужно подумать о других решениях. И здесь на помощь приходит облако.

Для этого я выбрал Cloudinary. Это довольно популярная платформа для управления активами и оптимизации изображений. Но главная причина использовать ее для нашего личного проекта заключается в том, что у нее есть бесплатный уровень с простым в использовании API. Настройка не требует особых усилий — вы пройдете ее сегодня.

Но прежде чем начать — отправляйтесь в Cloudinary, создайте бесплатный аккаунт (процесс довольно стандартный), а когда закончите — войдите в систему и получите конфигурацию SDK (Getting Started -> Configure your SDK -> Start configuring).

Сохраните эти переменные где-нибудь, а затем давайте создадим ваше приложение Strapi в Railway.

Перейдите к конструктору Strapi в Railway

Войдите под своей учетной записью GitHub и предоставьте необходимые доступы.

Когда вы это сделаете, вы должны увидеть что-то вроде этого (если нет — просто обновите страницу):

Здесь вы должны указать имя для вашего репозитория. Вставьте ваши ключи Cloudinary в специальные поля, а для остальных (ADMIN_JWT_SECRET, JWT_SECRET, APP_KEYS, API_TOKEN_SALT) — сгенерируйте новые значения в терминале с помощью openssl rand -base64 32 (не забудьте сохранить их где-нибудь).

Когда вы заполните все поля — нажмите Deploy. Вот и все, это так просто. Подождите несколько минут, пока сборка будет завершена, после чего вы сможете продолжить настройку учетной записи администратора для Strapi.


Если вы хотите, вы можете настроить свой домен Railway для cms — после завершения сборки перейдите на последнюю вкладку (Settings) и там вы сможете легко отредактировать домен.


Перейдите по адресу https://[yourapp].up.railway.app/admin, чтобы установить пользователя-администратора, а затем войдите в систему. Вы должны попасть в панель управления.

Поскольку приложение находится в производственном режиме, вы не можете сделать здесь никаких настроек. Вы не можете создать новый тип контента или добавить новый плагин. Поэтому вам нужно перейти в режим разработчика — внести изменения там и переразвернуть приложение.

Strapi, созданный Railway, зависит от базы данных postgres, но использовать ее локально — это, безусловно, излишество. Сейчас вы настроите базу данных SQLite для использования в локальной среде. Сначала клонируйте репозиторий, созданный Railway. Перед установкой и запуском сервера разработки вам нужно будет сделать несколько настроек.

Скопируйте файл config/database.js в config/env/production, затем замените config/database.js на

const path = require("path");

module.exports = () => ({
  connection: {
    client: "sqlite",
    connection: {
      filename: path.join(__dirname, "..", ".tmp/data.db"),
    },
    useNullAsDefault: true,
  },
});
Войдите в полноэкранный режим Выйти из полноэкранного режима

Установите зависимость SQLite:

yarn install sqlite3
Войти в полноэкранный режим Выйти из полноэкранного режима

Теперь вы готовы запустить приложение:

yarn install
yarn develop
Войти в полноэкранный режим Выйти из полноэкранного режима

Когда приложение запустится, вам нужно будет еще раз настроить учетную запись администратора (она хранится в базе данных SQlite, поэтому через некоторое время она будет удалена локально — но это не проблема). Теперь, когда вы вошли в систему, вы можете создавать новые типы контента, настраивать плагины и т.д.

Прежде чем приступить к созданию типов контента, давайте быстро установим плагин, который будет очень полезен позже — плагин GraphQL, который включает конечную точку GraphQL по умолчанию для вашей CMS (вы можете пропустить его, если вас устраивает использование стандартных вызовов REST, но я буду использовать GraphQL в приложении React). Вы можете легко установить его с помощью yarn:

yarn add @strapi/plugin-graphql
Войдите в полноэкранный режим Выйти из полноэкранного режима

И с этим покончено, давайте просто создадим тип записи блога.

В конструкторе типов содержимого выберите «Создать новый тип коллекции».

И добавьте в него несколько обязательных полей. В моем случае это title, content, cover, author и slug.

Для author важно выбрать правильное отношение:

Для slug не забудьте сделать его типа UID и выберите title в качестве вложенного поля:

После сохранения вы можете зафиксировать все новые файлы — файлы схем и т.д. будут указывать производственному приложению, какой тип контента можно создавать.

Теперь вы готовы к развертыванию приложения, просто сделайте push:

git push
Войти в полноэкранный режим Выйти из полноэкранного режима

После этого Railway выполнит автоматическую передислокацию. Когда она завершится, войдите в систему с учетными данными администратора и выполните окончательную настройку.

Вам нужно предоставить публичный доступ к сообщениям. Для этого зайдите в Settings -> Users & Permissions Plugin -> Public -> Edit (иконка).

Находясь внутри, дайте доступ к find и findOne для posts и users-permissions. Таким образом, вы сможете запрашивать у CMS список записей блога и конкретную запись (используя slug).

Нажмите Save и теперь давайте создадим автора и фиктивную запись в блоге для тестирования конечной точки (Content Manager -> User -> Create New Entry и Content Manager -> Post -> Create New Entry).

Затем нажмите на область под cover (или как вы назвали это поле) и просто следуйте инструкциям на экране, чтобы добавить новое изображение.

После сохранения вы должны увидеть в редакторе записей блога, что изображение действительно есть.

Но теперь, чтобы быть полностью уверенным в том, что изображение было добавлено правильно, перейдите на сайт Cloudinary, войдите в систему и зайдите в Медиатеку. Там вы должны увидеть только что созданное изображение в 3-4 размерах.

После сохранения поста вам также необходимо опубликовать его, чтобы он был виден в API.

Чтобы проверить, все ли работает, используйте Postman (или аналогичное приложение).

Откройте Postman и в поле адреса впишите https://[yourapp].up.railway.app/graphql/ и выберите тип запроса POST. Затем в теле запроса выберите тип graphql и введите следующее:

query {
    posts {
        data {
            attributes {
                title
                content
            }
        }
    }
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Когда вы отправите этот запрос, вы получите запись в блоге, которую вы только что создали минуту назад:

Как вы можете видеть, содержимое возвращается в формате markdown — гораздо эффективнее отправлять данные таким образом, но в нашем фронтенд-приложении нам нужно будет преобразовать их в HTML. Возможно, мы воспользуемся чем-то вроде react-markdown.

Вот и все! Теперь у нас есть размещенная на хостинге Strapi CMS, доступная как через REST, так и через GraphQL. В следующей части вы создадите приложение Next.js для потребления данных, которые уже есть в вашей CMS.

Оцените статью
devanswers.ru
Добавить комментарий