Verlicht uw productie- en implementatieproblemen met een CI/CD-pijplijn die zorgt voor de moeizame details.

Het implementeren van webapplicaties op Firebase Hosting kan een gedoe zijn. Door GitHub-acties te gebruiken, kunt u het implementatieproces echter vereenvoudigen en stroomlijnen het is ongelooflijk eenvoudig om implementatieworkflows gedurende de gehele levensduur van software te beheren projecteren.

Met slechts een paar eenvoudige stappen kunt u een implementatieworkflow opzetten om het proces te automatiseren. Dit omvat het volgen van nieuwe wijzigingen aan filialen en het loggen van eventuele fouten. Lees verder voor meer informatie over het implementeren van een React-applicatie op de hostingservice van Firebase.

Wat is een CI/CD-pijplijn?

Een CI/CD-pijplijn (Continuous Integration/Continuous Delivery) is een reeks geautomatiseerde processen die zijn geïmplementeerd om het mogelijk te maken continu applicaties te bouwen, testen en implementeren.

Simpel gezegd, er wordt een CI/CD-pijplijn opgezet om de processen die betrokken zijn bij de levenscyclus van softwareontwikkeling te automatiseren. Dit omvat de daadwerkelijke ontwikkeling, testen, releases (bèta, alfa en definitieve release), bugfixes en zelfs functie-updates. In wezen maakt dit proces het mogelijk om eenvoudig en snel kwaliteitssoftware te verzenden.

instagram viewer

Een CI/CD-pijplijn beslaat doorgaans een aantal fasen, waaronder:

  1. Bronfase: deze fase omvat de daadwerkelijke ontwikkeling en het onderhoud van de code van de applicatie met een versiebeheertool zoals Git.
  2. Build Stage: Deze stap assembleert de broncode met al zijn afhankelijkheden in een uitvoerbaar formaat.
  3. Testfase: Deze fase bevat geautomatiseerde tests om de kwaliteit van de software te valideren. Het uiteindelijke doel is om eventuele bugs op te sporen en te corrigeren. U kunt in deze fase verschillende soorten tests uitvoeren en zodra de code de tests heeft doorstaan, is deze klaar om te worden geïmplementeerd.
  4. Implementatie: in deze fase wordt het implementatieproces in de productieomgeving geautomatiseerd.

De pijplijn moet elke fase bewaken om ervoor te zorgen dat er geen bugs zijn en om het hele proces voor toekomstige releases te verbeteren.

Wat zijn GitHub-acties?

GitHub Actions is een functie van GitHub om de implementatieworkflowprocessen van software in de CI/CD-pijplijnen te automatiseren. Het maakt het mogelijk om implementatieworkflows rechtstreeks vanuit de GitHub-repository van uw project te definiëren en te automatiseren.

GitHub Actions heeft verschillende voordelen:

  1. Gebruiksvriendelijk: GitHub Actions biedt een gebruiksvriendelijke interface en een eenvoudige syntaxis voor het opzetten van implementatieworkflows. U kunt uw projectworkflows eenvoudig en snel definiëren met behulp van de ingebouwde editor op GitHub.
  2. Native integratie: GitHub Actions maakt deel uit van GitHub, waardoor het eenvoudig is om naast de code van uw project workflows in te stellen, te beheren en eraan samen te werken.
  3. Flexibel en aanpasbaar: GitHub Actions biedt een flexibel en aanpasbaar platform dat ervoor zorgt dat u workflows kunt bouwen die aan uw specifieke behoeften voldoen. Bovendien ondersteunt het meerdere programmeertalen. Dit betekent dat u het kunt gebruiken met elke gewenste technologie.

Stel een Firebase-project en de React-client in

Ga om te beginnen naar Vuurbasis en meld u aan met uw Google-account. Klik op de overzichtspagina van de console Project aanmaken om een ​​nieuw project op te zetten en de naam van het project op te geven.

Volgende, maak een React-applicatie en installeer de Firebase-opdrachtregelprogramma's:

npm install -g firebase-tools

U kunt de code van dit project vinden in de bijbehorende GitHub-opslagplaats.

Log vanaf uw terminal in op Firebase met de inloggegevens van uw Firebase-account.

firebase-login: ci

Dit activeert de Firebase-authenticatiestroom die u zal vragen uw inloggegevens in te voeren als u nog niet bent ingelogd. Zodra Firebase u heeft geverifieerd, wordt er een token afgedrukt. Kopieer dit token; je zult het gebruiken om Firebase-opdrachten uit te voeren in je GitHub Actions-configuratie.

Maak ten slotte een productieklare versie van uw applicatie:

npm run bouwen

Deze opdracht genereert de benodigde bestanden en middelen, in een nieuwe 'build'-map in de hoofdmap, die nodig zijn om de applicatie te implementeren.

