Я работаю над личным проектом, призванным помочь пользователям находить музыкальные концерты в Чикаго. Одним из примечательных аспектов этого проекта с архитектурной точки зрения является то, что все веб-приложение размещается совершенно бесплатно.

На изображении ниже показаны компоненты архитектуры:

Отказ от ответственности: Меня не спонсирует ни одна из упомянутых здесь служб; Я выделил их просто потому, что нашел их полезными.

Репозиторий кодовой базы проекта

GitHub — самая популярная платформа для бесплатного размещения вашей кодовой базы. Я также пробовал альтернативы, такие как Bitbucket и GitLab, и они работают так же хорошо. Честно говоря, любой из этих вариантов подойдет — просто выберите один и двигайтесь вперед, не задумываясь.

Внешняя оркестровка рабочих процессов

В профессиональной среде вы обычно работаете напрямую с AWS или другим поставщиком облачных услуг, что дает вам полный контроль над развертыванием, уведомлениями и мониторингом. Однако этот подход требует больше времени и усилий. К счастью, такие сервисы, как Netlify и Vercel, упрощают этот процесс, устраняя большую часть сложностей. Они допускают быстрое развертывание, но зависят от своей экосистемы. Как только ваш сайт начнет получать значительный трафик (тысячи посещений), рекомендуется проверить ограничения уровня бесплатного пользования, чтобы избежать непредвиденных расходов. Для личных проектов я пользовался этими услугами несколько раз без каких-либо проблем.

Тем не менее, Netlify предлагает несколько функций «из коробки». В образе архитектуры Netlify автоматически предоставляет три компонента:

• Интеграция с графическим интерфейсом:

Графический интерфейс Netlify позволяет интегрировать репозиторий кодовой базы — в моем случае GitHub. Netlify понимает настройки по умолчанию для приложения Next.js и использует их для беспрепятственного развертывания кода.

• Хостинг статических сайтов:

chicagomusiccompass.com — это статическое веб-приложение, то есть сервер не задействован. При запуске развертывания приложение генерирует статические ресурсы (HTML, JS и CSS), которые хранятся в корзине S3. Затем Netlify обрабатывает конфигурацию с помощью CloudFront, предоставляя вам готовый к использованию URL-адрес.

• Лямбда-функции:

Статическим сайтам часто требуется получать данные из других доменов. Обычно для этого требуется прокси-сервер, известный как «Back End for Front End» (BFF). Клиентские приложения по умолчанию не имеют доступа к другим доменам, если сервер явно не разрешает это через CORS, что не всегда является обычной практикой. В этом проекте я использую прокси-сервер для извлечения файла JSON из другого домена.

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

Например, это URL-адрес Netlify моего проекта:

https://clinquant-chebakia-f64a5b.netlify.app/

Затем я настроил свой домен с записью CNAME, чтобы указать www на URL-адрес Netlify:

Когда пользователь посещает https://www.chicagomusiccompass.com/, DNS преобразует домен в его конечный пункт назначения — URL-адрес Netlify ?.

Хотя здесь происходит много всего, большая часть этого настраивается через информационные панели (GUI). Главное — понять, как все взаимосвязано; остальное — это просто навигация по пользовательскому интерфейсу.

Автоматизированные запланированные задачи (задания Cron)

cron-job.org — это сервис, позволяющий бесплатно запускать задания cron. Вот как это работает в этой настройке:

a) Хук для развертывания Netlify:
Netlify предоставляет настраиваемый веб-перехватчик (конечную точку URL-адреса), который при срабатывании повторно развертывает сайт. Это гарантирует, что сайт chicagomusiccompass.com может обновляться автоматически при необходимости.

б) Интеграция cron-job.org:
С помощью cron-job.org вы можете запланировать задание cron — в данном случае настроить его на ежедневное выполнение. Задание просто запускает перехватчик развертывания Netlify, предлагая Netlify повторно развертывать (обновлять) сайт каждый день.

Примечание: Хотя на сайте Chicagomusiccompass.com также есть серверные компоненты, в этой статье основное внимание уделяется исключительно архитектуре внешнего интерфейса.

Краткое содержание

chicagomusiccompass.com — это приложение Next.js, которое при создании генерирует статический сайт (без сервера) вместе с парой функций Lambda. Репозиторий GitHub интегрирован с Netlify, поэтому каждое нажатие в репозиторий запускает новое развертывание. Этот процесс создает новую версию статического сайта и обновляет функции Lambda. Netlify обрабатывает развертывание этих файлов и автоматически подготавливает необходимую сетевую инфраструктуру, обеспечивая доступ к веб-приложению через поддомен. Кроме того, я настроил собственный домен chicagomusiccompass.com так, чтобы он указывал на Netlify. Сайт поддерживается в актуальном состоянии с помощью ежедневного задания cron, которое запускает перехватчик развертывания Netlify.

Сайт работает уже несколько месяцев и в настоящее время не получает большого трафика, но с точки зрения затрат на инфраструктуру я не плачу ни цента.

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

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