Semplifica i tuoi problemi di produzione e distribuzione con una pipeline CI/CD che si prende cura dei laboriosi dettagli.

La distribuzione di applicazioni Web su Firebase Hosting può essere una seccatura. Tuttavia, utilizzando le azioni GitHub è possibile semplificare e snellire il processo di distribuzione e make è incredibilmente facile gestire i flussi di lavoro di implementazione per l'intera durata di un software progetto.

Con pochi semplici passaggi, puoi impostare un flusso di lavoro di distribuzione per automatizzare il processo. Ciò include il monitoraggio delle nuove modifiche ai rami e la registrazione di eventuali errori. Continua a leggere per scoprire come distribuire un'applicazione React sul servizio di hosting di Firebase.

Che cos'è una pipeline CI/CD?

Una pipeline CI/CD (Continuous Integration/Continuous Delivery) è un insieme di processi automatizzati implementati per consentire di creare, testare e distribuire continuamente le applicazioni.

In poche parole, viene impostata una pipeline CI/CD per automatizzare i processi coinvolti nel ciclo di vita dello sviluppo del software. Ciò includerà lo sviluppo effettivo, i test, le versioni (beta, alpha e versione finale), le correzioni di bug e persino gli aggiornamenti delle funzionalità. In sostanza, questo processo consente di spedire facilmente e rapidamente software di qualità.

instagram viewer

Una pipeline CI/CD in genere copre un paio di fasi, tra cui:

  1. Fase di origine: questa fase copre lo sviluppo e la manutenzione effettivi del codice dell'applicazione con uno strumento di controllo della versione come Git.
  2. Fase di costruzione: questo passaggio assembla il codice sorgente con tutte le sue dipendenze in un formato eseguibile.
  3. Fase di test: questa fase incorpora test automatizzati per convalidare la qualità del software. L'obiettivo finale è rilevare e correggere eventuali bug. Puoi eseguire diversi tipi di test in questa fase e una volta che il codice ha superato i test, è pronto per il deployment.
  4. Distribuzione: questa fase automatizza il processo di distribuzione nell'ambiente di produzione.

La pipeline dovrebbe monitorare ogni fase per garantire che non vi siano bug e per migliorare l'intero processo per le versioni future.

Che cosa sono le azioni GitHub?

GitHub Actions è una funzionalità fornita da GitHub per automatizzare i processi del flusso di lavoro di distribuzione di un software nelle pipeline CI/CD. Consente di definire e automatizzare i flussi di lavoro di distribuzione direttamente dal repository GitHub del progetto.

GitHub Actions ha diversi vantaggi:

  1. Facile da usare: GitHub Actions offre un'interfaccia intuitiva e una sintassi semplice per l'impostazione dei flussi di lavoro di distribuzione. Puoi definire facilmente e rapidamente i flussi di lavoro del tuo progetto utilizzando l'editor integrato su GitHub.
  2. Integrazione nativa: GitHub Actions fa parte di GitHub, semplificando la configurazione, la gestione e la collaborazione sui flussi di lavoro insieme al codice del progetto.
  3. Flessibile e personalizzabile: GitHub Actions fornisce una piattaforma flessibile e personalizzabile che ti consente di creare flussi di lavoro che si adattano alle tue esigenze specifiche. Inoltre, supporta più linguaggi di programmazione. Significa che puoi usarlo con qualsiasi tecnologia tu preferisca.

Imposta un progetto Firebase e il client React

Per iniziare, vai su Base di fuoco e accedi con il tuo account Google. Nella pagina della panoramica della console, fare clic su Crea progetto per impostare un nuovo progetto e fornire il nome del progetto.

Prossimo, creare un'applicazione React e installa gli strumenti della riga di comando di Firebase:

npm install -g firebase-tools

Puoi trovare il codice di questo progetto nel suo file Deposito GitHub.

Accedi a Firebase dal tuo terminale utilizzando le credenziali del tuo account Firebase.

accesso firebase: ci

Ciò attiverà il flusso di autenticazione Firebase che ti chiederà di inserire i tuoi dati di accesso se non hai già effettuato l'accesso. Una volta che Firebase ti ha autenticato, stamperà un token. Copia questo token; lo utilizzerai per eseguire i comandi Firebase nella configurazione delle azioni GitHub.

Infine, crea una versione pronta per la produzione della tua applicazione:

npm esegue la compilazione

Questo comando genera i file e le risorse necessari, all'interno di una nuova cartella "build" nella directory principale, necessari per distribuire l'applicazione.

Inizializza Firebase nella tua applicazione React

Esegui questo comando per inizializzare Firebase nella cartella del tuo progetto:

