![За один день кофеен стало больше За один день кофеен стало больше](https://habrastorage.org/getpro/habr/upload_files/9fc/930/3af/9fc9303af3e8a0ac992062e6aaa00508.jpg)
Продолжение разработки простого проекта про specialty-кофейни на Кипре. В первой части я рассказал про API микросервис, теперь расскажу про фронтэнд-сайт и в финальной статье - про телеграм-бота.
Код проекта открыт, велкам в пул-реквесты. Адрес сайта - в конце статьи.
Архитектура
На сайте всего 2 страницы - карта с маркерами кофеен и About. Собственно, для старта больше и не нужно, а для обратной связи есть Telegram и почта.
Реализация - модульный vanilla JavaScript и карты Google Maps в always free tier, которые всегда можно заменить на Mapbox, Mapquest и т.д.
Карта и данные из REST API загружаются одновременно, по их готовности на карту добавляются маркеры из GeoJson-массива данных, собранные в кластеры. По клику на маркер отправляется запрос в Google Places API для получения некого id компании (cid) и открывается небольшое описание (Info Window) со ссылккой на карточку организации в большом Google Maps с возможностью построения маршурта, просмотра отзывов и т.д. Для формирования этой ссылке используется cid.
В случае недоступности Google Maps показывается заглушка с сообщением об ошибке, но навигация сайта остаётся работоспособной.
Всё достаточно тривиально и, благодаря асинхронному выполнению, быстро.
Для сборки проекта использую Vite - он тоже очень быстр и прост.
Для аналитики и "понимания" посетителей сайта используется Google Analytics с прямым подключением вместо Google Tag Manager (так чуть меньше трафика). В аналитике фиксируются открытия Info Window как достижения целей для расчёта конверсии сайта. Для подключения используется vite-plugin-radar.
Ещё два плагина - vite-plugin-html-purgecss и vite-plugin-minify - позволяют убрать из финальной сборки весь неиспользуемый код. На их настройку потребовалось 15 минут - поэтому ok.
Конфигурация
Общие параметры и названия секретов - в .env, локальные переопределения - в .env.local
Мониторинг
Тот же Sentry, в .env достаточно указать пустое значение VITE_SENTRY_DSN (для наглядности), а фактическое значение записать в секрет.
Деплой
Та же платформа Fly.io с управляемыми microVM Firecracker. Тут всё гораздо проще, чем при размещении API микросервиса и достаточно Dockerfile из двух строк:
FROM pierrezemb/gostatic
COPY ./dist/ /srv/http/
CI/CD
Тут чуть сложнее: сначала Github Action собирает билд при помощи Vite, а затем flyctl делает из него контейнер и деплоит на продакшн vm. В данном случае, все секреты хранятся в GitHub production Environment.
На этом этапе сайт работает, размещён в продакшн-окружении и доступен всем пользователям. Фактически проект выполнен :)
Репозиторий фронтэнда, сайт https://specialtycoffee.cy/
В третьей части расскажу про создание telegram-бота.