Хабрахабр

Предпоследний пост

Компания Zfort Group приняла решение не продлевать корпоративную подписку на Хабре.
Но есть и хорошие новости:

В блоге нашего нового сайта мы продолжим публиковать дайджесты, статьи и анонсировать профессиональные митапы. Мы бы хотели анонсировать запуск обновленного сайта zfort.com.ua, кратко рассказать о некоторых технических особенностях создания сайта, а также сообщить о решении перенести публикацию дайджестов с Хабра в блог нового сайта. На все обновления и публикации можно подписаться, чтобы быть в курсе и ничего не пропустить.

Краткая версия дайджестов также останется и на Хабре, но будет публиковаться не в корпоративном блоге Zfort Group, а с аккаунта alexzfort.

Дополнить сайт разделами для отображения актуальных новостей компании, анонсов проводимых мероприятий и публикации дайджестов/статей в короткие сроки с максимальной гибкостью и возможностью для расширения. Одна из целей, которую мы ставили перед собой — обновить наш сайт, направленный на локальную аудиторию, сделать его быстрым и легким.

А теперь подробнее о деталях создания обновленного сайта zfort.com.ua

Изначально, рассматривались три основных направления разработки обновленного сайта:

  1. Сделать сайт на базе WordPress;
  2. Разработать сайт фактически с нуля на LAMP стеке на базе наших собственных наработок;
  3. Реализовать сайт на базе нетрадиционного подхода JAMstack. Это альтернативный подход, который предлагает множество инструментов на выбор для создания статических сайтов, но с динамически добавляемым и управляемым контентом. Данный вариант подразумевал разработку сайта на базе использования уже существующих сервисов, объединенных в единую экосистему управления и публикации контента.

Взвесив возможные варианты, было принято решение пойти третьим путем и отказаться от кастомной серверной части на Symfony или WordPress в пользу Serverless технологий, что позволило бы получить следующие преимущества:

  • сократить время на разработку, тестирование, дальнейшую поддержку и фиксирование ошибок;
  • сократить время на развертывание окружений, настройку и поддержку сервера;
  • получить cloud-native инфраструктуру проекта, вместо того, чтобы иметь on-premise / self-hosted решение;
  • выстроить весь проект в виде экосистемы взаимодействующих между собой Microservices, вместо классической монолитной архитектуры;
  • получить гибкую систему управления контентом, иметь возможность структурировать контент, портировать контент в другую систему и так далее.

Выбранный вариант разработки сайта zfort.com.ua подразумевал максимально возможный (за некоторыми ограничениями) уход от традиционного веб-сервера, и вместо этого, постройку всей системы на базе Serverless технологии, где задействовано несколько взаимодействующих сервисов.
Также, в ходе планирования и разработки мы преследовали цель — получить решение, при котором фронтенд будет максимально отвязан от бекенда сайта.

Основные компоненты, положенные в основу сайта:

  1. Headless API based CMS (SaaS) для управления контентом сайта;
  2. Static site генератор;
  3. Form handling service or functionality;
  4. Source code repository and version control system;
  5. Deployment and hosting platform — a platform capable of listening for webhooks notifications, starting building, and deploying sites to production;
  6. Email delivery platform.

В соответствии с каждым из компонентов, было решено использовать:

  1. Contentful.com — в качестве Headless API based CMS
  2. GatsbyJS — в качестве фреймворка генерации статических HTML страниц сайта;
  3. PHP(Symfony) сustom функциональность в качестве обработчика форм сайта;
  4. GitLab в качестве репозитория исходного кода проекта и системы контроля версий;
  5. Rackspace — в качестве хостинг провайдера;
  6. SendGrid — как систему отправки emails, а также, в качестве системы хранения и управления шаблонами писем.

Также, управление вакансиями отображаемыми на страницах сайта, осуществляется непосредственно в Zoho Recruit системе.

Данный продукт представляет собой платформу для управления контентом со своей админ панелью. Cервис, который был выбран в качестве альтернативы custom разработке админ части управения контентом для zfort.com.ua — это Сontentful.com. Есть только админ панель. Что-то вроде cloud CMS, но без пользовательского интерфейса.


