Улеснете проблемите си с производството и внедряването с CI/CD тръбопровод, който се грижи за трудоемките детайли.

Разполагането на уеб приложения във Firebase Hosting може да бъде караница. Въпреки това, като използвате действията на GitHub, можете да опростите и рационализирате процеса на внедряване и да направите невероятно лесно е да управлявате работните потоци на внедряване през целия живот на софтуера проект.

Само с няколко прости стъпки можете да настроите работен поток за внедряване, за да автоматизирате процеса. Това включва проследяване на нови промени в клонове и регистриране на всички грешки. Прочетете, за да научите как да внедрите приложение React в хостинг услугата на Firebase.

Какво представлява CI/CD тръбопровод?

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

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

instagram viewer

CI/CD тръбопроводът обикновено обхваща няколко етапа, това включва:

  1. Етап на източника: Тази фаза обхваща действителното разработване и поддръжка на кода на приложението с инструмент за контрол на версиите като Git.
  2. Етап на изграждане: Тази стъпка сглобява изходния код с всичките му зависимости в изпълним формат.
  3. Етап на тестване: Този етап включва автоматизирани тестове за валидиране на качеството на софтуера. Крайната цел е да се открият и коригират всички грешки. Можете да извършвате различни видове тестове на този етап и след като кодът премине тестовете, той е готов за внедряване.
  4. Внедряване: Този етап автоматизира процеса на внедряване в производствената среда.

Конвейерът трябва да наблюдава всеки етап, за да гарантира, че няма грешки и да подобри целия процес за бъдещи версии.

Какво е GitHub Actions?

GitHub Actions е функция, осигурена от GitHub за автоматизиране на процесите на работния процес на внедряване на софтуера в CI/CD тръбопроводите. Това прави възможно дефинирането и автоматизирането на работните потоци за внедряване директно от хранилището на GitHub на вашия проект.

GitHub Actions има няколко предимства:

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

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

За да започнете, преминете към Firebase и влезте с вашия акаунт в Google. На страницата с преглед на конзолата щракнете Създаване на проект за създаване на нов проект и предоставяне на името на проекта.

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

npm install -g firebase-tools

Можете да намерите кода на този проект в него GitHub хранилище.

Влезте във Firebase от вашия терминал, като използвате идентификационните данни на акаунта си във Firebase.

влизане във firebase: ci

Това ще задейства потока за удостоверяване на Firebase, който ще ви подкани да въведете данните си за вход, ако още не сте влезли. След като Firebase ви удостовери, ще отпечата токен. Копирайте този токен; ще го използвате, за да изпълнявате команди на Firebase във вашата настройка на GitHub Actions.

И накрая, създайте готова за производство версия на вашето приложение:

npm изпълнява компилация

Тази команда генерира необходимите файлове и активи в нова папка „build“ в главната директория, необходими за внедряване на приложението.

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

Изпълнете тази команда, за да инициализирате Firebase в папката на вашия проект:

firebase инициал

След това потвърдете, че искате да инициализирате Firebase във вашия проект и продължете и изберете Хостинг: Конфигурирайте файлове за Firebase Hosting и (по избор) настройте 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-latest


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

 стъпки:
 - използва: actions/checkout@v2
 - име: Използвайте Node.js ${{ matrix.node-version }}
 използва: actions/setup-node@v1
 с:
 версия на възел: ${{ matrix.node-версия }}
 - стартирайте: npm install -g npm
 - име: npm инсталиране, изграждане и тестване
 изпълнение: |
 npm инсталирайте
 npm изпълнява компилация
 - име: Архивна компилация
 използва: actions/upload-artifact@v2
 с:
 име: изграждане
 път: изграждане

 разположи:
 име: Разположи
 нужди: изграждане
 работи на: ubuntu-latest
 стъпки:
 - използва: actions/checkout@v2
 - име: Изтегляне на компилация
 използва: actions/download-artifact@v2
 с:
 име: изграждане
 път: изграждане
 - име: Разположи във Firebase
 използва: w9jds/firebase-action@master
 с:
 аргументи: внедряване --само хостинг
 околна среда:
 FIREBASE_TOKEN: ${{ тайни. FIREBASE_TOKEN }}

Ето някои от обяснените ключови свойства:

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

И накрая, потвърдете промените, направени в този файл. GitHub автоматично ще задейства този работен процес, изграждайки и внедрявайки приложението React в хостинг услугата на Firebase. Можете да проверите за активния URL адрес на приложението в регистрационните файлове за внедряване.

Разполагане на приложения с помощта на GitHub Actions

GitHub Actions предоставя рационализиран подход за внедряване. Той гарантира, че можете да внедрявате приложения последователно и надеждно, независимо от технологията, в която ги изграждате.

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