Olakšajte svoje poteškoće s proizvodnjom i implementacijom uz CI/CD cjevovod koji brine o napornim detaljima.

Implementacija web aplikacija na Firebase Hosting može biti gnjavaža. Međutim, korištenjem GitHub radnji možete pojednostaviti i usmjeriti proces implementacije i učiniti nevjerojatno je lako upravljati tijekovima rada implementacije tijekom cijelog životnog vijeka softvera projekt.

Uz samo nekoliko jednostavnih koraka, možete postaviti radni tijek implementacije kako biste automatizirali proces. To uključuje praćenje novih promjena u granama i bilježenje svih pogrešaka. Čitajte dalje kako biste saznali kako implementirati React aplikaciju na Firebaseovoj usluzi hostinga.

Što je CI/CD cjevovod?

CI/CD (Continuous Integration/Continuous Delivery) cjevovod skup je automatiziranih procesa implementiranih kako bi se omogućila kontinuirana izgradnja, testiranje i implementacija aplikacija.

Jednostavno rečeno, CI/CD cjevovod je postavljen za automatizaciju procesa uključenih u životni ciklus razvoja softvera. To će uključivati ​​stvarni razvoj, testiranje, izdanja (beta, alfa i konačno izdanje), ispravke grešaka, pa čak i ažuriranja značajki. U biti, ovaj proces omogućuje jednostavno i brzo slanje kvalitetnog softvera.

instagram viewer

CI/CD cjevovod obično pokriva nekoliko faza, što uključuje:

  1. Izvorni stupanj: Ova faza pokriva stvarni razvoj i održavanje koda aplikacije pomoću alata za kontrolu verzija kao što je Git.
  2. Faza izgradnje: Ovaj korak sastavlja izvorni kod sa svim njegovim ovisnostima u izvršni format.
  3. Faza testiranja: Ova faza uključuje automatizirane testove za provjeru kvalitete softvera. Krajnji cilj je otkriti i ispraviti sve pogreške. U ovoj fazi možete provesti različite vrste testova i kada kod prođe testove, spreman je za implementaciju.
  4. Implementacija: Ova faza automatizira proces implementacije u proizvodnom okruženju.

Cjevovod bi trebao nadzirati svaku fazu kako bi se osiguralo da nema grešaka i poboljšao cijeli proces za buduća izdanja.

Što su GitHub akcije?

GitHub Actions je značajka koju daje GitHub za automatiziranje procesa rada implementacije softvera u CI/CD cjevovodima. Omogućuje definiranje i automatiziranje radnih tijekova implementacije izravno iz GitHub repozitorija vašeg projekta.

GitHub Actions ima nekoliko prednosti:

  1. Jednostavan za korištenje: GitHub Actions pruža korisničko sučelje i jednostavnu sintaksu za postavljanje tijeka rada implementacije. Možete jednostavno i brzo definirati tijek rada vašeg projekta pomoću ugrađenog uređivača na GitHubu.
  2. Izvorna integracija: GitHub Actions dio je GitHuba, što olakšava postavljanje, upravljanje i suradnju na tijekovima rada uz kod vašeg projekta.
  3. Fleksibilan i prilagodljiv: GitHub Actions pruža fleksibilnu i prilagodljivu platformu koja osigurava da možete izgraditi tijekove rada koji odgovaraju vašim specifičnim potrebama. Osim toga, podržava više programskih jezika. Što znači, možete ga koristiti s bilo kojom tehnologijom koju želite.

Postavite Firebase projekt i React Client

Za početak idite na Firebase i prijavite se svojim Google računom. Na stranici s pregledom konzole kliknite Stvori projekt za postavljanje novog projekta i davanje naziva projekta.

Sljedeći, izraditi React aplikaciju i instalirajte Firebase alate naredbenog retka:

npm install -g firebase-tools

Kôd ovog projekta možete pronaći u GitHub spremište.

Prijavite se na Firebase sa svog terminala pomoću vjerodajnica Firebase računa.

prijava na firebase: ci

To će pokrenuti tijek provjere autentičnosti Firebasea koji će od vas tražiti da unesete podatke za prijavu ako već niste prijavljeni. Nakon što vas Firebase autentificira, ispisat će token. Kopirajte ovaj token; koristit ćete ga za pokretanje Firebase naredbi u postavkama GitHub Actions.

Na kraju, izradite verziju svoje aplikacije spremnu za proizvodnju:

npm pokrenuti izgradnju

Ova naredba generira potrebne datoteke i sredstva, unutar nove 'build' mape u korijenskom direktoriju, potrebna za implementaciju aplikacije.

Inicijalizirajte Firebase u svojoj React aplikaciji

Pokrenite ovu naredbu da inicijalizirate Firebase u mapi vašeg projekta:

