Come impostare una pipeline CI/CD per le API REST Node.js con azioni GitHub e Netlify

Configura questo flusso di lavoro per distribuire automaticamente la tua app in 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 integrazione continua e distribuzione continua (CI/CD) sono una serie di processi sequenziali e automatizzati a cui vengono sottoposte le applicazioni software prima di essere inviate alla produzione.

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

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

Ridurre al minimo il rischio di errori umani.
Accelerazione del 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 tuo progetto per automatizzare le pipeline CI/CD.

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 richieste pull e tracciamento dei problemi.

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

Configura il progetto Node.js

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

mkdir express-netlify
cd express-netlify

Successivamente, crea un file package.json utilizzando npm, il gestore pacchetti del nodo.

npm init -y

Infine, installa le dipendenze richieste nel progetto.

npm install express netlify-lambda serverless-http

Il pacchetto netlify-lambda funge da server di sviluppo locale che facilita il test delle funzioni serverless. 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 backend complete. Offre invece funzioni serverless come soluzione alternativa per la gestione delle funzionalità di backend.

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

Puoi trovare il codice di questo progetto nel suo repository GitHub.

Creare il server Web espresso

Crea tre cartelle: dist, functions e src nella directory principale della cartella del tuo progetto.

Prima di configurare il server Express, crea un file index.html vuoto nella cartella dist. Questo file funge da segnaposto che consente a Netlify di distribuire con successo l'applicazione Express e servire i percorsi API.

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

const express = require("express");
const serverless = require("serverless-http");
const app = express();
const router = express.Router();
router.get("/", (req, res) => {
  res.send("hello world!")
});
app.use(`/.netlify/functions/app`, router);
module.exports = app;
module.exports.handler = serverless(app);

Questo codice definisce un server Express con un unico percorso per l'URL root che gestisce le richieste GET. La funzione app.use registra il middleware del percorso con l'applicazione Express, garantendo che qualsiasi richiesta HTTP effettuata al percorso /.netlify/functions/app venga correttamente gestiti 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 del gestore serverless.

Ciò consente il test locale del server e garantisce che tu possa distribuirlo come funzione serverless su Netlify.

Definire il file Netlify.toml

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

[build]
  base = "/"
  command = "npm run build"
  publish = "/dist/"
  functions = "functions/"
  [build.environment]
    NODE_VERSION = "16"
[functions]
  external_node_modules = ["express"]
  node_bundler = "esbuild"
[[redirects]]
  force = true
  from = "/api/*"
  status = 200
  to = "/.netlify/functions/app/:splat"
[[redirects]]
  from = "/*"
  status = 200
  to = "/index.html"

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

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

Aggiorna il file Package.json

Apri il file package.json e aggiungi questi comandi all'oggetto script.

  "scripts": {
    "start": "netlify-lambda serve src",
    "build": "netlify-lambda build src"
  },

Eseguire i comandi seguenti per creare e avviare l'applicazione localmente.

npm run build
npm run start

Il server verrà avviato sulla porta 9000. Puoi procedere e testare l'API utilizzando Postman effettuando richieste a http://localhost:9000/.netlify/functions/app

Infine, prima di impostare il flusso di lavoro GitHub Actions per automatizzare le distribuzioni su Netlify, crea un repository su GitHub ed esegui il push dei 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.

Vai su Netlify, crea un account e accedi alla pagina Panoramica.
Seleziona e fai clic sulla scheda Siti.
Fai clic sul pulsante Importa da Git e seleziona GitHub come piattaforma del provider Git. Netlify ti chiederà di autenticarti con GitHub per concedergli l'accesso al tuo account e ai repository del progetto.
Seleziona il repository del progetto Express dall'elenco dei repository visualizzati.
Dopo aver selezionato il repository, è necessario configurare le impostazioni di compilazione per il processo di distribuzione. Netlify semplifica questo processo rilevando automaticamente la tecnologia utilizzata per creare l'applicazione e precompilare i campi con le impostazioni di creazione richieste. In questo caso, il comando build, la pubblicazione e la directory delle funzioni.
Infine, fai clic sul pulsante Implementa sito per completare il processo.

Crea un flusso di lavoro delle azioni GitHub

Fai clic sulla scheda Azioni nel repository GitHub del tuo progetto. Nella sezione Integrazione continua, seleziona e fai clic sul flusso di lavoro Configura Node.js.

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

name: Build and Deploy to Netlify
on:
  push:
  pull_request:
jobs:
  build:
    runs-on: ubuntu-22.04
    steps:
      - uses: actions/checkout@v3
      # ( Build to ./dist or other directory... )
      - name: Deploy to Netlify
        uses: nwtgck/actions-netlify@v2.0
        with:
          publish-dir: './dist'
          production-branch: main
          github-token: ${{ secrets.GITHUB_TOKEN }}
          deploy-message: "Deploy from GitHub Actions"
          enable-pull-request-comment: false
          enable-commit-comment: true
          overwrites-pull-request-comment: true
        env:
          NETLIFY_AUTH_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
          NETLIFY_SITE_ID: ${{ secrets.NETLIFY_SITE_ID }}
        timeout-minutes: 1

Ecco una ripartizione delle proprietà del flusso di lavoro:

on: eventi che attivano le azioni in questo flusso di lavoro.
jobs: specifica l'evento che deve essere eseguito una particolare azione che sono: gli eventi di build e deploy.
runs-on: l'ambiente di produzione che ospita l'azione.
passaggi: specifica una serie di passaggi necessari per eseguire un particolare lavoro.
con: definisce gli argomenti richiesti affinché le azioni vengano eseguite correttamente.
env: specifica le variabili di ambiente richieste per il flusso di lavoro.

Infine, conferma gli aggiornamenti apportati a questo file. GitHub dovrebbe attivare automaticamente il flusso di lavoro.

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

Per ottenere il token di autenticazione, fai clic sull'icona profilo utente e seleziona l'opzione Impostazioni utente dalla finestra a discesa. Nella pagina delle impostazioni, seleziona Applicazioni e fai clic su 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 sia alle variabili di ambiente che alle sezioni 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 invierai 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 funzionalità sia lato client che back-end su Netlify.

Inoltre, la configurazione di pipeline CI/CD per le applicazioni con GitHub Actions offre un approccio semplificato per automatizzare il processo di creazione e distribuzione. Ciò consente di definire flussi di lavoro che garantiscono un processo di sviluppo fluido e affidabile, a partire dall'ideazione e proseguendo fino alla fase di rilascio.