Netlify est une plateforme d’hébergement web et une suite complète d’outils pour déployer et gérer des applications web dans le cloud.



Mais ses fonctionnalités vont bien au-delà – ses fonctions sans serveur vous permettent d’exécuter du code côté serveur sans serveur dédié.

Découvrez comment mettre en place un pipeline CI/CD pour déployer une API REST Node.js sur Netlify à l’aide des actions GitHub.


Pipelines CI/CD avec GitHub Actions : Une vue d’ensemble

Les pipelines d’intégration et de livraison continues (CI/CD) sont une série de processus séquentiels et automatisés auxquels sont soumises les applications logicielles avant d’être mises en production.

Logo 3D de GitHub

En règle générale, les pipelines CI/CD se composent de plusieurs phases clés, notamment les phases de création des sources, de construction, de test et de déploiement.

Bien qu’il soit possible d’exécuter ces phases manuellement, leur automatisation présente plusieurs avantages, notamment :

  • Minimiser le risque d’erreurs humaines.
  • Accélérer le processus de libération.
  • Garantir un flux de travail cohérent pour l’envoi de logiciels de qualité à la production.

Qu’est-ce que GitHub Actions ?

GitHub Actions est un outil intégré à GitHub qui fournit une large gamme d’actions pré-construites que vous pouvez utiliser pour définir des workflows-as-code directement dans votre dépôt de projet pour automatiser les pipelines CI/CD.

Vous pouvez également créer des actions personnalisées pour répondre aux besoins spécifiques de votre projet, ce qui vous permet de créer et de déployer des applications en production sans problème. L’un des avantages de GitHub Actions est son intégration transparente avec d’autres fonctionnalités de GitHub, telles que les demandes d’extraction et le suivi des problèmes.

Cela permet de déclencher des flux de travail basés sur des événements spécifiques, tels qu’un nouveau commit, en s’assurant que vos pipelines CI/CD sont automatiquement déclenchés lorsque cela est nécessaire.


Configurer le projet Node.js

Pour commencer, vous devez créer un serveur web Express. Pour ce faire, créez un nouveau dossier localement et changez de répertoire sur votre terminal.

 mkdir express-netlify
cd express-netlify

Ensuite, créez un package.json à l’aide de npm, le gestionnaire de paquets de Node.

 npm init -y

Enfin, installez les dépendances nécessaires au projet.

 npm install express netlify-lambda serverless-http

L’outil netlify-lambda Le paquet netlify-lambda sert de serveur de développement local qui facilite le test des fonctions sans serveur. serverless-http aide à adapter les applications Express.js à un format compatible avec les gestionnaires de fonctions sans serveur.

Netlify ne fournit pas de support natif pour l’hébergement et l’exécution d’applications backend à part entière. Au lieu de cela, il propose des fonctions sans serveur comme solution alternative pour gérer les fonctionnalités de backend.

Ces fonctions gèrent la logique côté serveur, traitent les demandes d’API HTTP et servent le contenu dynamique, fournissant une fonctionnalité de type backend dans le paradigme sans serveur.

Vous pouvez trouver le code de ce projet dans son dépôt GitHub.

Créer le serveur Web Express

Créez trois dossiers : dist, fonctionset src dans le répertoire racine de votre projet.

Avant de configurer le serveur Express, créez un fichier index.html dans le fichier dist dossier. Ce fichier agit comme un espace réservé qui permet à Netlify de déployer avec succès l’application Express et de servir les routes API.

Maintenant, créez un fichier src/app.js et ajoutez le code suivant :

 const express = require("express");
const serverless = require("serverless-http");

const app = express();
const router = express.Router();

router.get("https://www.makeuseof.com/", (req, res) => {
  res.send("hello world!")
});

app.use(`/.netlify/functions/app`, router);

module.exports = app;
module.exports.handler = serverless(app);

Ce code définit un serveur Express avec une seule route pour l’URL racine qui traite les requêtes GET. Le code app.use enregistre le middleware de la route avec l’application Express, en s’assurant que toutes les requêtes HTTP effectuées sur le chemin <url>/.netlify/functions/app sera correctement traité par le routeur, même dans un environnement de production.

Par conséquent, si vous ajoutez un nouveau point d’extrémité tel que /api/authil sera accessible sur <url>/.netlify/functions/app/api/auth. Enfin, le code exporte l’application Express et la fonction de gestion sans serveur.

Cela permet de tester localement le serveur et de s’assurer que vous pouvez le déployer en tant que fonction sans serveur sur Netlify.


Définir le fichier Netlify.toml

Dans le répertoire racine, créez un nouveau fichier Netlify.toml et ajoutez le code suivant.

 [build]
  base = "https://www.makeuseof.com/"
  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"

Le code spécifie les paramètres de configuration de construction et de déploiement pour l’application Express sur Netlify. Il inclut des paramètres tels que le répertoire de base, la commande de construction, le répertoire de publication et le répertoire des fonctions.

