Deploy React SPA to Ubuntu with Nginx through Gitlab CI/CD

For applications created by create-react-app

Цель

До начала работы

Создание проекта

npx create-react-app APPLICATION_NAME
cd APPLICATION_NAME
yarn start
git remote add origin git@gitlab.com:user/APPLICATION_NAME.git
git push origin master

Создание Runner

web,react
node:12.6.1

Установка и настройка Nginx

  • Корректно отдавать статические ресурсы (JS, CSS и другие).
  • Для всех остальных URL отдавать файл index.html с React-приложением для корректного роутинга на стороне клиента.
sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful
sudo systemctl restart nginx

Настройка CI/DI в проекте

  • Команда unset CI выключает строгий режим сборки проекта. При включенном режиме Warning-и приравниваются к ошибкам. Если в вашем проекте нет Warning-ов при сборке, можете убрать эту строку.
  • Далее идет заполнение файла .env значениями переменных окружения, которые необходимы для сборки. Если в вашем проекте нет переменных окружения, можете не заполнять .env файл.

Запуск CI/CD

Переменные окружения

  • Type — тип переменной. Доступные значения — переменная и файл.
  • Key — название, под которым переменная будет доступна в скрипте “.gitlab-ci.yml”.
  • Value — значение переменной.
  • State — защищена ли переменная. Если да, то её значение будет доступно только при выполнении скрипта, который был запущен из protected ветки или protected тега.
  • Masked — скрыто ли значение переменной. Если да, то оно не будет отображаться в логах о выполнении скрипта.
  • Scope — область видимости переменной. С помощью этого поля вы можете заводить разные значения одной и той же переменной для разных окружений.
  • APP_PATH — путь к приложению в системе. Папка для него была заранее подготовлена при настройке Nginx. Значение одинаковое для всех окружений: “/var/www/apps/APPLICATION_NAME”.
  • DEPLOY_USER — имя пользователя, под которым будет происходить развертывание приложения.
  • SERVER_ADDRESS — IP адрес сервера, на котором приложение должно быть развернуто.
  • SSH_PORT — порт SSH для подключения к серверу.
  • SSH_PRIVATE_KEY — приватный ключ SSH для подключения к серверу. Ниже в инструкции описано, каким образом получить его значение.

Итог

Источники

--

--

Software Engineer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store