Uľahčite si problémy s výrobou a nasadením pomocou CI/CD potrubia, ktoré sa postará o pracné detaily.

Nasadenie webových aplikácií na Firebase Hosting môže byť problém. Avšak pomocou akcií GitHub môžete zjednodušiť a zefektívniť proces nasadenia a vytvoriť je neuveriteľne jednoduché spravovať pracovné postupy nasadenia počas celej životnosti softvéru projektu.

Pomocou niekoľkých jednoduchých krokov môžete nastaviť pracovný postup nasadenia na automatizáciu procesu. To zahŕňa sledovanie nových zmien pobočiek a zaznamenávanie akýchkoľvek chýb. Čítajte ďalej a zistite, ako nasadiť aplikáciu React na hostiteľskej službe Firebase.

Čo je to CI/CD potrubie?

Potrubie CI/CD (Continuous Integration/Continuous Delivery) je súbor automatizovaných procesov implementovaných tak, aby bolo možné neustále vytvárať, testovať a nasadzovať aplikácie.

Jednoducho povedané, kanál CI/CD je nastavený tak, aby automatizoval procesy zapojené do životného cyklu vývoja softvéru. To bude zahŕňať skutočný vývoj, testovanie, vydania (beta, alfa a konečné vydanie), opravy chýb a dokonca aj aktualizácie funkcií. Tento proces v podstate umožňuje jednoducho a rýchlo dodávať kvalitný softvér.

instagram viewer

Potrubie CI/CD zvyčajne pokrýva niekoľko fáz, medzi ktoré patria:

  1. Fáza zdroja: Táto fáza pokrýva skutočný vývoj a údržbu kódu aplikácie pomocou nástroja na správu verzií, ako je Git.
  2. Build Stage: Tento krok zostaví zdrojový kód so všetkými jeho závislosťami do spustiteľného formátu.
  3. Testovacia fáza: Táto fáza zahŕňa automatizované testy na overenie kvality softvéru. Konečným cieľom je odhaliť a opraviť všetky chyby. V tejto fáze môžete vykonávať rôzne typy testov a keď kód prejde testami, je pripravený na nasadenie.
  4. Nasadenie: Táto fáza automatizuje proces nasadenia v produkčnom prostredí.

Potrubie by malo monitorovať každú fázu, aby sa zabezpečilo, že neexistujú žiadne chyby a aby sa celý proces zlepšil pre budúce vydania.

Čo sú akcie GitHub?

GitHub Actions je funkcia poskytovaná GitHubom na automatizáciu procesov pracovného toku nasadenia softvéru v kanáloch CI/CD. Umožňuje definovať a automatizovať pracovné postupy nasadenia priamo z úložiska GitHub vášho projektu.

GitHub Actions má niekoľko výhod:

  1. Jednoduché použitie: GitHub Actions poskytuje užívateľsky prívetivé rozhranie a jednoduchú syntax na nastavenie pracovných postupov nasadenia. Pomocou vstavaného editora na GitHub môžete jednoducho a rýchlo definovať svoje pracovné postupy projektu.
  2. Natívna integrácia: GitHub Actions je súčasťou GitHub, čo uľahčuje nastavenie, správu a spoluprácu na pracovných postupoch popri kóde vášho projektu.
  3. Flexibilné a prispôsobiteľné: GitHub Actions poskytuje flexibilnú a prispôsobiteľnú platformu, ktorá zaisťuje, že môžete vytvárať pracovné postupy, ktoré vyhovujú vašim špecifickým potrebám. Okrem toho podporuje viacero programovacích jazykov. To znamená, že ho môžete použiť s akoukoľvek technológiou, ktorú uprednostňujete.

Nastavte projekt Firebase a klienta React

Ak chcete začať, prejdite na Firebase a prihláste sa pomocou svojho účtu Google. Na stránke prehľadu konzoly kliknite na Vytvoriť projekt vytvoriť nový projekt a zadať názov projektu.

Ďalšie, vytvorte aplikáciu React a nainštalujte nástroje príkazového riadka Firebase:

npm install -g firebase-tools

Kód tohto projektu nájdete v ňom úložisko GitHub.

Prihláste sa do Firebase zo svojho terminálu pomocou poverení účtu Firebase.

prihlásenie do firebase: ci

Toto spustí overovací postup Firebase, ktorý vás vyzve na zadanie prihlasovacích údajov, ak ešte nie ste prihlásení. Keď vás Firebase overí, vytlačí token. Skopírujte tento token; budete ho používať na spúšťanie príkazov Firebase v nastavení akcií GitHub.

Nakoniec vytvorte produkčnú verziu vašej aplikácie:

npm spustiť zostavenie

Tento príkaz vygeneruje potrebné súbory a aktíva v novom priečinku „build“ v koreňovom adresári, ktoré sú potrebné na nasadenie aplikácie.

Inicializujte Firebase vo svojej aplikácii React

