Нещодавно я працював над проектом, який вимагав розгортання статичного сайту на Hostinger. Код фронтенду був написаний на NextJs. Особливістю було те, що ми мали розгорнути сайт на платформі статичного хостингу Hostinger, а сам сайт повинен був мати динамічну функціональність для написання та оновлення блогів.
Давайте швидко поглянемо на архітектуру, щоб було зрозуміло, як весь процес працює.
Компоненти
Hostinger (Фронтенд)
- Сторінка для написання блогу: Інтерфейс для користувачів для написання та публікації блогів.
- Сторінка для перегляду блогу: Інтерфейс для користувачів для перегляду опублікованих блогів.
- Webhook: Підключено до репозиторію GitHub для запуску дій на основі оновлень коду. Підключається до сховища Hostinger, де зберігаються файли статичного сайту.
Бекенд
- CreateBlogAPI: Цей API оновлює базу даних новими блогами та викликає подію відправки репозиторію в GitHub.
- ReturnBlogAPI: Цей API отримує блоги з бази даних для відображення на сторінці перегляду блогу.
База даних
- Зберігає дані про пости блогу, які керуються CreateBlogAPI і доступні через ReturnBlogAPI.
GitHub (Репозиторій коду та дії)
- GH Action: Автоматизований процес, який запускається на основі певних подій (repository_dispatch).
- Завантажує останній код з основної гілки.
- Використовує Static Site Generation (SSG) за допомогою Next.js для створення сторінок блогу.
- П pushes файли побудованого статичного сайту в гілку “build”.
- Гілка Build: Гілка в репозиторії GitHub, де відбувається процес побудови статичного сайту.
Робочий процес
- Написання блогу
- Користувач відкриває сторінку написання блогу на Hostinger і подає новий пост.
- Сторінка написання блогу відправляє дані блогу в CreateBlogAPI.
- Взаємодія з API
- CreateBlogAPI оновлює базу даних новим постом.
- Потім викликає GitHub API для відправки події репозиторію.
- Дії GitHub
- Подія repository_dispatch запускає GitHub Action.
- GitHub Action завантажує останній код з основної гілки.
- Виконується Static Site Generation (SSG) за допомогою Next.js, завантажуючи дані блогу через методи getStaticPath і getStaticProps.
- Створені файли статичного сайту потім завантажуються в гілку “build”.
- Розгортання
- Webhook, підключений до репозиторію GitHub, виявляє зміни в гілці “build”.
- Він завантажує оновлені файли статичного сайту в Hostinger Storage.
- Оновлений пост блогу стає доступним на сторінці перегляду блогу для користувачів.
Підсумки
Ця система автоматизує процес подачі та відображення постів через інтегрований набір інтерфейсів для фронтенду, API для бекенду, управління базою даних та дії GitHub для безперервного розгортання. Це гарантує, що будь-який новий або оновлений контент блогу буде ефективно оброблений і опублікований на сайті.
Перекладено з: NextJs Dynamic Blog Pages Build and Deploy on Hostinger