Я искал в сети точный мой случай о том, как настроить CI / CD для проекта React в репозитории GitLab, который использует Firebase в качестве своей серверной службы. Я несколько дней искал его, наконец нашел кусочки, разбросанные по всему Интернету. Вот моя попытка сделать один шаг, как это сделать.

Firebase — отличный сервис, который позволяет вам практически не писать код для вашего проекта. Я фронтенд-разработчик, и Firebase действительно помог мне в создании моих проектов.

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

Перейдем к сути!

Прежде всего,давайтеинициализируем проект Firebase. Убедитесь, что вы уже установили Firebase CLI на свой компьютер и у вас уже есть учетная запись Firebase. Чтобы установить Firebase CLI, вы можете ввести:

npm install -g firebase-tools

После этого вам нужно войти в свою учетную запись Firebase через командную строку, просто введите:

firebase login

Он приведет вас на веб-страницу и попросит вас войти в систему. После успеха вы можете вернуться в командную строку, затем перейти в свой проект React и запустить Firebase:

firebase init

После того, как вы нажмете Enter, он задаст вам пару вопросов. Он спросит, хотите ли вы создать новый проект Firebase или выбрать существующий проект. Поскольку я сделал проект из консоли Firebase, я выбираю существующий проект. После этого он спросит вас, какие услуги вы хотите использовать. Я использую 3 службы: правила firestore, функции firebase и хостинг firebase для размещения файлов сборки React. Подробнее о Firebase CLI здесь

Подробности проекта React

У меня есть 3 ветки git для моих проектов, у вас может быть меньше или больше, но обычно используется 3 ветки. Мои ветки - это разработка, постановка и мастер.

Для каждой ветки мне нужен отдельный проект Firebase. Я использую env-cmd package, чтобы сообщить React, какие проекты использовать, введите npm install env-cmd, чтобы установить его (это понадобится нам позже). У меня есть 3 файла переменных среды, в каждом файле хранится конфигурация проекта Firebase. Я назвал файлы так: .env (по умолчанию, ветка разработки), .env.staging и .env.production. Файл .env выглядит так:

Вы можете назвать ключ как хотите, просто убедитесь, что он начинается с REACT_APP. У меня есть 3 разных ветки и 3 разных проекта Firebase, поэтому у меня есть 3 разных файла .env, как я объяснял ранее, каждый из них имеет разные значения, вы получаете это значение после создания проектов из консоли Firebase.

Очевидно, вам нужно будет инициализировать Firebase в вашем приложении React. Вместо жесткого кодирования значения я использую process.env, поэтому я могу решать, какие проекты использовать каждый раз, когда я запускаю реагирующие сценарии, такие как npm start.

Здесь мы будем использовать env-cmd. Мы будем использовать пакет, чтобы сообщить React, какой проект Firebase (файл .env) использовать. Для этого мы изменим файл pacakge.json.

Теперь, если вы сделаете npm start, React просмотрит файл .env и будет использовать его значение. В противном случае, если вы запустите npm start:staging, он будет использовать файл .env.staging. То же самое касается процесса сборки: React проверит, какой файл .env использовать для процесса сборки, и включит его в файлы сборки. Помните, поскольку мы не кодируем наш бэкенд, все значения .env будут храниться публично в файлах сборки, поэтому не храните в нем ничего конфиденциального. Сам файл конфигурации Firebase не является конфиденциальной информацией. Подробнее об этом.

Добавить проекты Firebase (для размещения файла сборки)

Помните, что мне нужно 3 проекта Firebase для моих веток. Нам нужно добавить проекты, чтобы, когда мы развертываем приложение на хостинге Firebase, оно знало, на какой хостинг развертывать. Для добавления проектов мы можем использовать firebase use --add. Затем он попросит вас выбрать проекты, которые вы хотите добавить, и дать им псевдоним, если хотите. Я использую псевдоним, поэтому я могу легко сослаться на него позже, и мне не нужно запоминать точное название проекта.

Поскольку для развертывания я буду использовать GitLab CI/CD, мне не нужно переключаться между проектами. Но если вы хотите развернуть вручную со своего компьютера, вам нужно переключиться на проекты, которые вы хотите использовать в качестве хостинга. Вы можете переключаться между проектами с помощью firebase use <projectId or alias>.

Настройка GitLab

Мы закончили настройку React и Firebase. Я не буду вдаваться в подробности о том, как настроить React и Firebase. Этот пост предназначен для того, чтобы показать, как использовать их вместе с GitLab CI/CD, чтобы мы могли автоматизировать процесс развертывания.

Давайте добавим наш токен Firebase в GitLab, чтобы мы могли войти в Firebase, не открывая веб-браузер. Чтобы получить этот токен, введите firebase login:ci в командной строке. Вы получите токен, что-то вроде «1//0h_sj***kL».

Перейдите к репозиторию GitLab и нажмите «Настройки» > CI/CD. Нажмите, чтобы развернуть меню переменных и добавить переменную. Ключ: FIREBASE_TOKEN, значение: your_firebase_token. Он будет защищен по умолчанию.

Мы пока не можем использовать переменную, нам нужно защитить наши ветки, чтобы мы могли использовать значение переменной. Для этого перейдите в настройки > Репозиторий, затем разверните Защищенные ветки. Добавьте все свои ветки, необходимые для доступа к переменной. В моем случае я добавил ветки development, staging и master (главная ветка уже защищена по умолчанию).

После того, как это было сделано, пришло время добавить файл .gitlab-ci.yml в корень нашего проекта React. Этот файл будет запускать задания для нашего конвейера. Вот как это выглядит:

Мы используем образ rambabusaravanan/firebase, поэтому нам не нужно устанавливать все firebase-tools, они уже предустановлены.

Я использую только один этап — развертывание. Если вы хотите добавить больше этапов, вы можете это сделать. В моем случае мне нужно только запускать задания, запускать конвейер, когда есть изменения (push/merge) в моих соответствующих ветвях. Чтобы определить, какой скрипт запускать, добавьте свою ветку underonly в файл, и он запустит скрипт при изменении этой ветки.

Скрипт начинается с npm install для установки всех зависимостей, необходимых для приложения React. После этого скрипт cd to functions и runnpm install в нем для установки зависимостей для функций. Эта папка функций создается автоматически, если вы выбираете функции при запуске firebase init. После этого скрипт снова переходит в корень папки, а затем запускает соответствующий скрипт, например, если изменения происходят в ветке разработки, он будет запускаться npm run build, а если изменения происходят в ветке master, он будет запускаться npm run build:prod.

Наконец, скрипт запустится firebase deploy -P <project alias> --token $FIREBASE_TOKEN. Флаг -P позволяет нам выбрать проект для развертывания, помните, что я дал своим проектам псевдоним. Затем токен позволит нам войти в Firebase, а затем развернуть все сервисы, которые мы выбрали при запуске firebase init.

Вот и все, теперь мы настроили автоматизацию для нашего проекта React-Firebase-GitLab, и нам не нужно вручную собирать и развертывать каждый раз, когда мы отправляем в репозиторий.

Надеюсь, вам понравится этот пост, и я надеюсь, что он будет полезен. Дайте мне знать, если у вас есть вопросы :)

Ура!