firebase init

Zatim potvrdite da želite inicijalizirati Firebase u svom projektu i odaberite Hosting: Konfigurirajte datoteke za Firebase Hosting i (po izboru) postavite GitHub Action implementacijes popisa opcija.

Navedite da želite koristiti postojeći projekt i odaberite naziv projekta koji ste inicijalno izradili na Firebaseovoj konzoli za razvojne programere.

Zatim navedite mapu 'build' kao javnost imenik, odaberite Ne za prepisivanje svih URL-ova u opciju /index.html, odaberite Ne na opciju postavljanja automatske izrade i implementacije s GitHuba i na kraju Odaberite Da da biste prebrisali opciju datoteke build/index.html.

Nakon gore navedenih promjena, CLI će stvoriti datoteku firebase.json u korijenskom direktoriju. Ova datoteka sadrži svu konfiguraciju hostinga koju će zahtijevati tijek rada GitHub Actions.

Konačno, prije postavljanja tijeka rada GitHub Actions, stvoriti repozitorij na GitHubu, i gurnite datoteke projekta na njega.

Postavljanje GitHub radnji

U repozitoriju vašeg projekta na GitHubu odaberite postavke > Tajne i varijable > Radnje. Na tajnoj stranici spremišta unesite FIREBASE_TOKEN kao naziv tajne i zalijepite Firebase token koji ste kopirali u tajne polja.

Postavite radni tijek implementacije

Pritisnite karticu Radnje u spremištu vašeg projekta i odaberite Konfigurirajte Nodejs tijek rada u Kontinuirana integracija odjeljak.

Zatim promijenite naziv datoteke u firebase.yml, izbrišite šablonski kod u uređivaču i dodajte kod u nastavku:

# Ovaj tijek rada izvršit će čistu instalaciju ovisnosti čvorova,
# predmemorirati/vratiti ih, izgraditi izvor kodirati i izvoditi testove na različitim
# verzije čvora
# Za više informacija pogledajte:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
naziv: Firebase CI


na:
 gurnuti:
 grane: [ glavna ]
 pull_request:
 grane: [ glavna]


poslovi:
 izgraditi:


 runs-on: ubuntu-najnovije


 strategija:
 matrica:
 verzija čvora: [14.x]

 koraci:
 - koristi: akcije/odjava@v2
 - naziv: Koristite Node.js ${{ matrix.node-version }}
 koristi: akcije/setup-node@v1
 s:
 verzija-čvora: ${{ matrix.verzija-čvora }}
 - pokrenite: npm install -g npm
 - naziv: npm instaliraj, izgradi i testiraj
 pokrenuti: |
 npm instalirati
 npm pokrenuti izgradnju
 - naziv: Archive Build
 koristi: akcije/upload-artifact@v2
 s:
 naziv: graditi
 put: graditi

 rasporediti:
 ime: Rasporedi
 treba: graditi
 runs-on: ubuntu-najnovije
 koraci:
 - koristi: akcije/odjava@v2
 - naziv: Download Build
 koristi: akcije/download-artifact@v2
 s:
 naziv: graditi
 put: graditi
 - naziv: implementacija u Firebase
 koristi: w9jds/firebase-action@master
 s:
 args: implementacija --samo hosting
 okruženje:
 FIREBASE_TOKEN: ${{ tajne. FIREBASE_TOKEN }}

Ovdje su objašnjena neka od ključnih svojstava:

  1. Na: Događaji koji pokreću radnje u ovom tijeku rada.
  2. Poslovi: Određuje poslove koje određena radnja treba pokrenuti. U ovom slučaju postoje dva posla: izgradnja i implementacija.
  3. Naletjeti: stroj na kojem se ova akcija mora izvoditi.
  4. Koraci: Definira slijed koraka koje radnja treba izvesti za određeni posao.
  5. S: Određuje sve argumente potrebne za izvođenje radnji.
  6. Ime: naziv određenog koraka za posao.

Na kraju, potvrdite promjene napravljene u ovoj datoteci. GitHub će automatski pokrenuti ovaj tijek rada, izgradnjom i implementacijom React aplikacije na Firebaseovoj usluzi hostinga. Možete provjeriti živi URL aplikacije u zapisnicima implementacije.

Postavljanje aplikacija pomoću GitHub radnji

GitHub Actions pruža pojednostavljen pristup implementaciji. Osigurava dosljednu i pouzdanu implementaciju aplikacija, bez obzira na tehnologiju u koju ih ugrađujete.

Nadalje, možete jednostavno prilagoditi radni tijek implementacije korištenjem ugrađenih alata za implementaciju kako biste zadovoljili svoje specifične potrebe CI/CD cjevovoda.