Configura questo flusso di lavoro per distribuire automaticamente la tua app alla produzione e semplificare il processo di rilascio.

Netlify è una piattaforma di web hosting e una suite completa di strumenti per la distribuzione e la gestione di applicazioni web nel cloud.

Ma le sue funzionalità vanno ben oltre: le sue funzioni serverless ti consentono di eseguire codice lato server senza un server dedicato.

Scopri come configurare una pipeline CI/CD per distribuire un'API REST Node.js su Netlify utilizzando GitHub Actions.

Pipeline CI/CD con azioni GitHub: una panoramica

Le pipeline di Continuous Integration e Continuous Delivery (CI/CD) sono una serie di processi automatizzati sequenziali che le applicazioni software subiscono prima di essere inviate alla produzione.

In genere, le pipeline CI/CD sono costituite da diverse fasi chiave, tra cui le fasi di origine, compilazione, test e distribuzione.

Sebbene sia possibile eseguire queste fasi manualmente, automatizzarle offre diversi vantaggi, tra cui:

instagram viewer
  • Ridurre al minimo il rischio di errori umani.
  • Velocizzare il processo di rilascio.
  • Garantire un flusso di lavoro coerente per la spedizione di software di qualità alla produzione.

Che cosa sono le azioni GitHub?

GitHub Actions è uno strumento integrato in GitHub che fornisce un'ampia gamma di azioni predefinite che puoi utilizzare per definire i flussi di lavoro come codice direttamente nel repository del progetto per automatizzare CI/CD oleodotti.

Puoi anche creare azioni personalizzate per soddisfare le esigenze specifiche del tuo progetto, consentendoti di creare e distribuire applicazioni in produzione senza problemi. Uno dei vantaggi di GitHub Actions è la sua perfetta integrazione con altre funzionalità di GitHub, come le richieste pull e il monitoraggio dei problemi.

Ciò consente di attivare flussi di lavoro basati su eventi specifici, come un nuovo commit che assicura che le pipeline CI/CD vengano attivate automaticamente quando necessario.

Imposta il progetto Node.js

Per iniziare, devi creare un server web espresso. Per fare ciò, crea una nuova cartella localmente e cambia la directory sul tuo terminale.

mkdir express-netlify
cd express-netlify

Quindi, crea un file pacchetto.json file utilizzando npm, il Node Package Manager.

npm init -y

Infine, installa le dipendenze richieste nel progetto.

npm install express netlify-lambda serverless-http

IL netlify-lambda Il pacchetto funge da server di sviluppo locale che facilita il test delle funzioni senza server. serverless-http aiuta ad adattare le app Express.js a un formato compatibile con i gestori di funzioni serverless.

Netlify non fornisce supporto nativo per l'hosting e l'esecuzione di applicazioni back-end complete. Offre invece funzioni serverless come soluzione alternativa per la gestione delle funzionalità di back-end.

Queste funzioni gestiscono la logica lato server, gestiscono le richieste API HTTP e forniscono contenuto dinamico, fornendo funzionalità di tipo back-end all'interno del paradigma serverless.

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

Creare il server web espresso

Crea tre cartelle: dist, funzioni, E src nella directory principale della cartella del progetto.

Prima di configurare il server Express, creare uno spazio vuoto indice.html file nel dist cartella. Questo file funge da segnaposto che consente a Netlify di distribuire correttamente l'applicazione Express e servire le rotte API.

Ora crea un file src/app.js file e aggiungere il seguente codice:

cost espresso = richiedere("esprimere");
cost senza server = richiedere("serverless-http");
cost app = espresso();
cost router = espresso. Router();


router.get("/", (req, res) => {
 res.send("Ciao mondo!")
});


app.use(`/.netlify/funzioni/app`, router);
modulo.exports = app;
modulo.exports.handler = senza server (app);

Questo codice definisce un server Express con un singolo percorso per l'URL principale che gestisce le richieste GET. IL app.use La funzione registra il middleware del percorso con l'applicazione Express, assicurando che qualsiasi richiesta HTTP effettuata al percorso /.netlify/functions/app saranno gestiti correttamente dal router, anche in un ambiente di produzione.

Di conseguenza, se aggiungi un nuovo endpoint come /api/auth, sarà accessibile su /.netlify/functions/app/api/auth. Infine, il codice esporta l'applicazione Express e la funzione di gestione senza server.

Ciò consente il test locale del server e garantisce la possibilità di distribuirlo come funzione serverless su Netlify.

Definire il file Netlify.toml

Nella directory principale, crea un nuovo file Netlify.toml file e aggiungere il seguente codice.

[costruire]
 base = "/"
 comando = "npm esegui build"
 pubblica = "/dist/"
 funzioni = "funzioni/"
[build.ambiente]
 VERSIONE_NODO = "16"
[funzioni]
 external_node_modules = ["esprimere"]
 node_bundler = "esbuild"
[[reindirizza]]
 forza = vero
 da = "/api/*"
 stato = 200
 to = "/.netlify/functions/app/:splat"
[[reindirizza]]
 da = "/*"
 stato = 200
 a = "/index.html"

Il codice specifica le impostazioni di configurazione della build e della distribuzione per l'app Express su Netlify. Include impostazioni come la directory di base, il comando build, la directory di pubblicazione e la directory delle funzioni.

Inoltre, definisce le impostazioni di reindirizzamento che dovrebbero gestire il routing delle richieste API HTTP, assicurando che siano indirizzate correttamente alle funzioni serverless di Netlify.

