Distribuera en React-applikation till Firebase med GitHub-åtgärder

Det kan vara besvärligt att distribuera webbapplikationer till Firebase Hosting. Men genom att använda GitHub-åtgärder kan du förenkla och effektivisera distributionsprocessen och göra det är otroligt enkelt att hantera distributionsarbetsflöden under hela livslängden för en programvara projekt.

Med bara några enkla steg kan du ställa in ett distributionsarbetsflöde för att automatisera processen. Detta inkluderar spårning av nya ändringar av filialer och loggning av eventuella fel. Läs vidare för att lära dig hur du distribuerar en React-applikation på Firebases värdtjänst.

Vad är en CI/CD-pipeline?

En CI/CD (Continuous Integration/Continuous Delivery) pipeline är en uppsättning automatiserade processer som implementeras för att göra det möjligt att kontinuerligt bygga, testa och distribuera applikationer.

Enkelt uttryckt är en CI/CD-pipeline inrättad för att automatisera processerna som ingår i mjukvaruutvecklingens livscykel. Detta kommer att inkludera den faktiska utvecklingen, testning, utgåvor (beta, alfa och slutlig utgåva), buggfixar och till och med funktionsuppdateringar. I huvudsak gör denna process det möjligt att enkelt och snabbt skicka kvalitetsmjukvara.

En CI/CD-pipeline täcker vanligtvis ett par steg, detta inkluderar:

1. Källstadiet: Denna fas täcker den faktiska utvecklingen och underhållet av applikationens kod med ett versionskontrollverktyg som Git.
2. Byggstadiet: Detta steg sammanställer källkoden med alla dess beroenden till ett körbart format.
3. Teststeg: Detta steg innehåller automatiserade tester för att validera programvarans kvalitet. Slutmålet är att upptäcka och korrigera eventuella buggar. Du kan utföra olika typer av tester i detta skede och när koden har klarat testerna är den redo att distribueras.
4. Distribution: Detta steg automatiserar distributionsprocessen i produktionsmiljön.

Pipelinen bör övervaka varje steg för att säkerställa att det inte finns några buggar och för att förbättra hela processen för framtida utgåvor.

Vad är GitHub Actions?

GitHub Actions är en funktion som tillhandahålls av GitHub för att automatisera en programvaras distributionsarbetsflödesprocesser i CI/CD-pipelines. Det gör det möjligt att definiera och automatisera distributionsarbetsflöden direkt från ditt projekts GitHub-förråd.

GitHub Actions har flera fördelar:

1. Lätt att använda: GitHub Actions ger ett användarvänligt gränssnitt och en enkel syntax för att ställa in implementeringsarbetsflöden. Du kan enkelt och snabbt definiera dina projektarbetsflöden med hjälp av den inbyggda redigeraren på GitHub.
2. Inbyggd integration: GitHub Actions är en del av GitHub, vilket gör det enkelt att konfigurera, hantera och samarbeta i arbetsflöden tillsammans med ditt projekts kod.
3. Flexibel och anpassningsbar: GitHub Actions tillhandahåller en flexibel och anpassningsbar plattform som säkerställer att du kan bygga arbetsflöden som passar dina specifika behov. Dessutom stöder den flera programmeringsspråk. Det betyder att du kan använda den med vilken teknik du än föredrar.

Konfigurera ett Firebase-projekt och React-klienten

För att komma igång, gå över till Firebase och logga in med ditt Google-konto. Klicka på på konsolöversiktssidan Skapa projekt för att skapa ett nytt projekt och ange projektets namn.

Nästa, skapa en React-applikation och installera Firebase kommandoradsverktyg:

npm installera -g firebase-tools

Du kan hitta detta projekts kod i dess GitHub-förråd.

Logga in på Firebase från din terminal med dina Firebase-kontouppgifter.

firebase login: ci

Detta kommer att utlösa Firebase-autentiseringsflödet som kommer att uppmana dig att ange dina inloggningsuppgifter om du inte redan är inloggad. När Firebase har autentiserat dig kommer den att skriva ut en token. Kopiera denna token; du kommer att använda den för att köra Firebase-kommandon i din GitHub Actions-installation.

Slutligen, skapa en produktionsklar version av din applikation:

npm kör bygg

Det här kommandot genererar de nödvändiga filerna och tillgångarna, i en ny 'build'-mapp i rotkatalogen, som krävs för att distribuera programmet.