В нашем случае мы воспользовались плагином gatsby-source-contentful для получения content types, entries, и assets в Gatsby из Contentful spaces.
В дополнение к инфраструктуре управления контентом, Сontentful предоставляет возможность изменять размер, обрезать и сжимать изображения через Images API. Получение контента для отображения на страницах сайта осуществляется через Сontentful API.

Плюсы выбранного подхода:

  • В результате того, что не происходит runtime-генерация страниц — HTML кешируется и отображается пользователю практически мгновенно. Быстродействие и скорость отображения сайта в браузере. Кроме того, есть возможность полного переноса сайта в CDN, что, в свою очередь, кроме возрастания скорости работы, позволяет скэйлить его средствами CDN;

  • Все сервисы отделены друг от друга, где каждый сервис является приложением со своей логикой. Распределенная архитектура, позволяющая заменить любой из компонентов сайта в любое время со сравнительно минимальными усилиями. Логика не смешивается, группы разработчиков каждого из модулей могут работать практически независимо друг от друга;

  • Фактически, сайт представляет собой набор предварительно сгенерированных статических файлов. Безопасность. Как результат, здесь нет плагинов, в которых можно найти уязвимость. По большому счету, все динамические функции сайта выделены в отдельные third party сервисы взаимодействие с которыми происходит через API и только в момент генерации или обновления контента. Данный подход также нивелирует риск быть взломанным через SQL-injection;

  • Требования к хостингу у сгенерированного сайта минимальны. Феноменальная портируемость. Статический сайт можно разместить на любом из хостингов, позволяющих хранить статические файлы;

  • Все необходимые файлы настройки генерирования страниц сайта, а также шаблоны для генерации HTML страниц, храниться в GitLab. Скорость разработки и отсутствие необходимости постоянной поддержки кода. Как было упомянуто выше, в качестве admin-части по наполнению контентом мы используем Contentful, работа с вакансиями ведётся в Zoho Recruit системе. За основу взята возможность переиспользовать готовые решения в качестве неких микро-сервисов, взаимодействующих друг с другом.

Тем не менее, в данном подходе есть и некоторые сложности:

  • Задача решается корректной настройкой webhook-ов, а также deployer’ом, и бережным с ними обращением; Сложность синхронизации и обновления контента сайта из third party систем.

  • Вопрос решаемый, хоть и с некоторыми нюансами; Могут возникать проблемы с подключением third-party JS библиотек при server-side генерации HTML страниц сайта.

  • Тем не менее, вопрос с поиском можно решить также используя сторонние сервисы, такие как Algolia, etc. Отсутствие традиционной серверной части вносит свои сложности и накладывает ограничения в тех случаях, когда, например, необходимо реализовать поиск.

На диаграме ниже схематично представлена архитектура сайта zfort.com.ua, а также взаимодействие основных компонентов.

GatsbyJS работает с данными по протоколу GraphQL — при билде мы получаем данные из API third-party сервисов и создаем локальную базу GraphQL-нод.

Далее, в компонентах пишутся GraphQL-запросы для получения данных, нужных в конкретном месте и на базе jsx-шаблонов строится HTML.

Для работы с Zoho Recruit был написан custom Gatsby plugin, который получает данные по API и добавляет нужные данные в GraphQL базу.

Все данные предварительно добавляются в GraphQL и по ним в итоге можно делать поиск, сортировку и большинство других простейших агрегирующих операций и операций поиска. В целом, при необходимости, можно отказаться от использования системы управления контентом и управлять содержимым сайта изменяя .md файлы, размещенные непосредственно в папке сайта на хостинге статических файлов.

Для возможности просмотра данных, полученных с нескольких форм сайта, создано приложение с использованием Symfony 4 (SonataAdminBundle). Для обработки запросов из форм создан отдельный custom сервис c использованием Symfony 4.

В скором времени на сайте будет представлен обновленный раздел посвященный ZDay — серии регулярных профессиональных митапов на базе компании Zfort Group.

Большое спасибо всем, кто был с нами на Хабре все эти годы, всем, кто читал, активно комментировал, задавал вопросы.

Заходите на наш сайт, чтобы продолжать получать свежий контент, к которому вы привыкли, а также подписывайтесь на email рассылку по интересующим вас направлениям.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть