Könnyítse meg a gyártási és telepítési gondokat a CI/CD folyamattal, amely gondoskodik a fáradságos részletekről.

A webalkalmazások Firebase Hosting szolgáltatásba történő telepítése gondot okozhat. A GitHub-műveletek használatával azonban leegyszerűsítheti és racionalizálhatja a telepítési folyamatot, és elkészítheti hihetetlenül egyszerűen kezelhető a telepítési munkafolyamatok a szoftver teljes élettartama alatt projekt.

Néhány egyszerű lépéssel beállíthat egy telepítési munkafolyamatot a folyamat automatizálásához. Ez magában foglalja az ágak új változásainak nyomon követését és az esetleges hibák naplózását. Olvasson tovább, ha megtudhatja, hogyan telepíthet React alkalmazást a Firebase tárhelyszolgáltatására.

Mi az a CI/CD Pipeline?

A CI/CD (Continuous Integration/Continuous Delivery) folyamat olyan automatizált folyamatok összessége, amelyek lehetővé teszik az alkalmazások folyamatos építését, tesztelését és üzembe helyezését.

Egyszerűen fogalmazva, egy CI/CD folyamat van beállítva a szoftverfejlesztési életciklusban résztvevő folyamatok automatizálására. Ez magában foglalja a tényleges fejlesztést, tesztelést, kiadásokat (béta, alfa és végső kiadás), a hibajavításokat és még a funkciók frissítéseit is. Ez a folyamat lényegében lehetővé teszi minőségi szoftverek egyszerű és gyors szállítását.

A CI/CD folyamat általában néhány szakaszból áll, ezek a következők:

  1. Forrás szakasz: Ez a fázis az alkalmazás kódjának tényleges fejlesztését és karbantartását fedi le egy verzióvezérlő eszközzel, például a Git-tel.
  2. Build Stage: Ez a lépés a forráskódot és annak összes függőségét futtatható formátumba állítja össze.
  3. Tesztszakasz: Ez a szakasz automatizált teszteket tartalmaz a szoftver minőségének ellenőrzésére. A végső cél az esetleges hibák észlelése és kijavítása. Ebben a szakaszban különféle típusú teszteket hajthat végre, és miután a kód átment a teszteken, készen áll a telepítésre.
  4. Telepítés: Ez a szakasz automatizálja a telepítési folyamatot az éles környezetben.

A folyamat minden egyes szakaszát figyelemmel kell kísérnie annak biztosítása érdekében, hogy ne legyenek hibák, és javítsa a teljes folyamatot a jövőbeli kiadásokhoz.

Mi az a GitHub Actions?

A GitHub Actions a GitHub által biztosított szolgáltatás, amely automatizálja a szoftverek telepítési munkafolyamatait a CI/CD folyamatokban. Lehetővé teszi a telepítési munkafolyamatok meghatározását és automatizálását közvetlenül a projekt GitHub-tárházából.

A GitHub Actions számos előnnyel rendelkezik:

  1. Könnyen használható: A GitHub Actions felhasználóbarát felületet és egyszerű szintaxist biztosít a telepítési munkafolyamatok beállításához. A GitHub beépített szerkesztőjének segítségével egyszerűen és gyorsan meghatározhatja a projekt munkafolyamatait.
  2. Natív integráció: A GitHub Actions a GitHub része, amely megkönnyíti a munkafolyamatok beállítását, kezelését és együttműködését a projekt kódja mellett.
  3. Rugalmas és testreszabható: A GitHub Actions rugalmas és testreszabható platformot biztosít, amely biztosítja, hogy az Ön egyedi igényeinek megfelelő munkafolyamatokat építsen fel. Ezenkívül több programozási nyelvet is támogat. Ez azt jelenti, hogy bármilyen technológiával használhatja.

Állítsa be a Firebase-projektet és a React-ügyfelet

A kezdéshez menjen a következőhöz Firebase és jelentkezzen be Google-fiókjával. A konzol áttekintő oldalán kattintson a gombra Projekt létrehozása új projekt létrehozásához és a projekt nevének megadásához.

Következő, hozzon létre egy React alkalmazást és telepítse a Firebase parancssori eszközeit:

npm install -g firebase-tools

A projekt kódja megtalálható benne GitHub adattár.

Jelentkezzen be a Firebase-be termináljáról Firebase-fiókja hitelesítő adataival.

firebase bejelentkezés: ci

Ez elindítja a Firebase hitelesítési folyamatot, amely felkéri a bejelentkezési adatok megadására, ha még nem jelentkezett be. Miután a Firebase hitelesítette Önt, kinyomtat egy tokent. Másolja ezt a tokent; a Firebase-parancsok futtatására fogja használni a GitHub Actions beállításaiban.

Végül hozza létre az alkalmazás gyártásra kész verzióját:

npm run build

Ez a parancs létrehozza a szükséges fájlokat és eszközöket a gyökérkönyvtár egy új „build” mappájában, amelyek az alkalmazás üzembe helyezéséhez szükségesek.

