Implementer en React-applikation til Firebase med GitHub-handlinger

Det kan være besværligt at implementere webapplikationer til Firebase Hosting. Men ved at bruge GitHub-handlinger kan du forenkle og strømline implementeringsprocessen og lave det er utrolig nemt at administrere implementeringsarbejdsgange gennem hele softwarens levetid projekt.

Med blot et par enkle trin kan du konfigurere en implementeringsarbejdsgang for at automatisere processen. Dette inkluderer sporing af nye ændringer til filialer og logning af eventuelle fejl. Læs videre for at lære, hvordan du implementerer en React-applikation på Firebases hostingtjeneste.

Hvad er en CI/CD-rørledning?

En CI/CD (Continuous Integration/Continuous Delivery) pipeline er et sæt automatiserede processer, der er implementeret for at gøre det muligt kontinuerligt at bygge, teste og implementere applikationer.

Enkelt sagt er en CI/CD-pipeline sat op til at automatisere de processer, der er involveret i softwareudviklingens livscyklus. Dette vil inkludere den faktiske udvikling, test, udgivelser (beta, alfa og endelig udgivelse), fejlrettelser og endda funktionsopdateringer. Grundlæggende gør denne proces det muligt nemt og hurtigt at sende kvalitetssoftware.

En CI/CD-pipeline dækker typisk et par trin, som inkluderer:

1. Kildestadie: Denne fase dækker den faktiske udvikling og vedligeholdelse af applikationens kode med et versionskontrolværktøj såsom Git.
2. Build Stage: Dette trin samler kildekoden med alle dens afhængigheder i et eksekverbart format.
3. Testfase: Denne fase inkorporerer automatiserede tests for at validere softwarens kvalitet. Slutmålet er at opdage og rette eventuelle fejl. Du kan udføre forskellige typer test i denne fase, og når koden har bestået testene, er den klar til at blive implementeret.
4. Implementering: Dette trin automatiserer implementeringsprocessen i produktionsmiljøet.

Pipelinen bør overvåge hvert trin for at sikre, at der ikke er nogen fejl, og for at forbedre hele processen til fremtidige udgivelser.

Hvad er GitHub Actions?

GitHub Actions er en funktion leveret af GitHub til at automatisere en softwares implementeringsworkflowprocesser i CI/CD-pipelines. Det gør det muligt at definere og automatisere implementeringsarbejdsgange direkte fra dit projekts GitHub-lager.

GitHub Actions har flere fordele:

1. Nem at bruge: GitHub Actions giver en brugervenlig grænseflade og en simpel syntaks til opsætning af implementeringsarbejdsgange. Du kan nemt og hurtigt definere dine projektarbejdsgange ved hjælp af den indbyggede editor på GitHub.
2. Native Integration: GitHub Actions er en del af GitHub, hvilket gør det nemt at opsætte, administrere og samarbejde om arbejdsgange sammen med dit projekts kode.
3. Fleksibel og tilpasselig: GitHub Actions giver en fleksibel og tilpasselig platform, der sikrer, at du kan bygge arbejdsgange, der passer til dine specifikke behov. Derudover understøtter den flere programmeringssprog. Det betyder, at du kan bruge den med den teknologi, du foretrækker.

Konfigurer et Firebase-projekt og React-klienten

Gå over til for at komme i gang Firebase og log ind med din Google-konto. Klik på på konsoloversigtssiden Opret projekt at oprette et nyt projekt og oplyse projektets navn.

Næste, oprette en React-applikation og installer Firebase-kommandolinjeværktøjerne:

npm installer -g firebase-værktøjer

Du kan finde dette projekts kode i dens GitHub-depot.

Log ind på Firebase fra din terminal ved hjælp af dine Firebase-kontooplysninger.

firebase login: ci

Dette vil udløse Firebase-godkendelsesflowet, som vil bede dig om at indtaste dine loginoplysninger, hvis du ikke allerede er logget ind. Når Firebase godkender dig, udskriver den et token. Kopier dette token; du bruger det til at køre Firebase-kommandoer i din GitHub Actions-opsætning.

Til sidst skal du oprette en produktionsklar version af din applikation:

npm køre build

Denne kommando genererer de nødvendige filer og aktiver i en ny 'build'-mappe i rodmappen, som er nødvendige for at implementere programmet.

Initialiser Firebase i din React-applikation

