Distribuer en React-applikasjon til Firebase med GitHub-handlinger

Det kan være vanskelig å distribuere nettapplikasjoner til Firebase Hosting. Ved å bruke GitHub-handlinger kan du imidlertid forenkle og strømlinjeforme distribusjonsprosessen og lage det er utrolig enkelt å administrere arbeidsflyter for distribusjon gjennom hele levetiden til en programvare prosjekt.

Med bare noen få enkle trinn kan du sette opp en distribusjonsarbeidsflyt for å automatisere prosessen. Dette inkluderer sporing av nye endringer i grener og logging av eventuelle feil. Les videre for å lære hvordan du distribuerer en React-applikasjon på Firebases vertstjeneste.

Hva er en CI/CD-rørledning?

En CI/CD (Continuous Integration/Continuous Delivery) pipeline er et sett med automatiserte prosesser implementert for å gjøre det mulig å kontinuerlig bygge, teste og distribuere applikasjoner.

Enkelt sagt er en CI/CD-pipeline satt opp for å automatisere prosessene som er involvert i programvareutviklingens livssyklus. Dette vil inkludere faktisk utvikling, testing, utgivelser (beta, alfa og endelig utgivelse), feilrettinger og til og med funksjonsoppdateringer. I hovedsak gjør denne prosessen det mulig å enkelt og raskt sende kvalitetsprogramvare.

En CI/CD-pipeline dekker vanligvis et par stadier, dette inkluderer:

1. Kildestadium: Denne fasen dekker selve utviklingen og vedlikeholdet av applikasjonens kode med et versjonskontrollverktøy som Git.
2. Byggstadiet: Dette trinnet setter sammen kildekoden med alle dens avhengigheter til et kjørbart format.
3. Teststadiet: Dette stadiet inneholder automatiserte tester for å validere kvaliteten på programvaren. Sluttmålet er å oppdage og korrigere eventuelle feil. Du kan utføre forskjellige typer tester i dette stadiet, og når koden har bestått testene, er den klar til å distribueres.
4. Distribusjon: Dette stadiet automatiserer distribusjonsprosessen i produksjonsmiljøet.

Rørledningen bør overvåke hvert trinn for å sikre at det ikke er noen feil og for å forbedre hele prosessen for fremtidige utgivelser.

Hva er GitHub-handlinger?

GitHub Actions er en funksjon levert av GitHub for å automatisere en programvares distribusjonsarbeidsflytprosesser i CI/CD-rørledningene. Det gjør det mulig å definere og automatisere distribusjonsarbeidsflyter direkte fra prosjektets GitHub-depot.

GitHub Actions har flere fordeler:

1. Enkel å bruke: GitHub Actions gir et brukervennlig grensesnitt og en enkel syntaks for å sette opp distribusjonsarbeidsflyter. Du kan enkelt og raskt definere prosjektarbeidsflytene dine ved å bruke den innebygde editoren på GitHub.
2. Native Integration: GitHub Actions er en del av GitHub, noe som gjør det enkelt å sette opp, administrere og samarbeide om arbeidsflyter sammen med prosjektets kode.
3. Fleksibel og tilpassbar: GitHub Actions gir en fleksibel og tilpassbar plattform som sikrer at du kan bygge arbeidsflyter som passer dine spesifikke behov. I tillegg støtter den flere programmeringsspråk. Det betyr at du kan bruke den med hvilken teknologi du foretrekker.

Sett opp et Firebase-prosjekt og React-klienten

For å komme i gang, gå over til Firebase og logg på med Google-kontoen din. Klikk på konsolloversiktssiden Opprett prosjekt for å sette opp et nytt prosjekt og oppgi prosjektets navn.

Neste, opprette en React-applikasjon og installer Firebase-kommandolinjeverktøyene:

npm installer -g firebase-verktøy

Du kan finne dette prosjektets kode i sin GitHub-depot.

Logg på Firebase fra terminalen din ved å bruke påloggingsinformasjonen for Firebase-kontoen din.

firebase-pålogging: ci

Dette vil utløse Firebase-autentiseringsflyten som vil be deg om å skrive inn påloggingsdetaljene dine hvis du ikke allerede er logget på. Når Firebase autentiserer deg, vil den skrive ut et token. Kopier dette tokenet; du bruker den til å kjøre Firebase-kommandoer i GitHub Actions-oppsettet ditt.

Til slutt, lag en produksjonsklar versjon av applikasjonen din:

npm kjøre bygge

Denne kommandoen genererer de nødvendige filene og ressursene, inne i en ny 'build'-mappe i rotkatalogen, som kreves for å distribuere programmet.

Initialiser Firebase i din React-applikasjon