inizializzazione firebase

Successivamente, conferma che desideri inizializzare Firebase nel tuo progetto e vai avanti e seleziona Hosting: configura i file per Firebase Hosting e (facoltativamente) imposta le distribuzioni di GitHub Actiondall'elenco delle opzioni.

Specifica che desideri utilizzare un progetto esistente e seleziona il nome del progetto creato inizialmente nella console per sviluppatori di Firebase.

Successivamente, specifica la cartella 'build' come file pubblico rubrica, selezionare NO per riscrivere tutti gli URL nell'opzione /index.html, selezionare NO all'opzione di configurare build e distribuzioni automatiche da GitHub e, infine, Select SÌ per sovrascrivere l'opzione del file build/index.html.

Dopo aver apportato le modifiche precedenti, la CLI creerà un file firebase.json nella directory principale. Questo file contiene tutta la configurazione di hosting richiesta dal flusso di lavoro GitHub Actions.

Infine, prima di configurare il flusso di lavoro GitHub Actions, creare un repository su GitHube inviarvi i file di progetto.

Impostazione delle azioni GitHub

Nel repository del tuo progetto su GitHub, seleziona Impostazioni > Segreti e variabili > Azioni. Nella pagina segreta del repository, inserisci FIREBASE_TOKEN come nome del segreto e incolla il token Firebase che hai copiato nel file Segreti campi.

Configurare il flusso di lavoro di distribuzione

Fare clic sulla scheda Azioni nel repository del progetto e selezionare Configura Nodejs flusso di lavoro nel Integrazione continua sezione.

Successivamente, rinomina il nome del file in firebase.yml, elimina il codice boilerplate nell'editor e aggiungi il codice seguente:

# Questo flusso di lavoro eseguirà un'installazione pulita delle dipendenze dei nodi,
# memorizzali nella cache/ripristinali, crea il file fonte codice ed eseguire test su diversi
# versioni di node
# Per ulteriori informazioni, vedere:
# https://docs.github.com/en/actions/automating-builds-and-tests
# /building-and-testing-nodejs
nome: Firebase CI


SU:
 spingere:
 rami: [principale]
 pull_request:
 rami: [principale]


lavori:
 costruire:


 funziona: ubuntu-più recente


 strategia:
 matrice:
 versione-nodo: [14.x]

 passi:
 - utilizza: azioni/checkout@v2
 - nome: Usa Node.js ${{ matrix.node-versione }}
 utilizza: azioni/setup-node@v1
 con:
 versione-nodo: ${{ matrix.versione-nodo }}
 - eseguire: npm install -g npm
 - nome: npm install, build e test
 correre: |
 installazione npm
 npm esegue la compilazione
 - nome: Build archivio
 utilizza: azioni/upload-artifact@v2
 con:
 nome: costruire
 percorso: costruire

 distribuire:
 nome: Distribuisci
 esigenze: costruire
 funziona: ubuntu-più recente
 passi:
 - utilizza: azioni/checkout@v2
 - nome: Scarica Build
 utilizza: azioni/download-artifact@v2
 con:
 nome: costruire
 percorso: costruire
 - nome: Distribuisci in Firebase
 usa: w9jds/firebase-action@master
 con:
 args: deploy --solo hosting
 env:
 FIREBASE_TOKEN: ${{ segreti. FIREBASE_TOKEN}}

Ecco alcune delle proprietà chiave spiegate:

  1. SU: eventi che attivano le azioni in questo flusso di lavoro.
  2. Lavori: specifica i lavori che una determinata azione deve eseguire. In questo caso, ci sono due lavori: build e deploy.
  3. Gira su: la macchina su cui deve essere eseguita questa azione.
  4. Passi: definisce una sequenza di passaggi per l'azione da eseguire per un particolare lavoro.
  5. Con:Specifica tutti gli argomenti richiesti dalle azioni da eseguire.
  6. Nome: nome di una particolare fase per un lavoro.

Infine, conferma le modifiche apportate a questo file. GitHub attiverà automaticamente questo flusso di lavoro, creando e distribuendo l'applicazione React sul servizio di hosting di Firebase. È possibile verificare l'URL attivo dell'applicazione nei registri di distribuzione.

Distribuzione di applicazioni tramite azioni GitHub

GitHub Actions fornisce un approccio di distribuzione semplificato. Ti assicura di poter distribuire le applicazioni in modo coerente e affidabile, indipendentemente dalla tecnologia in cui le costruisci.

Inoltre, puoi personalizzare facilmente il flusso di lavoro di distribuzione utilizzando gli strumenti di distribuzione integrati per soddisfare le tue specifiche esigenze di pipeline CI/CD.