Usnadněte si problémy s výrobou a nasazením pomocí potrubí CI/CD, které se postará o pracné detaily.

Nasazení webových aplikací na Firebase Hosting může být problém. Pomocí akcí GitHubu však můžete zjednodušit a zefektivnit proces nasazení a vytvořit je neuvěřitelně snadné spravovat pracovní postupy nasazení po celou dobu životnosti softwaru projekt.

Pomocí několika jednoduchých kroků můžete nastavit pracovní postup nasazení pro automatizaci procesu. To zahrnuje sledování nových změn ve větvích a protokolování případných chyb. Čtěte dále a zjistěte, jak nasadit aplikaci React na hostingové službě Firebase.

Co je to CI/CD potrubí?

Potrubí CI/CD (Continuous Integration/Continuous Delivery) je sada automatizovaných procesů implementovaných tak, aby bylo možné neustále vytvářet, testovat a nasazovat aplikace.

Jednoduše řečeno, CI/CD potrubí je nastaveno tak, aby automatizovalo procesy zapojené do životního cyklu vývoje softwaru. To bude zahrnovat skutečný vývoj, testování, verze (beta, alfa a finální verze), opravy chyb a dokonce i aktualizace funkcí. Tento proces v podstatě umožňuje snadno a rychle dodávat kvalitní software.

instagram viewer

Potrubí CI/CD obvykle pokrývá několik fází, mezi které patří:

  1. Fáze zdroje: Tato fáze pokrývá skutečný vývoj a údržbu kódu aplikace pomocí nástroje pro správu verzí, jako je Git.
  2. Fáze sestavení: Tento krok sestaví zdrojový kód se všemi jeho závislostmi do spustitelného formátu.
  3. Testovací fáze: Tato fáze zahrnuje automatizované testy pro ověření kvality softwaru. Konečným cílem je odhalit a opravit případné chyby. V této fázi můžete provádět různé typy testů a jakmile kód projde testy, je připraven k nasazení.
  4. Nasazení: Tato fáze automatizuje proces nasazení v produkčním prostředí.

Potrubí by mělo monitorovat každou fázi, aby se zajistilo, že se nevyskytují žádné chyby, a aby se celý proces zlepšil pro budoucí vydání.

Co jsou akce GitHubu?

GitHub Actions je funkce poskytovaná GitHubem k automatizaci pracovních procesů nasazení softwaru v kanálech CI/CD. Umožňuje definovat a automatizovat pracovní postupy nasazení přímo z úložiště GitHub vašeho projektu.

Akce GitHub má několik výhod:

  1. Snadné použití: GitHub Actions poskytuje uživatelsky přívětivé rozhraní a jednoduchou syntaxi pro nastavení pracovních postupů nasazení. Pomocí vestavěného editoru na GitHubu můžete snadno a rychle definovat pracovní postupy projektu.
  2. Nativní integrace: Akce GitHub je součástí GitHubu, což usnadňuje nastavení, správu a spolupráci na pracovních postupech spolu s kódem vašeho projektu.
  3. Flexibilní a přizpůsobitelné: GitHub Actions poskytuje flexibilní a přizpůsobitelnou platformu, která zajišťuje, že můžete vytvářet pracovní postupy, které vyhovují vašim konkrétním potřebám. Kromě toho podporuje více programovacích jazyků. To znamená, že jej můžete použít s jakoukoli technologií, kterou preferujete.

Nastavte projekt Firebase a klienta React

Chcete-li začít, přejděte na Firebase a přihlaste se pomocí svého účtu Google. Na stránce přehledu konzoly klikněte na Vytvořit projekt založit nový projekt a zadat název projektu.

Další, vytvořit aplikaci React a nainstalujte nástroje příkazového řádku Firebase:

npm install -g firebase-tools

Kód tohoto projektu najdete v něm úložiště GitHub.

Přihlaste se do Firebase ze svého terminálu pomocí přihlašovacích údajů k účtu Firebase.

přihlášení k firebase: ci

Tím se spustí ověřovací proces Firebase, který vás vyzve k zadání přihlašovacích údajů, pokud ještě nejste přihlášeni. Jakmile vás Firebase ověří, vytiskne token. Zkopírujte tento token; budete jej používat ke spouštění příkazů Firebase v nastavení akcí GitHub.

Nakonec vytvořte verzi vaší aplikace připravenou k produkci:

npm spustit sestavení

Tento příkaz vygeneruje potřebné soubory a prostředky v nové složce 'build' v kořenovém adresáři, potřebné k nasazení aplikace.

Inicializujte Firebase ve své aplikaci React

