Ușurează-ți problemele de producție și implementare cu o conductă CI/CD care are grijă de detaliile laborioase.

Implementarea aplicațiilor web pe Firebase Hosting poate fi o problemă. Cu toate acestea, prin utilizarea acțiunilor GitHub puteți simplifica și eficientiza procesul de implementare și puteți face este incredibil de ușor să gestionați fluxurile de lucru de implementare pe toată durata de viață a unui software proiect.

Cu doar câțiva pași simpli, puteți configura un flux de lucru de implementare pentru a automatiza procesul. Aceasta include urmărirea noilor modificări aduse ramurilor și înregistrarea oricăror erori. Citiți mai departe pentru a afla cum să implementați o aplicație React pe serviciul de găzduire Firebase.

Ce este o conductă CI/CD?

O conductă CI/CD (Continuous Integration/Continuous Delivery) este un set de procese automatizate implementate pentru a face posibilă construirea, testarea și implementarea continuă a aplicațiilor.

Mai simplu spus, o conductă CI/CD este configurată pentru a automatiza procesele implicate în ciclul de viață al dezvoltării software. Aceasta va include dezvoltarea efectivă, testarea, lansările (beta, alfa și versiunea finală), remedierea erorilor și chiar actualizările de caracteristici. În esență, acest proces face posibilă livrarea cu ușurință și rapiditate a software-ului de calitate.

instagram viewer

O conductă CI/CD acoperă de obicei câteva etape, acestea includ:

  1. Etapa sursă: Această fază acoperă dezvoltarea și întreținerea efectivă a codului aplicației cu un instrument de control al versiunilor, cum ar fi Git.
  2. Etapa de construire: Acest pas asamblează codul sursă cu toate dependențele sale într-un format executabil.
  3. Etapa de testare: Această etapă încorporează teste automate pentru a valida calitatea software-ului. Scopul final este de a detecta și corecta orice erori. Puteți efectua diferite tipuri de teste în această etapă și odată ce codul a trecut testele, este gata de implementare.
  4. Implementare: Această etapă automatizează procesul de implementare în mediul de producție.

Conducta ar trebui să monitorizeze fiecare etapă pentru a se asigura că nu există erori și pentru a îmbunătăți întregul proces pentru versiunile viitoare.

Ce este GitHub Actions?

GitHub Actions este o caracteristică oferită de GitHub pentru a automatiza procesele fluxului de lucru de implementare a unui software în conductele CI/CD. Face posibilă definirea și automatizarea fluxurilor de lucru de implementare direct din depozitul GitHub al proiectului dumneavoastră.

GitHub Actions are mai multe beneficii:

  1. Ușor de utilizat: GitHub Actions oferă o interfață ușor de utilizat și o sintaxă simplă pentru configurarea fluxurilor de lucru de implementare. Puteți defini ușor și rapid fluxurile de lucru ale proiectului folosind editorul încorporat pe GitHub.
  2. Integrare nativă: GitHub Actions face parte din GitHub, facilitând configurarea, gestionarea și colaborarea la fluxuri de lucru alături de codul proiectului.
  3. Flexibil și personalizabil: GitHub Actions oferă o platformă flexibilă și personalizabilă care vă asigură că puteți crea fluxuri de lucru care se potrivesc nevoilor dumneavoastră specifice. În plus, acceptă mai multe limbaje de programare. Adică, îl poți folosi cu orice tehnologie preferi.

Configurați un proiect Firebase și React Client

Pentru a începe, mergeți la Firebase și conectați-vă cu contul dvs. Google. Pe pagina de prezentare generală a consolei, faceți clic Creați proiect pentru a crea un nou proiect și a furniza numele proiectului.

Următorul, creați o aplicație React și instalați instrumentele de linie de comandă Firebase:

npm install -g firebase-tools

Puteți găsi codul acestui proiect în documentul său Depozitul GitHub.

Conectați-vă la Firebase de pe terminal utilizând acreditările contului Firebase.

autentificare firebase: ci

Acest lucru va declanșa fluxul de autentificare Firebase, care vă va solicita să introduceți detaliile de conectare dacă nu sunteți deja conectat. Odată ce Firebase te autentifică, va tipări un token. Copiați acest token; îl vei folosi pentru a rula comenzi Firebase în configurarea GitHub Actions.

În cele din urmă, creați o versiune pregătită pentru producție a aplicației dvs.:

npm run build

Această comandă generează fișierele și activele necesare, în interiorul unui nou folder „build” din directorul rădăcină, necesare pentru implementarea aplicației.