Initiera Firebase i din React-applikation

Kör det här kommandot för att initiera Firebase i din projektmapp:

firebase init

Bekräfta sedan att du vill initiera Firebase i ditt projekt och fortsätt och välj Hosting: Konfigurera filer för Firebase Hosting och (valfritt) konfigurera GitHub Action-distributionerfrån listan med alternativ.

Ange att du vill använda ett befintligt projekt och välj det projektnamn du ursprungligen skapade på Firebases utvecklarkonsol.

Ange sedan mappen 'bygga' som offentlig katalog, välj Nej för att skriva om alla webbadresser till /index.html alternativet, välj Nej till alternativet att ställa in automatiska byggen och distributioner från GitHub, och slutligen, Välj Ja för att skriva över filalternativet build/index.html.

Efter att ha gjort ändringarna ovan kommer CLI att skapa en firebase.json-fil i rotkatalogen. Den här filen innehåller all värdkonfiguration som GitHub Actions-arbetsflödet kommer att kräva.

Slutligen, innan du ställer in arbetsflödet för GitHub Actions, skapa ett arkiv på GitHub, och skjut projektfilerna till den.

Ställa in GitHub-åtgärder

Välj i ditt projekts arkiv på GitHub inställningar > Hemligheter och variabler > Handlingar. Skriv in på förvarets hemliga sida FIREBASE_TOKEN som namnet på hemligheten och klistra in Firebase-tokenen du kopierade i Hemligheter fält.

Konfigurera arbetsflödet för distribution

Klicka på fliken Åtgärder i ditt projekts arkiv och välj Konfigurera Nodejs arbetsflöde i Fortsatt integration sektion.

Byt sedan namn på filnamnet till firebase.yml, ta bort boilerplate-koden i editorn och lägg till koden nedan:

# Detta arbetsflöde kommer att utföra en ren installation av nodberoenden,
# cache/återställ dem, bygg källa kod och kör tester över olika
# versioner av nod
# För mer information se:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
namn: Firebase CI
på:
 skjuta på:
 grenar: [ huvud ]
 pull_request:
 grenar: [huvud]
jobb:
 bygga:
 runs-on: ubuntu-senaste
 strategi:
 matris:
 nodversion: [14.x]

 steg:
 - använder: actions/checkout@v2
 - namn: Använd Node.js ${{ matrix.node-version }}
 använder: actions/setup-node@v1
 med:
 nodversion: ${{ matrix.node-version }}
 - kör: npm installera -g npm
 - namn: npm installera, bygga och testa
 kör: |
 npm installera
 npm kör bygg
 - namn: Arkivbyggnad
 använder: actions/upload-artifact@v2
 med:
 namn: bygga
 väg: bygga

 distribuera:
 namn: Deploy
 behov: bygga
 runs-on: ubuntu-senaste
 steg:
 - använder: actions/checkout@v2
 - namn: Ladda ner Build
 använder: actions/download-artifact@v2
 med:
 namn: bygga
 väg: bygga
 - namn: Distribuera till Firebase
 använder: w9jds/firebase-action@master
 med:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ hemligheter. FIREBASE_TOKEN }}

Här är några av nyckelegenskaperna som förklaras:

1. På: Händelser som utlöser åtgärderna i det här arbetsflödet.
2. Jobb: Anger de jobb som en viss åtgärd ska köra. I det här fallet finns det två jobb: bygga och distribuera.
3. Går på: den maskin som denna åtgärd måste köras på.
4. Steg: Definierar en sekvens av steg som åtgärden ska utföra för ett visst jobb.
5. Med: Specificerar eventuella argument som krävs för att åtgärderna ska köras.
6. namn: Namn på ett särskilt steg för ett jobb.

Slutligen, commit de ändringar som gjorts i den här filen. GitHub kommer automatiskt att utlösa detta arbetsflöde, bygga och distribuera React-applikationen på Firebases värdtjänst. Du kan söka efter programmets live-URL i distributionsloggarna.

Distribuera applikationer med hjälp av GitHub Actions

GitHub Actions ger en strömlinjeformad implementeringsmetod. Det säkerställer att du kan distribuera applikationer konsekvent och tillförlitligt, oavsett vilken teknik du bygger in dem i.

Dessutom kan du enkelt anpassa distributionsarbetsflödet genom att använda de inbyggda distributionsverktygen för att möta dina specifika CI/CD-pipelinebehov.