Личный сайтpvlppv.ruГитхабШтош, наконец-таки накинул первую версию личного сайта: тот самый для отцифровывания себя, о котором писал ранее. Пишите, что крейзи-сногсшибательного туда добавляем!! Особенно буду рад и благодарен идеям и советам тех. специалистов🫡А теперь…моя любимая глазодробящая часть — ТЕХНИЧЕСКАЯ, поехали:Прежде всего наметил архитектуру сайта: нужна была база данных, чтобы хранить все данные, нужен был бэкенд-апи, чтобы взаимодействовать с этими данными, и нужен был фронтенд, чтобы визуализировать все эти данные. Выбрал из того, чем уже пользовался, в чём шарил, и что до сих пор было актуально и практично, база данных — PostgreSQL, бэкенд — FastAPI, фронтенд — Vue.js. БАЗА ДАННЫХПервые мысли о базе данных: «есть куча метрик из жизни, их нужно категоризировать и максимально автоматизировать их трекинг (ну ибо рано или поздно доконает, и всё подохнет, поэтому автоматизация в подобном проекте — главный хэдлайнер), затем постоянно складывать в таблички и иметь возможность править вручную». Так получились первые таблички locations, health, activities, posts, инициатором которых стало приложение команды на айфоне, в котором я настроил автоматизацию экспорта вседоступных метрик из различных приложений.БЭКЕНДВсе эти метрики нужно отправлять на апи, поэтому следом я принялся создавать его. Связку FastAPI + PostgreSQL взял из прошлых проектов, поднастроил, приписал табличкам модели SQLAlchemy, схемы Pydantic, CRUD-функции и засунул всё это дело в эндпоинты, подвязал к ним Redis-кеширование, добавил авторизацию по апи-ключу и открыл для фронтенда. Наверное, это был самый быстрый и беспроблемный этап.ФРОНТЕНДПервые мысли о фронтенде: «он должен просто выводить заранее отрендеренный контент: текст и всякие графики — ага, генератор статического контента», отправился в ресёрч, пообщался с 4o и нашёл свежий SSG VitePress от той же команды Vue.js, особенность которого в рендере маркдаун-файлов, благодаря которым сайт становится невероятно шустрым. Установил, выбрал шаблон, но так как он отлично подходит для создания документаций, а не для вариативного сайта в моём случае, выбрал кастомную конфигурацию и начал кастомизировать. Установил tailwindcss для симпатичного css и с 4о нашпаклевал странички. На этом моменте было много-много обсасывания стилей, в итоге, когда в utils.js уже были готовы все вспомогательные функции, в том числе обращение к апи, и я, казалось бы, уже почти полетел, уткнулся в одну интересную деталь, о которой почему-то ранее не подумал — если, например, в базе данных произвести изменения, VitePress ничего не обновит, ведь его сбилженная в начале, отрендеренная статическая версия не поддаётся в принципе динамическим изменениям. Да, это было жёстко, по-моему я даже встал из-за стола, подошёл к окну, … . Но благо с 4o мы быстро управились, переписав всё на старый-добрый динамический Vue.js. На этом моменте было очень много правок, фиксов, внедрения плагинов, написания скриптов, от форматирования даты до lazy-loading постов, которое, например, до сих пор нормально не работает.ДЕПЛОЙНу и финалочка. Я постараюсь не всхлипывать, набирая этот текст. Уверенно влетев в Ubuntu, я принялся настраивать Nginx и systemd своими проверенными дедовскими способами. Изумительно, но этими способами я случайно снёс настройку своего чиллившего там сервиса Соти, которую, кстати, до сих пор не починил, и тогда то понял, что окружения, порты, зависимости и в принципе проекты нужно всё-таки как-то разделять. Это слово моментально высветилось у меня в голове, но я очень не хотел обращать на него внимание — Докер. Это ангельское дарование свыше всегда ассоциировалось у меня с чем-то «я же не бэкендер, зачем мне лезть в эти бредни», в итоге влез, изучил, рассадил все микросервисы по контейнерам, настроил докер-компоуз, скрепив их ручки, и запустил сие пиршество с вагоном и одной тележкой ошибок. Спустя десятки вопросов тех.поддержке хостинга (лучшая клиентская поддержка, что встречал — hostetski.ge) подвязал домен, перепривязал порты, подключил pgAdmin4 и настроил среду, как разработки, так и продакшена.