Spustite tento príkaz na inicializáciu Firebase v priečinku projektu:

inicializácia firebase

Ďalej potvrďte, že chcete inicializovať Firebase vo svojom projekte a pokračujte a vyberte Hosting: Nakonfigurujte súbory pre Firebase Hosting a (voliteľne) nastavte nasadenia akcie GitHubzo zoznamu možností.

Zadajte, že chcete použiť existujúci projekt, a vyberte názov projektu, ktorý ste pôvodne vytvorili vo vývojárskej konzole Firebase.

Ďalej zadajte priečinok „build“ ako verejnosti adresár, vyberte Nie ak chcete prepísať všetky adresy URL na možnosť /index.html, vyberte Nie na možnosť nastavenia automatických zostavení a nasadení z GitHubu a nakoniec Select Áno na prepísanie voľby súboru build/index.html.

Po vykonaní zmien vyššie vytvorí CLI súbor firebase.json v koreňovom adresári. Tento súbor obsahuje všetku konfiguráciu hostenia, ktorú bude vyžadovať pracovný postup akcií GitHub.

Nakoniec, pred nastavením pracovného postupu akcií GitHub, vytvorte úložisko na GitHuba vložte do nej súbory projektu.

Nastavenie akcií GitHub

V úložisku vášho projektu na GitHub vyberte nastavenie > Tajomstvá a premenné > Akcie. Na tajnej stránke úložiska zadajte FIREBASE_TOKEN ako názov tajomstva a vložte ho do tokenu Firebase, ktorý ste skopírovali do Tajomstvá poliach.

Nastavte pracovný postup nasadenia

Kliknite na kartu Akcie v úložisku vášho projektu a vyberte Nakonfigurujte Nodejs pracovný postup v Nepretržitá integrácia oddiele.

Ďalej premenujte názov súboru na firebase.yml, odstráňte štandardný kód v editore a pridajte kód nižšie:

# Tento pracovný postup vykoná čistú inštaláciu závislostí uzlov,
# cache/obnovte ich, zostavte zdroj kódovať a spúšťať rôzne testy
# verzie uzla
# Viac informácií nájdete na:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
názov: Firebase CI


na:
 TAM:
 pobočky: [ hlavné ]
 pull_request:
 pobočky: [hlavné]


pracovné miesta:
 postaviť:


 run-on: ubuntu-najnovšie


 stratégia:
 matica:
 verzia uzla: [14.x]

 kroky:
 - používa: actions/checkout@v2
 - name: Použite Node.js ${{ matrix.node-version }}
 používa: actions/setup-node@v1
 s:
 node-version: ${{ matrix.node-version }}
 - spustiť: npm install -g npm
 - názov: npm install, build and test
 beh: |
 inštalácia npm
 npm spustiť zostavenie
 - názov: Archive Build
 používa: actions/upload-artifact@v2
 s:
 názov: stavať
 cesta: stavať

 nasadiť:
 názov: Nasadiť
 potreby: stavať
 run-on: ubuntu-najnovšie
 kroky:
 - používa: actions/checkout@v2
 - názov: Stiahnuť zostavu
 použitie: actions/download-artifact@v2
 s:
 názov: stavať
 cesta: stavať
 - názov: Nasadiť na Firebase
 používa: w9jds/firebase-action@master
 s:
 args: deploy --iba hosting
 env:
 FIREBASE_TOKEN: ${{ tajomstvá. FIREBASE_TOKEN }}

Tu sú vysvetlené niektoré z kľúčových vlastností:

  1. Zapnuté: Udalosti, ktoré spúšťajú akcie v tomto pracovnom postupe.
  2. Práca: Určuje úlohy, ktoré má spustiť konkrétna akcia. V tomto prípade existujú dve úlohy: zostavenie a nasadenie.
  3. Nábehy: stroj, na ktorom sa má táto akcia spustiť.
  4. Kroky: Definuje postupnosť krokov, ktoré má akcia vykonať pre konkrétnu úlohu.
  5. s:Uvádza všetky argumenty požadované akciami na spustenie.
  6. názov: Názov konkrétneho kroku úlohy.

Nakoniec potvrďte zmeny vykonané v tomto súbore. GitHub automaticky spustí tento pracovný postup, zostaví a nasadí aplikáciu React na hostingovej službe Firebase. Živú adresu URL aplikácie môžete skontrolovať v denníkoch nasadenia.

Nasadenie aplikácií pomocou akcií GitHub

GitHub Actions poskytuje zjednodušený prístup k nasadeniu. Zabezpečuje, že aplikácie môžete nasadzovať konzistentne a spoľahlivo bez ohľadu na technológiu, do ktorej ich zabudujete.

Okrem toho môžete jednoducho prispôsobiť pracovný tok nasadenia pomocou vstavaných nástrojov nasadenia tak, aby vyhovoval vašim špecifickým potrebám CI/CD.