Inițializați Firebase în aplicația dvs. React

Rulați această comandă pentru a inițializa Firebase în folderul proiectului:

firebase init

Apoi, confirmați că doriți să inițializați Firebase în proiectul dvs. și continuați și selectați Găzduire: configurați fișierele pentru Firebase Hosting și (opțional) configurați implementările GitHub Actiondin lista de opțiuni.

Specificați că doriți să utilizați un proiect existent și selectați numele proiectului pe care l-ați creat inițial în consola pentru dezvoltatori Firebase.

Apoi, specificați folderul „build” drept public director, selectați Nu pentru a rescrie toate adresele URL în opțiunea /index.html, selectați Nu la opțiunea de a seta build-uri și implementări automate din GitHub și, în sfârșit, Select da pentru a suprascrie opțiunea fișierului build/index.html.

După efectuarea modificărilor de mai sus, CLI va crea un fișier firebase.json în directorul rădăcină. Acest fișier conține toată configurația de găzduire de care va necesita fluxul de lucru GitHub Actions.

În cele din urmă, înainte de a configura fluxul de lucru GitHub Actions, creați un depozit pe GitHub, și împingeți fișierele de proiect la el.

Configurarea acțiunilor GitHub

În depozitul proiectului dvs. de pe GitHub, selectați Setări > Secrete și variabile > Acțiuni. În pagina secretă a depozitului, introduceți FIREBASE_TOKEN ca numele secretului și inserați în jetonul Firebase pe care l-ați copiat în Secrete câmpuri.

Configurați fluxul de lucru de implementare

Faceți clic pe fila Acțiuni din depozitul proiectului și selectați Configurați Nodejs fluxul de lucru în Integrare continuă secțiune.

Apoi, redenumiți numele fișierului în firebase.yml, ștergeți codul standard din editor și adăugați codul de mai jos:

# Acest flux de lucru va efectua o instalare curată a dependențelor nodurilor,
# cache/restaurează-le, construiește sursă codificați și executați teste în diferite
# versiuni ale nodului
# Pentru mai multe informații vezi:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nume: Firebase CI


pe:
 Apăsaţi:
 ramuri: [principal]
 pull_request:
 ramuri: [principal]


locuri de munca:
 construi:


 rulează-pe: ubuntu-latest


 strategie:
 matrice:
 versiunea nod: [14.x]

 pași:
 - folosește: actions/checkout@v2
 - nume: Utilizați Node.js ${{ matrix.node-version }}
 folosește: actions/setup-node@v1
 cu:
 versiunea nodului: ${{ matrix.node-version }}
 - rulați: npm install -g npm
 - nume: instalarea, construirea și testarea npm
 alerga: |
 instalare npm
 npm run build
 - nume: Arhivă Build
 utilizări: actions/upload-artifact@v2
 cu:
 nume: construi
 cale: construi

 implementează:
 nume: Deploy
 necesită: construi
 rulează-pe: ubuntu-latest
 pași:
 - folosește: actions/checkout@v2
 - nume: Download Build
 utilizări: actions/download-artifact@v2
 cu:
 nume: construi
 cale: construi
 - nume: implementați în Firebase
 folosește: w9jds/firebase-action@master
 cu:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ secrete. FIREBASE_TOKEN }}

Iată câteva dintre proprietățile cheie explicate:

  1. Pe: Evenimente care declanșează acțiunile din acest flux de lucru.
  2. Locuri de munca: Specifică joburile pe care ar trebui să le execute o anumită Acțiune. În acest caz, există două sarcini: construirea și implementarea.
  3. Rulează: mașina pe care trebuie să ruleze această acțiune.
  4. Pași: Definește o secvență de pași pentru acțiunea de efectuat pentru o anumită sarcină.
  5. Cu:Specifică orice argument cerut de Acțiuni pentru a rula.
  6. Nume: Numele unui anumit pas pentru un loc de muncă.

În cele din urmă, comite modificările făcute în acest fișier. GitHub va declanșa automat acest flux de lucru, construind și implementând aplicația React pe serviciul de găzduire Firebase. Puteți verifica adresa URL live a aplicației în jurnalele de implementare.

Implementarea aplicațiilor utilizând acțiuni GitHub

GitHub Actions oferă o abordare simplificată de implementare. Vă asigură că puteți implementa aplicații în mod consecvent și fiabil, indiferent de tehnologia în care le construiți.

În plus, puteți personaliza cu ușurință fluxul de lucru de implementare utilizând instrumentele de implementare încorporate pentru a vă satisface nevoile specifice ale conductei CI/CD.