Деплой Frontend приложения. Настройка nginx. Подключаем домен, настраиваем HTTPS, gzip, docker

• Видео посвящено настройке фронтенд-приложения на облачном сервере.  

• План урока: залить проект на GitHub, арендовать облачный сервер, настроить Nginx, подключить домен, настроить сертификаты, быстро доводить изменения до продакшна, упаковать в Docker.  

• Проект на React с базовым роутингом и счетчиком.  

• Приложение простое, с парой кнопок и страниц.  

• Для взаимодействия с проектом его нужно залить на GitHub.  

• Использование Selectel для аренды сервера.  

• Регистрация, создание проекта, развертывание сервера.  

• Настройка параметров сервера: операционная система, размер диска, сеть.  

• Проверка подключения по SSH.  

• Установка и настройка NVM для управления версиями Node.js.  

• Установка актуальной версии Node.js и npm.  

• Сборка проекта с помощью npm run build.  

• Создание папки dist с собранными файлами.  

• Подготовка к раздаче статических файлов через Nginx.  

• Установка Nginx с помощью apt.  

• Nginx как веб-сервер для раздачи статических файлов.  

• Настройка конфига Nginx с помощью vim.  

• Обзор содержимого конфига Nginx.  

• Использование vim для работы с файлами.  

• Выход из vim без сохранения.  

• Удаление комментариев из файла конфига.  

• Объяснение первой строки конфига: прослушивание порта 80.  

• Указание пути к папке с статическими файлами.  

• Описание директивы location для обработки запросов.  

• Сохранение конфига без комментариев.  

• Открытие приложения в браузере по IP-адресу.  

• Замена пути к папке с файлами на dist.  

• Удаление папки html.  

• Сборка проекта и перемещение папки dist.  

• Перезапуск Nginx для корректной работы.  

• Настройка проксирования запросов на index.html.  

• Объяснение необходимости проксирования для одностраничных приложений.  

• Использование модуля zip для сжатия файлов.  

• Настройка уровня сжатия в конфиге Nginx.  

• Перезапуск Nginx и проверка уменьшения размера бандла.  

• Регистрация домена и оплата.  

• Подключение домена к сайту через DNS-серверы.  

• Делегирование домена на DNS-серверы Selectel.  

• Обновление DNS может занять до 24 часов.  

• Необходимо связать IP-адрес с доменом через ресурсные записи.  

• Ресурсная запись типа A указывает IP-адрес и домен.  

• Скопируйте IP-адрес из личного кабинета.  

• Добавьте ресурсную запись типа A в DNS-сервер.  

• Дождитесь, пока DNS-сервер обновится.  

• Проверьте домен через браузер.  

• Соединение небезопасно из-за отсутствия сертификатов.  

• Используйте Let's Encrypt для генерации сертификатов.  

• Выберите сервер и систему Ubuntu.  

• Установите и настройте Let's Encrypt.  

• Объедините Let's Encrypt с Nginx.  

• Проверьте настройки Nginx.  

• Убедитесь, что сертификаты валидны.  

• Перезапустите Nginx для применения изменений.  

• Внесите изменения в код приложения.  

• Закоммите изменения на GitHub.  

• Подтяните изменения с GitHub и пересоберите проект.  

• Скопируйте и настройте конфиг Nginx.  

• Сохраните конфиг для будущих изменений.  

• Настройте пути и порты для корректной работы.  

• Видео объясняет базовые настройки для простых сценариев.  

• Для сложных пайплайнов рекомендуется использовать Docker.  

• Призыв к подписке и лайкам.