En outre, il définit les paramètres de redirection qui devraient gérer le routage des demandes d’API HTTP, en veillant à ce qu’elles soient correctement dirigées vers les fonctions sans serveur de Netlify.

Mise à jour du fichier Package.json

Ouvrir le fichier package.json et ajoutez ces commandes à l’objet scripts.

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

Exécutez les commandes suivantes pour construire et démarrer l’application localement.

 npm run build
npm run start

Le serveur démarrera sur le port 9000. Vous pouvez aller de l’avant et tester l’API en utilisant Postman en faisant des requêtes à http://localhost:9000/.netlify/functions/app

Enfin, avant de mettre en place le workflow GitHub Actions pour automatiser les déploiements sur Netlify, créez un dépôt sur GitHub, et poussez les fichiers du projet.


Déployer l’application Express sur Netlify

Tout d’abord, déployez l’API sur Netlify avant de configurer le flux de travail des actions GitHub. Suivez ces étapes pour déployer l’application Express sur Netlify.

  1. Rendez-vous sur Netlify, créez un compte et connectez-vous à l’application Vue d’ensemble page.
  2. Sélectionnez et cliquez sur l’icône Sites tab.
  3. Cliquez sur l’onglet Importer de Git et sélectionnez GitHub comme plateforme Git. Netlify vous demandera de vous authentifier auprès de GitHub pour lui donner accès à votre compte et aux dépôts du projet.
  4. Sélectionnez le dépôt du projet Express dans la liste des dépôts affichés.
  5. Après avoir sélectionné le dépôt, vous devez configurer les paramètres de construction pour le processus de déploiement. Netlify simplifie ce processus en détectant automatiquement la technologie utilisée pour construire l’application et en pré-remplissant les champs avec les paramètres de construction requis. Dans ce cas, il s’agit de la commande de construction, de la publication et du répertoire de fonctions.
    Paramètres de construction sur Netlify

  6. Enfin, cliquez sur le bouton Déployer le site pour terminer le processus.


Créer un flux d’actions GitHub

Cliquer sur le bouton Actions dans le dépôt GitHub de votre projet. Dans l’onglet Intégration continue sélectionnez et cliquez sur Configurer Node.js workflow.

Intégration continue Nodejs GH Actions Workflow

Depuis l’éditeur GitHub, renommez le nom du fichier en Netlify.ymlsupprimez le code du flux de travail Node.js et ajoutez le code ci-dessous :

 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

Voici la répartition des propriétés du flux de travail :

  • sur: Événements qui déclenchent les actions dans ce flux de travail.
  • emplois: Spécifie l’événement qu’une action particulière doit exécuter, à savoir les événements de construction et de déploiement.
  • runs-on: l’environnement de production de l’hôte pour l’action.
  • étapes: Spécifie une série d’étapes nécessaires à l’exécution d’un travail particulier.
  • avec: Définit les arguments nécessaires au bon déroulement des actions.
  • env: spécifie les variables d’environnement requises pour le flux de travail.

Enfin, livrez les mises à jour apportées à ce fichier. GitHub devrait déclencher automatiquement le flux de travail.

Le build initial, cependant, déclenchera une erreur car vous devez ajouter des variables secrètes requises par le workflow : l’ID du site déployé et le jeton d’authentification de Netlify. Rendez-vous dans votre Paramètres du site sur Netlify et copier le fichier ID du site.

Pour obtenir le jeton d’authentification, cliquez sur le bouton profil de l’utilisateur et sélectionnez l’icône Paramètres utilisateur dans la fenêtre déroulante. Sur la page des paramètres, sélectionnez Applicationset cliquez sur Nouveau jeton d’accès pour générer votre jeton d’authentification.

Jeton d'authentification Netlify

Ajoutez les deux variables d’environnement NETLIFY_SITE_ID et NETLIFY_AUTH_TOKEN aux sections des variables d’environnement et des secrets de dépôt dans votre dépôt GitHub. Après avoir effectué ces changements, réexécutez le flux de travail. Netlify déploiera automatiquement tous les changements ultérieurs que vous pousserez en utilisant ce pipeline.

Allez-y et testez l’API en utilisant Postman en faisant des requêtes à cette URL : <netlify’s site url>/.netlify/functions/app.


Configurer les pipelines CI/CD avec les actions GitHub et Netlify

En utilisant les fonctions sans serveur de Netlify, vous pouvez déployer des applications web à part entière qui englobent les fonctionnalités côté client et backend sur Netlify.

En outre, la mise en place de pipelines CI/CD pour les applications avec GitHub Actions offre une approche rationalisée de l’automatisation du processus de construction et de déploiement. Cela vous permet de définir des flux de travail qui garantissent un processus de développement transparent et fiable, depuis l’idéation jusqu’à la phase de publication.