Kjør denne kommandoen for å initialisere Firebase i prosjektmappen din:

brannbase init

Deretter bekrefter du at du vil initialisere Firebase i prosjektet ditt, og fortsett og velg Hosting: Konfigurer filer for Firebase Hosting og (valgfritt) konfigurer GitHub Action-distribusjonerfra listen over alternativer.

Spesifiser at du vil bruke et eksisterende prosjekt, og velg prosjektnavnet du opprinnelig opprettet på Firebases utviklerkonsoll.

Deretter spesifiser 'build'-mappen som offentlig katalog, velg Nei for å omskrive alle URL-er til /index.html-alternativet, velg Nei til muligheten for å sette opp automatiske bygg og distribusjoner fra GitHub, og til slutt, Velg Ja for å overskrive filalternativet build/index.html.

Etter å ha gjort endringene ovenfor, vil CLI opprette en firebase.json-fil i rotkatalogen. Denne filen inneholder all vertskonfigurasjonen som GitHub Actions-arbeidsflyten vil kreve.

Til slutt, før du setter opp GitHub Actions arbeidsflyt, opprette et depot på GitHub, og skyv prosjektfilene til den.

Sette opp GitHub-handlinger

I prosjektets repository på GitHub velger du Innstillinger > Hemmeligheter og variabler > Handlinger. Skriv inn på depotets hemmelige side FIREBASE_TOKEN som navnet på hemmeligheten, og lim inn Firebase-tokenet du kopierte i hemmeligheter Enger.

Sett opp distribusjonsarbeidsflyten

Klikk på fanen Handlinger i prosjektets depot, og velg Konfigurer Nodejs arbeidsflyt i Kontinuerlig integrering seksjon.

Deretter endre navn på filnavnet til firebase.yml, slett boilerplate-koden på editoren, og legg til koden nedenfor:

# Denne arbeidsflyten vil utføre en ren installasjon av nodeavhengigheter,
# cache/gjenopprett dem, bygg kilde kode og kjøre tester på tvers av forskjellige
# versjoner av node
# For mer informasjon se:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
navn: Firebase CI
på:
 trykk:
 grener: [ hoved ]
 pull_request:
 grener: [ hoved]
arbeidsplasser:
 bygge:
 kjører på: ubuntu-nyeste
 strategi:
 matrise:
 node-versjon: [14.x]

 trinn:
 - bruker: actions/checkout@v2
 - navn: Bruk Node.js ${{ matrix.node-version }}
 bruker: actions/setup-node@v1
 med:
 node-versjon: ${{ matrix.node-version }}
 - kjør: npm installer -g npm
 - navn: npm installere, bygge og teste
 løp: |
 npm installere
 npm kjøre bygge
 - navn: Arkivbygg
 bruker: actions/upload-artifact@v2
 med:
 navn: bygge
 sti: bygge

 utplassere:
 navn: Deploy
 behov: bygge
 kjører på: ubuntu-nyeste
 trinn:
 - bruker: actions/checkout@v2
 - navn: Last ned Bygg
 bruker: actions/download-artifact@v2
 med:
 navn: bygge
 sti: bygge
 - navn: Distribuer til Firebase
 bruker: w9jds/firebase-action@master
 med:
 args: distribuer --only hosting
 env:
 FIREBASE_TOKEN: ${{ hemmeligheter. FIREBASE_TOKEN }}

Her er noen av nøkkelegenskapene forklart:

1. På: Hendelser som utløser handlingene i denne arbeidsflyten.
2. Arbeidsplasser: Spesifiserer jobbene som en bestemt handling skal kjøre. I dette tilfellet er det to jobber: bygge og distribuere.
3. Løper på: maskinen som denne handlingen skal kjøres på.
4. Trinn: Definerer en sekvens med trinn for handlingen som skal utføres for en bestemt jobb.
5. Med: Spesifiserer eventuelle argumenter som kreves av handlingene for å kjøre.
6. Navn: Navn på et bestemt trinn for en jobb.

Til slutt, forplikte endringene som er gjort i denne filen. GitHub vil automatisk utløse denne arbeidsflyten, bygge og distribuere React-applikasjonen på Firebases vertstjeneste. Du kan se etter programmets live URL i distribusjonsloggene.

Distribuere applikasjoner ved hjelp av GitHub-handlinger

GitHub Actions gir en strømlinjeformet distribusjonstilnærming. Det sikrer at du kan distribuere applikasjoner konsekvent og pålitelig, uavhengig av teknologien du bygger dem inn i.

Videre kan du enkelt tilpasse distribusjonsarbeidsflyten ved å bruke de innebygde distribusjonsverktøyene for å møte dine spesifikke CI/CD-pipelinebehov.