Облегчите свои проблемы с производством и развертыванием с помощью конвейера CI/CD, который позаботится о трудоемких деталях.

Развертывание веб-приложений на Firebase Hosting может быть проблематичным. Однако с помощью действий GitHub вы можете упростить и оптимизировать процесс развертывания, а также сделать невероятно легко управлять рабочими процессами развертывания на протяжении всего срока службы программного обеспечения. проект.

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

Что такое конвейер CI/CD?

Конвейер CI/CD (непрерывная интеграция/непрерывная доставка) — это набор автоматизированных процессов, реализованных для обеспечения непрерывной сборки, тестирования и развертывания приложений.

Проще говоря, конвейер CI/CD настроен для автоматизации процессов, связанных с жизненным циклом разработки программного обеспечения. Это будет включать фактическую разработку, тестирование, выпуски (бета-, альфа- и финальный выпуск), исправления ошибок и даже обновления функций. По сути, этот процесс позволяет легко и быстро выпускать качественное программное обеспечение.

instagram viewer

Конвейер CI/CD обычно включает несколько этапов, в том числе:

  1. Этап исходного кода: этот этап охватывает фактическую разработку и обслуживание кода приложения с помощью инструмента контроля версий, такого как Git.
  2. Этап сборки: на этом этапе исходный код со всеми его зависимостями собирается в исполняемый формат.
  3. Этап тестирования: этот этап включает автоматизированные тесты для проверки качества программного обеспечения. Конечная цель — обнаружить и исправить любые ошибки. На этом этапе вы можете выполнять различные типы тестов, и после того, как код прошел тесты, он готов к развертыванию.
  4. Развертывание: на этом этапе автоматизируется процесс развертывания в производственной среде.

Конвейер должен отслеживать каждый этап, чтобы убедиться в отсутствии ошибок и улучшить весь процесс для будущих выпусков.

Что такое действия GitHub?

GitHub Actions — это функция, предоставляемая GitHub для автоматизации рабочих процессов развертывания программного обеспечения в конвейерах CI/CD. Это позволяет определять и автоматизировать рабочие процессы развертывания непосредственно из репозитория вашего проекта на GitHub.

GitHub Actions имеет несколько преимуществ:

  1. Простота использования: GitHub Actions предоставляет удобный интерфейс и простой синтаксис для настройки рабочих процессов развертывания. Вы можете легко и быстро определить рабочие процессы своего проекта с помощью встроенного редактора на GitHub.
  2. Встроенная интеграция: GitHub Actions является частью GitHub, что упрощает настройку, управление и совместную работу над рабочими процессами вместе с кодом вашего проекта.
  3. Гибкость и настраиваемость: GitHub Actions предоставляет гибкую и настраиваемую платформу, которая гарантирует, что вы сможете создавать рабочие процессы, соответствующие вашим конкретным потребностям. Кроме того, он поддерживает несколько языков программирования. Это означает, что вы можете использовать его с любой технологией, которую вы предпочитаете.

Настройте проект Firebase и клиент React

Для начала перейдите на Firebase и войдите в свою учетную запись Google. На странице обзора консоли нажмите Создать проект чтобы создать новый проект и указать имя проекта.

Следующий, создать React-приложение и установите инструменты командной строки Firebase:

npm установить -g firebase-tools

Вы можете найти код этого проекта в его Репозиторий GitHub.

Войдите в Firebase со своего терминала, используя учетные данные своей учетной записи Firebase.

вход в firebase: ci

Это запустит поток аутентификации Firebase, который предложит вам ввести свои данные для входа, если вы еще не вошли в систему. Как только Firebase аутентифицирует вас, он напечатает токен. Скопируйте этот токен; вы будете использовать его для запуска команд Firebase в настройках GitHub Actions.

Наконец, создайте готовую к работе версию вашего приложения:

npm запустить сборку

Эта команда создает необходимые файлы и активы в новой папке «сборка» в корневом каталоге, необходимые для развертывания приложения.

Инициализируйте Firebase в вашем приложении React

Запустите эту команду, чтобы инициализировать Firebase в папке вашего проекта:

инициализация firebase