Initialiseer Firebase in uw React-toepassing

Voer deze opdracht uit om Firebase in uw projectmap te initialiseren:

vuurbasis init

Bevestig vervolgens dat u Firebase in uw project wilt initialiseren en ga door en selecteer Hosting: Configureer bestanden voor Firebase Hosting en (optioneel) stel GitHub Action-implementaties inuit de lijst met opties.

Geef aan dat u een bestaand project wilt gebruiken en selecteer de projectnaam die u aanvankelijk in de ontwikkelaarsconsole van Firebase hebt gemaakt.

Geef vervolgens de map 'build' op als openbaar map, selecteer Nee om alle URL's naar de optie /index.html te herschrijven, selecteert u Nee naar de mogelijkheid om automatische builds en implementaties in te stellen vanuit GitHub, en tot slot Select Ja om de bestandsoptie build/index.html te overschrijven.

Nadat de bovenstaande wijzigingen zijn aangebracht, maakt de CLI een bestand firebase.json in de hoofdmap. Dit bestand bevat alle hostingconfiguratie die nodig is voor de GitHub Actions-workflow.

Tot slot, voordat u de GitHub Actions-workflow instelt, maak een repository op GitHub, en push de projectbestanden ernaartoe.

GitHub-acties instellen

Selecteer in de repository van uw project op GitHub Instellingen > Geheimen en variabelen > Acties. Voer in de geheime pagina van de repository in FIREBASE_TOKEN als de naam van het geheim en plak het Firebase-token dat u in het Geheimen velden.

Stel de implementatieworkflow in

Klik op het tabblad Acties in de repository van uw project en selecteer Nodejs configureren werkstroom in de Continue integratie sectie.

Hernoem vervolgens de bestandsnaam naar firebase.yml, verwijder de boilerplate-code in de editor en voeg de onderstaande code toe:

# Deze workflow voert een schone installatie uit van knooppuntafhankelijkheden,
# cache / herstel ze, bouw de bron code en voer tests uit over verschillende
# versies van knooppunt
# Voor meer informatie zie:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
naam: Firebase-CI


op:
 duw:
 takken: [ hoofd ]
 pull_request:
 takken: [ hoofd]


banen:
 bouwen:


 run-on: ubuntu-nieuwste


 strategie:
 Matrix:
 node-versie: [14.x]

 stappen:
 - gebruik: acties/afrekenen@v2
 - naam: Gebruik Node.js ${{ matrix.node-versie }}
 gebruikt: acties/setup-node@v1
 met:
 knooppuntversie: ${{ matrix.node-versie }}
 - uitvoeren: npm install -g npm
 - naam: npm installeren, bouwen en testen
 lopen: |
 npm installeren
 npm run bouwen
 - naam: Archief Build
 gebruikt: acties/upload-artifact@v2
 met:
 naam: bouwen
 pad: bouwen

 aanwenden:
 naam: implementeren
 behoeften: bouwen
 run-on: ubuntu-nieuwste
 stappen:
 - gebruik: acties/afrekenen@v2
 - naam: Build downloaden
 gebruikt: acties/download-artifact@v2
 met:
 naam: bouwen
 pad: bouwen
 - naam: implementeren in Firebase
 gebruikt: w9jds/firebase-action@master
 met:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ geheimen. FIREBASE_TOKEN }}

Hier zijn enkele van de belangrijkste eigenschappen uitgelegd:

  1. Op: Gebeurtenissen die de acties in deze workflow activeren.
  2. Banen: geeft de taken op die een bepaalde actie moet uitvoeren. In dit geval zijn er twee taken: bouwen en implementeren.
  3. Draait op: de machine waarop deze actie moet draaien.
  4. Stappen: definieert een reeks stappen die de actie moet uitvoeren voor een bepaalde taak.
  5. Met:Specificeert alle argumenten die nodig zijn voor de acties die moeten worden uitgevoerd.
  6. Naam: Naam van een bepaalde stap voor een taak.

Leg ten slotte de wijzigingen vast die in dit bestand zijn aangebracht. GitHub activeert deze workflow automatisch en bouwt en implementeert de React-applicatie op de Hosting-service van Firebase. U kunt de live-URL van de toepassing controleren in de implementatielogboeken.

Toepassingen implementeren met behulp van GitHub-acties

GitHub Actions biedt een gestroomlijnde implementatiebenadering. Het zorgt ervoor dat u applicaties consistent en betrouwbaar kunt implementeren, ongeacht de technologie waarin u ze inbouwt.

Bovendien kunt u de implementatieworkflow eenvoudig aanpassen door de ingebouwde implementatietools te gebruiken om aan uw specifieke CI/CD-pijplijnbehoeften te voldoen.