Kør denne kommando for at initialisere Firebase i din projektmappe:

firebase init

Derefter skal du bekræfte, at du vil initialisere Firebase i dit projekt, og gå videre og vælge Hosting: Konfigurer filer til Firebase Hosting og (valgfrit) opsæt GitHub Action-implementeringerfra listen over muligheder.

Angiv, at du vil bruge et eksisterende projekt, og vælg det projektnavn, du oprindeligt oprettede på Firebases udviklerkonsol.

Angiv derefter 'build'-mappen som offentlig bibliotek, vælg Ingen for at omskrive alle URL'er til /index.html valgmulighed, vælg Ingen til muligheden for at opsætte automatiske builds og implementeringer fra GitHub, og til sidst Vælg Ja for at overskrive filen build/index.html.

Efter at have foretaget ændringerne ovenfor, vil CLI'en oprette en firebase.json-fil i rodmappen. Denne fil indeholder al den hostingkonfiguration, som GitHub Actions-arbejdsgangen vil kræve.

Til sidst, før du opsætter GitHub Actions-arbejdsgangen, opret et lager på GitHub, og skub projektfilerne til den.

Opsætning af GitHub-handlinger

I dit projekts repository på GitHub skal du vælge Indstillinger > Hemmeligheder og variabler > Handlinger. Indtast på lagerets hemmelige side FIREBASE_TOKEN som navnet på hemmeligheden, og indsæt det Firebase-token, du kopierede i Hemmeligheder felter.

Konfigurer implementeringsarbejdsgangen

Klik på fanen Handlinger i dit projekts lager, og vælg Konfigurer Nodejs arbejdsgang i Kontinuerlig integration afsnit.

Omdøb derefter filnavnet til firebase.yml, slet boilerplate-koden på editoren, og tilføj koden nedenfor:

# Denne arbejdsgang vil udføre en ren installation af nodeafhængigheder,
# cache/gendan dem, byg kilde kode og kør test på tværs af forskellige
# versioner af node
# For mere information se:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
navn: Firebase CI
på:
 skubbe:
 grene: [ hoved ]
 pull_request:
 grene: [hoved]
job:
 bygge:
 kører-på: ubuntu-nyeste
 strategi:
 matrix:
 node-version: [14.x]

 trin:
 - bruger: actions/checkout@v2
 - navn: Brug Node.js ${{ matrix.node-version }}
 bruger: actions/setup-node@v1
 med:
 node-version: ${{ matrix.node-version }}
 - Kør: npm installer -g npm
 - navn: npm installere, bygge og teste
 køre: |
 npm installere
 npm køre build
 - navn: Arkivbygning
 bruger: actions/upload-artifact@v2
 med:
 navn: bygge
 sti: bygge

 indsætte:
 navn: Implementer
 behov: bygge
 kører-på: ubuntu-nyeste
 trin:
 - bruger: actions/checkout@v2
 - navn: Download Build
 bruger: actions/download-artifact@v2
 med:
 navn: bygge
 sti: bygge
 - navn: Implementer til Firebase
 bruger: w9jds/firebase-action@master
 med:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ hemmeligheder. FIREBASE_TOKEN }}

Her er nogle af nøgleegenskaberne forklaret:

1. På: Hændelser, der udløser handlingerne i denne arbejdsgang.
2. Jobs: Specificerer de job, som en bestemt handling skal køre. I dette tilfælde er der to job: bygge og implementere.
3. Kører på: den maskine, som denne handling skal køre på.
4. Trin: Definerer en række trin, som handlingen skal udføre for et bestemt job.
5. Med: Specificerer eventuelle argumenter, der kræves af handlingerne for at køre.
6. Navn: Navn på et bestemt trin for et job.

Til sidst skal du foretage ændringerne i denne fil. GitHub udløser automatisk denne arbejdsgang, opbygning og implementering af React-applikationen på Firebases hostingtjeneste. Du kan se efter applikationens live-URL i implementeringslogfilerne.

Implementering af applikationer ved hjælp af GitHub-handlinger

GitHub Actions giver en strømlinet implementeringstilgang. Det sikrer, at du kan implementere applikationer konsekvent og pålideligt, uanset hvilken teknologi du bygger dem ind i.

Desuden kan du nemt tilpasse implementeringsworkflowet ved at bruge de indbyggede implementeringsværktøjer til at opfylde dine specifikke CI/CD-pipelinebehov.