Затем подтвердите, что вы хотите инициализировать Firebase в своем проекте, и выберите Хостинг: настройте файлы для хостинга Firebase и (необязательно) настройте развертывание GitHub Action.из списка вариантов.

Укажите, что вы хотите использовать существующий проект, и выберите имя проекта, которое вы изначально создали в консоли разработчика Firebase.

Затем укажите папку build в качестве публичный каталог, выберите Нет чтобы переписать все URL-адреса в параметр /index.html, выберите Нет к опции настройки автоматической сборки и развертывания из GitHub и, наконец, выберите Да чтобы перезаписать параметр файла build/index.html.

После внесения вышеуказанных изменений CLI создаст файл firebase.json в корневом каталоге. Этот файл содержит всю конфигурацию хостинга, которая потребуется для рабочего процесса GitHub Actions.

Наконец, прежде чем настраивать рабочий процесс GitHub Actions, создать репозиторий на GitHub, и поместите в него файлы проекта.

Настройка действий GitHub

В репозитории вашего проекта на GitHub выберите Настройки > Секреты и переменные > Действия. На секретной странице репозитория введите FIREBASE_TOKEN в качестве имени секрета и вставьте токен Firebase, который вы скопировали в Секреты поля.

Настройка рабочего процесса развертывания

Перейдите на вкладку Действия в репозитории вашего проекта и выберите Настроить Nodejs рабочий процесс в Непрерывная интеграция раздел.

Далее переименуйте файл в firebase.yml, удалите шаблонный код в редакторе и добавьте следующий код:

# Этот рабочий процесс будет выполнять чистую установку зависимостей узла,
# кэшировать/восстановить их, построить источник код и запускать тесты на разных
# версии узла
# Для получения дополнительной информации см.:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
имя: Firebase CI


на:
 толкать:
 ветки: [ главная ]
 pull_request:
 ветки: [ главная ]


вакансии:
 строить:


 запуски: ubuntu-последняя


 стратегия:
 матрица:
 версия узла: [14.x]

 шаги:
 - использует: action/checkout@v2
 - имя: Использовать Node.js ${{ matrix.node-version }}
 использует: action/setup-node@v1
 с:
 версия узла: ${{matrix.node-версия }}
 - выполнить: npm установить -g npm
 - имя: установка, сборка и тестирование npm
 запустить: |
 установка нпм
 npm запустить сборку
 - название: Архивная сборка
 использует: action/upload-artifact@v2
 с:
 имя: построить
 путь: построить

 развертывать:
 Название: Развернуть
 потребности: построить
 запуски: ubuntu-последняя
 шаги:
 - использует: action/checkout@v2
 - название: Скачать сборку
 использует: action/download-artifact@v2
 с:
 имя: построить
 путь: построить
 - имя: Развернуть в Firebase
 использует: w9jds/firebase-action@master
 с:
 аргументы: развернуть --только хостинг
 среда:
 FIREBASE_TOKEN: секреты ${{. FIREBASE_TOKEN }}

Вот некоторые из основных объясненных свойств:

  1. На: События, запускающие действия в этом рабочем процессе.
  2. Работа: указывает задания, которые должно выполняться конкретным действием. В этом случае есть две задачи: сборка и развертывание.
  3. Пробегает: машина, на которой должно выполняться это действие.
  4. Шаги: определяет последовательность шагов, которые Действие должно выполнять для определенного задания.
  5. С: указывает любые аргументы, необходимые для выполнения действий.
  6. Имя: название определенного шага задания.

Наконец, зафиксируйте изменения, сделанные в этом файле. GitHub автоматически запустит этот рабочий процесс, создав и развернув приложение React в службе хостинга Firebase. Вы можете проверить активный URL-адрес приложения в журналах развертывания.

Развертывание приложений с помощью действий GitHub

GitHub Actions обеспечивает упрощенный подход к развертыванию. Это гарантирует, что вы сможете последовательно и надежно развертывать приложения, независимо от технологии, на которой вы их создаете.

Кроме того, вы можете легко настроить рабочий процесс развертывания с помощью встроенных инструментов развертывания в соответствии с конкретными потребностями конвейера CI/CD.