Aggiorna il file Package.json

Apri il pacchetto.json file e aggiungere questi comandi all'oggetto scripts.

"copioni": {
"inizio": "netlify-lambda serve src",
"costruire": "netlify-lambda build src"
 },

Eseguire i comandi seguenti per compilare e avviare l'applicazione in locale.

npm esegue la compilazione
avvio della corsa npm

Il server verrà avviato sulla porta 9000. Puoi andare avanti e testare l'API utilizzando Postman inviando richieste a http://localhost: 9000/.netlify/funzioni/app

Infine, prima di configurare il flusso di lavoro GitHub Actions per automatizzare le distribuzioni su Netlify, creare un repository su GitHube invia i file di progetto.

Distribuisci l'applicazione Express su Netlify

Innanzitutto, distribuisci l'API su Netlify prima di configurare il flusso di lavoro GitHub Actions. Segui questi passaggi per distribuire l'app Express su Netlify.

  1. Vai a Netlifica e crea un account e accedi al Panoramica pagina.
  2. Selezionare e fare clic su Siti scheda.
  3. Clicca sul Importa da Git pulsante e selezionare Git Hub come piattaforma del provider Git. Netlify ti chiederà di autenticarti con GitHub per concedergli l'accesso al tuo account e ai repository del progetto.
  4. Selezionare il repository del progetto Express dall'elenco dei repository visualizzati.
  5. Dopo aver selezionato il repository, è necessario configurare le impostazioni di build per il processo di distribuzione. Netlify semplifica questo processo rilevando automaticamente la tecnologia utilizzata per creare l'applicazione e precompilando i campi con le impostazioni di compilazione richieste. In questo caso, il comando build, la pubblicazione e la directory functions.
  6. Infine, fai clic su Distribuisci sito pulsante per completare il processo.

Creare un flusso di lavoro delle azioni GitHub

Clicca sul Azioni scheda nel repository GitHub del tuo progetto. Nel Integrazione continua sezione, selezionare e fare clic su Configura Node.js flusso di lavoro.

Dall'editor GitHub, rinomina il nome del file in Netlify.yml, elimina il codice del flusso di lavoro standard Node.js e aggiungi il codice seguente:

nome:CostruireEDistribuisciANetlifica
SU:
spingere:
pull_request:
lavori:
costruire:
gira su:ubuntu-22.04
passi:
-usi:azioni/checkout@v3
# ( Crea in ./dist o in un'altra directory... )
-nome:DistribuisciANetlifica
usi:nwtgck/[email protected]
con:
pubblicazione-dir:'./dist'
ramo di produzione:principale
token github:${{segreti. GITHUB_TOKEN}}
messaggio di distribuzione:"Distribuisci da azioni GitHub"
abilitazione-richiesta-pull-commento:falso
enable-commit-commento:VERO
sovrascrive-pull-request-commento:VERO
env:
NETLIFY_AUTH_TOKEN:${{segreti. NETLIFY_AUTH_TOKEN}}
NETLIFY_ID_SITO:${{segreti. NETLIFY_SITE_ID}}
minuti di timeout:1

Ecco una ripartizione delle proprietà del flusso di lavoro:

  • SU: eventi che attivano le azioni in questo flusso di lavoro.
  • lavori: Specifica l'evento che deve essere eseguito da una particolare azione che sono: gli eventi build e deploy.
  • gira su: l'ambiente di produzione host per l'azione.
  • passi: Specifica una serie di passaggi necessari per eseguire un particolare lavoro.
  • con: definisce gli argomenti richiesti per l'esecuzione corretta delle azioni.
  • avv: specifica le variabili di ambiente richieste per il flusso di lavoro.

Infine, esegui il commit degli aggiornamenti apportati a questo file. GitHub dovrebbe attivare automaticamente il flusso di lavoro.

La build iniziale, tuttavia, attiverà un errore poiché è necessario aggiungere le variabili segrete richieste dal flusso di lavoro: l'ID del sito distribuito e il token di autenticazione di Netlify. Vai al tuo Impostazioni del sito su Netlify e copia il file ID sito.

Per ottenere il token di autenticazione, fare clic su profilo utente e selezionare l'icona Impostazioni utente opzione dalla finestra a discesa. Nella pagina delle impostazioni, seleziona Applicazionie fare clic Nuovo token di accesso per generare il tuo token di autenticazione.

Aggiungi le due variabili di ambiente come NETLIFY_SITE_ID e NETLIFY_AUTH_TOKEN alle sezioni delle variabili di ambiente e dei segreti del repository nel tuo repository GitHub. Dopo aver apportato queste modifiche, eseguire nuovamente il flusso di lavoro. Netlify distribuirà automaticamente tutte le modifiche successive che invii utilizzando questa pipeline.

Vai avanti e testa l'API utilizzando Postman effettuando richieste a questo URL: /.netlify/functions/app.

Configurazione di pipeline CI/CD con azioni GitHub e Netlify

Utilizzando le funzioni serverless di Netlify, puoi distribuire applicazioni Web complete che comprendono sia funzionalità lato client che back-end su Netlify.

Inoltre, l'impostazione di pipeline CI/CD per le applicazioni con GitHub Actions offre un approccio semplificato all'automazione del processo di compilazione e distribuzione. Ciò consente di definire flussi di lavoro che garantiscono un processo di sviluppo continuo e affidabile, a partire dall'ideazione e procedendo fino alla fase di rilascio.