Фронтенд на Vue.js с авто-деплоем на Nginx в докере и автоматическим получением сертификатов Letsencrypt

Словом, всё необходимое, чтобы раскатить фронтенд за 10 минут на чистой машине с Ubuntu.

Все сконфигурированные пакеты и инструменты сборки:

1. Vite - сборщик
2. Typescript - типизация для JS
3. Vue.js - высокоуровневый фреймворк
4. Stylus - препроцессор для css-стилей
5. TypeDoc - генератор HTML документации по JSDoc-комментариям
6. Jest - фреймворк для запуска юнит-тестов
7. ESlint - статический анализатор кода

Плагины ESLint:

• JS / TS / Vue - стандартные плагины
• Compat - проверка совместимости со старыми браузерами
• No loops - запрет использования "C-style" циклов for, while
• Sonarjs - проверка когнитивной сложности больших блоков кода
• No use extend native - запрет расширения классов стандартных типов данных
• Optimize regex - проверка качества написания ругулярных выражений
• Promise - проверка работы с промисами
• Import - проверка и оптимизация импортов (отключен из-за проблем использования вместе с Vue)

8. Prettier - линтер для JS/TS
9. Stylelint - линтер для Stylus
10. Husky/pre-commit - инструменты для запуска линтеров перед каждым коммитом
11. Nginx/Docker/Make - инструменты для запуска собранного приложения в выделенном контейнере

Развертка для разработки

npm run dev

У вас должна быть установлена node. Установка Node.js

Развертка в деплой

Развертка выполняется через команды в Makefile

1. Клонируем репозиторий:

git clone [email protected]:SergTyapkin/vue-frontend-template.git

2. Настраиваем вообще всё.

В самом начале нужно будет настроить .env файл, прописать правильный DOMAIN_URL

cd vue-frontend-template
make all # not just "make"!

Всё. Наслаждаемся тем, что за нас всё сделали, установили докер, сайт раздаётся, сертификаты обновляются. Теперь Github CI сам будет проверять, собирается ли контейнер при Pull Request'ах, а при Push'ах в ветку master будет автоматически выполняться make update на сервере и обновлять деплой!

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

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

1. Устанавливает docker, если его ещё нет
2. Добавляет текущего пользователя в группу Docker, чтобы запускать его без sudo
3. Предлагает настроить .env файл
4. Получает сертификаты Letsencrypt
5. Устанавливает и настраивает cron на ежемесячное обновление сертификатов
6. Создаёт пару SSH ключей, публичный добавляет в ~/.ssh/authorized_keys, приватный выводит в консоль, его нужно добавить как секретную переменную среды SSH_DEPLOY_KEY в настройках Github.
7. Собирает приложение из последнего коммита в ветке, указанной в .env файле, запускает финальный docker-контейнер с ним.
8. Показывает остальеые переменные, которые необходимо установить в настройках GitHub для настройки CI/CD.

3. Установка переменных

1. Заходим в Settings -> Environments, создаём новое окружение под названием deploy (важно).
2. Создаём внутри окружения все необходимые переменные. Их выведет make all после завершения выполнения, или можно прописать самому.