Inicializálja a Firebase-t a React alkalmazásban

Futtassa ezt a parancsot a Firebase inicializálásához a projekt mappájában:

firebase init

Ezután erősítse meg, hogy szeretné inicializálni a Firebase-t a projektben, majd válassza ki Tárhely: konfigurálja a fájlokat a Firebase Hostinghoz, és (opcionálisan) állítsa be a GitHub Action-telepítéseketaz opciók listájából.

Adja meg, hogy meglévő projektet szeretne használni, és válassza ki a Firebase fejlesztői konzolján eredetileg létrehozott projektnevet.

Ezután adja meg a „build” mappát a nyilvános könyvtárat, válassza ki Nem az összes URL átírásához az /index.html opcióba, válassza a lehetőséget Nem az automatikus felépítések és telepítések beállítására a GitHubból, és végül a Select Igen a build/index.html fájl opció felülírásához.

A fenti módosítások elvégzése után a parancssori felület létrehoz egy firebase.json fájlt a gyökérkönyvtárban. Ez a fájl tartalmazza az összes tárhely-konfigurációt, amelyre a GitHub Actions munkafolyamathoz szüksége lesz.

Végül a GitHub Actions munkafolyamat beállítása előtt hozzon létre egy adattárat a GitHubon, és tolja rá a projektfájlokat.

A GitHub-műveletek beállítása

A projekt GitHubon található tárolójában válassza ki a lehetőséget Beállítások > Titkok és változók > Akciók. Az adattár titkos oldalán írja be FIREBASE_TOKEN a titok neveként, és illessze be a Firebase tokenbe, amelyet másolt a Titkok mezőket.

Állítsa be a telepítési munkafolyamatot

Kattintson a Műveletek fülre a projekt tárolójában, és válassza ki Konfigurálja a Nodejs-t munkafolyamat a Folyamatos integráció szakasz.

Ezután nevezze át a fájlnevet erre firebase.yml, törölje az alapkódot a szerkesztőben, és adja hozzá az alábbi kódot:

# Ez a munkafolyamat a csomópont-függőségek tiszta telepítését hajtja végre,
# gyorsítótárazd/visszaállítsd őket, építsd fel a forrás kódot, és futtasson különböző teszteket
# node verziói
# További információért lásd:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
név: Firebase CI


tovább:
 nyom:
 fiókok: [ fő ]
 pull_request:
 fiókok: [ fő]


állások:
 épít:


 futó: ubuntu-latest


 stratégia:
 mátrix:
 csomópont-verzió: [14.x]

 lépések:
 - használja: action/checkout@v2
 - név: Node.js ${{ matrix.node-version }} használata
 használja: action/setup-node@v1
 val vel:
 csomópont-verzió: ${{ matrix.node-version }}
 - futtatás: npm install -g npm
 - név: npm telepítés, összeállítás és tesztelés
 futás: |
 npm telepítés
 npm run build
 - név: Archívum felépítése
 használja: action/upload-artifact@v2
 val vel:
 név: épít
 út: épít

 telepíteni:
 név: Telepítés
 igények: építeni
 futó: ubuntu-latest
 lépések:
 - használja: action/checkout@v2
 - név: Letöltés Build
 használja: action/download-artifact@v2
 val vel:
 név: épít
 út: épít
 - név: Telepítés a Firebase-be
 használja: w9jds/firebase-action@master
 val vel:
 args: deploy --only hosting
 env:
 FIREBASE_TOKEN: ${{ titok. FIREBASE_TOKEN }}

Íme néhány kulcsfontosságú tulajdonság magyarázata:

  1. Tovább: Események, amelyek kiváltják a műveleteket ebben a munkafolyamatban.
  2. Állások: Meghatározza azokat a jobokat, amelyeket egy adott műveletnek futtatnia kell. Ebben az esetben két feladat van: összeállítás és telepítés.
  3. Ráfutás: a gép, amelyen ennek a műveletnek futnia kell.
  4. Lépések: Meghatározza a műveletek lépéseinek sorozatát egy adott feladatnál.
  5. Val vel:Meghatározza a műveletek futtatásához szükséges argumentumokat.
  6. Név: Egy munka adott lépésének neve.

Végül véglegesítse a fájlban végzett változtatásokat. A GitHub automatikusan elindítja ezt a munkafolyamatot, létrehozva és telepítve a React alkalmazást a Firebase hosting szolgáltatásán. Az alkalmazás élő URL-címét a telepítési naplókban ellenőrizheti.

Alkalmazások üzembe helyezése GitHub-műveletekkel

A GitHub Actions egyszerűsített telepítési megközelítést kínál. Biztosítja, hogy az alkalmazásokat következetesen és megbízhatóan telepítse, függetlenül attól, hogy milyen technológiába építi be őket.

Ezenkívül a beépített telepítési eszközök segítségével könnyedén testreszabhatja az üzembe helyezési munkafolyamatot, hogy megfeleljen az egyedi CI/CD-folyamat igényeinek.