Spusťte tento příkaz pro inicializaci Firebase ve složce projektu:

Firebase init

Dále potvrďte, že chcete inicializovat Firebase ve svém projektu, a pokračujte a vyberte Hosting: Nakonfigurujte soubory pro Firebase Hosting a (volitelně) nastavte nasazení GitHub Actionze seznamu možností.

Zadejte, že chcete použít existující projekt, a vyberte název projektu, který jste původně vytvořili ve vývojářské konzoli Firebase.

Dále zadejte složku 'build' jako veřejnost adresář, vyberte Ne chcete-li přepsat všechny adresy URL na možnost /index.html, vyberte Ne k možnosti nastavení automatického sestavení a nasazení z GitHubu a nakonec Select Ano k přepsání volby souboru build/index.html.

Po provedení výše uvedených změn vytvoří CLI v kořenovém adresáři soubor firebase.json. Tento soubor obsahuje veškerou konfiguraci hostování, kterou bude pracovní postup akcí GitHub vyžadovat.

Nakonec před nastavením pracovního postupu akcí GitHub vytvořit úložiště na GitHubua přesuňte do něj soubory projektu.

Nastavení akcí GitHubu

V úložišti vašeho projektu na GitHubu vyberte Nastavení > Tajemství a proměnné > Akce. Na tajné stránce úložiště zadejte FIREBASE_TOKEN jako název tajemství a vložte token Firebase, který jste do něj zkopírovali Tajemství pole.

Nastavte pracovní postup nasazení

Klikněte na kartu Akce v úložišti vašeho projektu a vyberte Nakonfigurujte Nodejs pracovní postup v Průběžná integrace sekce.

Dále přejmenujte název souboru na firebase.yml, smažte standardní kód v editoru a přidejte kód níže:

# Tento pracovní postup provede čistou instalaci závislostí uzlů,
# vyrovnávací paměť/obnovení, sestavení zdroj kódovat a spouštět testy napříč různými
# verze uzlu
# Další informace viz:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
název: Firebase CI


na:
 TAM:
 pobočky: [ hlavní ]
 pull_request:
 pobočky: [hlavní]


pracovní místa:
 stavět:


 run-on: ubuntu-latest


 strategie:
 matice:
 verze uzlu: [14.x]

 kroky:
 - používá: actions/checkout@v2
 - name: Use Node.js ${{ matrix.node-version }}
 používá: actions/setup-node@v1
 s:
 node-version: ${{ matrix.node-version }}
 - spustit: npm install -g npm
 - název: npm install, build and test
 běh: |
 instalace npm
 npm spustit sestavení
 - název: Archive Build
 použití: actions/upload-artifact@v2
 s:
 jméno: stavět
 cesta: stavět

 nasadit:
 název: Nasadit
 potřeby: stavět
 run-on: ubuntu-latest
 kroky:
 - používá: actions/checkout@v2
 - název: Stáhnout sestavení
 použití: actions/download-artifact@v2
 s:
 jméno: stavět
 cesta: stavět
 - název: Nasazení na Firebase
 používá: w9jds/firebase-action@master
 s:
 args: deploy --pouze hosting
 env:
 FIREBASE_TOKEN: ${{ tajemství. FIREBASE_TOKEN }}

Zde jsou vysvětleny některé klíčové vlastnosti:

  1. Na: Události, které spouštějí akce v tomto pracovním postupu.
  2. Pracovní místa: Určuje úlohy, které by měla konkrétní akce spustit. V tomto případě existují dvě úlohy: sestavení a nasazení.
  3. Náběhy: stroj, na kterém má být tato akce spuštěna.
  4. Kroky: Definuje sekvenci kroků, které má akce provést pro konkrétní úlohu.
  5. S:Uvádí všechny argumenty požadované akcemi ke spuštění.
  6. název: Název konkrétního kroku úlohy.

Nakonec potvrďte změny provedené v tomto souboru. GitHub automaticky spustí tento pracovní postup, vytvoří a nasadí aplikaci React ve službě Firebase Hosting. Živou adresu URL aplikace můžete zkontrolovat v protokolech nasazení.

Nasazování aplikací pomocí akcí GitHubu

Akce GitHub poskytuje zjednodušený přístup k nasazení. Zajišťuje, že můžete aplikace nasazovat konzistentně a spolehlivě, bez ohledu na technologii, do které je zabudujete.

Kromě toho můžete snadno přizpůsobit pracovní postup nasazení pomocí vestavěných nástrojů pro nasazení tak, aby vyhovoval vašim specifickým potřebám kanálu CI/CD.