Разработка Full-Stack Приложения с Нуля

Недавно я запустил editt. — платформу для свободного блогинга, на которой любой желающий может поделиться своими мыслями и идеями. От самой концепции в моем воображении до первой версии рабочего продукта на продакшене я пришел за два месяца. Работа над проектом начиналась в одиночку, но спустя немного времени ко мне присоединился мой старый товарищ с предложением помочь по фронтенду.

На начальном этапе я решил начать запуск проекта с MVP — минимально жизнеспособной версии, с самым базовым и урезанным функционалом. Мне не хотелось, чтобы процесс разработки заякорил быстрый запуск платформы (но так и случилось, изначально я планировал запуститься через 2 недели), поэтому я постарался реализовать архитектуру приложения достаточно простой и легко масштабируемой.

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

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

Архитектура

На бекенде у нас монолит, написан на Go, и MongoDB в качестве баз данных. На фронтенде запущен VueJS.

Почему именно этот стек технологий? Все просто.

С Go и Mongo я достаточно работал в продакшене и могу быстро написать необходимый функционал. Также стоит заметить, что NoSQL база данных в моей ситуации предпочтительней, так как у меня нету утвержденной схемы бд, проект на начальной стадии, постоянно появляются новые идеи.

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

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

VueJS был выбран по совету товарища, т.к. последний раз с веб разработкой я сталкивался года полтора назад и писал на jQuery.

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

Не знаю как дела обстоят с React и Angular, но Vue мне понравился за низкий порог входа. Если вы вдруг тоже решили что-то написать на Vue без предыдущего опыта, крайне советую это видео.

Я не сразу подумал о том, что рендеринг на клиентской части не лучший выбор для блог платформы, т.к. с ним возникают проблемы в SEO. Эту задачу нам еще предстоит решить, скорее всего с подключением NuxtJS на проект.

Локальная разработка

Фронт и бекенд живут в разных репозиториях, это разделяет зоны ответственности и упрощает процесс разработки.

Для бекенда написаны Dockerfile и docker-compose.yml, что позволяет одной командой поднимать сам монолит, бд и localstack S3 в контейнерах.

Для загрузки изображений при написании публикации у меня есть API, которое принимает файлы и выгружает из на файловое хранилище Spaces от DigitalOcean с AWS S3 совместимым протоколом.

Поэтому, чтобы не завязываться на облачный сервис при локальной разработке я использую localstack, который поднимаеться в отдельном контейнере.

Подробнее о работе с Go и localstack S3 и загрузке изображений вы можете почитать в этой статье.

Для запуска фронта при разработке используется стандартный http-сервер из упаковки Vue, и запускаеться это все дело одной командой npm run serve .

Инфраструктура

Вопрос выбора инфраструктуры был немного сложноват для меня. У меня нету опыта настройки окружений и CI/CD с нуля. На прошлых проектах я работал с AWS, но всеми инфраструктурными вопросами занимались наши DevOps’ы и боевого опыта в этой сфере у меня не было.

После ресерча мой выбор остановился на VPS от DigitalOcean. У них достаточно адекватная ценовая политика, удобный юзер-френдли интерфейс и большое комьюнити. Можно достаточно быстро поднять окружения, оплата происходит исключительно по факту использования сервера т.е если вы пользовались впской 3 дня, а потом передумали и отключили, то с вас спишут только несколько центов.

Также, я уже упоминал об этом, у них есть удобный S3-совместимый Object Storage сервер, который также достаточно легко и быстро поднимается.

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

Репозитории с проектами живут на гитхабе в приватных репозиториях. Сразу после покупки окружений я решил инвестировать время в настройку CI/CD, так как каждый раз руками деплоить приложения крайне не практично и отнимает время, которое можно потратить на более важные вещи.

Для CI/CD я решил разобраться с относительно новым GitHub Actions. У меня вышел достаточно не замудренный пайплайн, при пуше в ветку master github поднимает окружение с убунтой, конектиться по SSH к моей VPS, пулит последнюю версию ветки мастер, билдит докер изображение, убивает уже запущенный контейнер с приложением и запускает новый.

На данном этапе я полностью доволен таким CI/CD развертывание актуальной версии приложения после пуша в мастер занимает 1–2 минуты.

Подробнее о настройке CI/CD на Github Actions вы можете почитать тут.

Что монолит на Go, что фронт на Vue, запускаются на одной VPS в разных контейнерах. В продакшене для фронта я компилирую статику из Vue приложения, поднимаю в контейнере nginx и раздаю эту статику с рутового пути на 80 порту.

Итоги

При построении архитектуры и настройки локального окружения данного приложения, я преследовал максимальную простоту и скорость развертывания. Цена инфраструктуры также имела для меня значение. За хостинг бд я ничего не плачу, VPS и Object Storage на DigitalOcean обходяться мне 10$/месяц.

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

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

Надеюсь, данная статья была вам полезной и возможно вы подчеркнули для себя что-то новое. Если есть вопросы и/или замечания, буду рад пообщаться.

Чести и удачи!