Configurez ce flux de travail pour déployer automatiquement votre application en production et rationaliser votre processus de publication.

Netlify est une plate-forme 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 configurer un pipeline CI/CD pour déployer une API REST Node.js sur Netlify à l'aide de GitHub Actions.

Pipelines CI/CD avec actions GitHub: un aperçu

Les pipelines d'intégration continue et de livraison continue (CI/CD) sont une série de processus séquentiels et automatisés que les applications logicielles subissent avant d'être expédiées en production.

En règle générale, les pipelines CI/CD se composent de plusieurs phases clés, notamment les phases de source, de génération, de test et de déploiement.

S'il est possible d'effectuer ces phases manuellement, leur automatisation offre plusieurs avantages, notamment :

  • Minimiser le risque d'erreurs humaines.
  • Accélérer le processus de publication.
  • Assurer un flux de travail cohérent pour l'expédition de logiciels de qualité à la production.

Qu'est-ce que les actions GitHub ?

GitHub Actions est un outil intégré à GitHub qui fournit un large éventail d'actions prédéfinies qui vous pouvez utiliser pour définir des flux de travail en tant que code directement dans votre référentiel de projet pour automatiser le CI/CD canalisations.

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 tracas. L'un des avantages de GitHub Actions est son intégration transparente avec d'autres fonctionnalités GitHub, telles que les demandes d'extraction et le suivi des problèmes.

Cela permet de déclencher des workflows en fonction d'événements spécifiques, comme un nouveau commit garantissant que vos pipelines CI/CD sont automatiquement déclenchés en cas de besoin.

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 fichier utilisant npm, le gestionnaire de paquets de nœuds.

npm init -y

Enfin, installez les dépendances requises dans le projet.

npm installer express netlify-lambda sans serveur-http

Le netlify-lambda Le package sert de serveur de développement local qui facilite le test des fonctions sans serveur. http sans serveur 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 offre des fonctions sans serveur comme solution alternative pour gérer les fonctionnalités backend.

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

Vous pouvez trouver le code de ce projet dans son Référentiel GitHub.

Créer le serveur Web express

Créez trois dossiers: distance, les fonctions, et src dans le répertoire racine de votre dossier de projet.

Avant de configurer le serveur Express, créez un espace vide index.html dossier dans le distance 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 src/app.js fichier et ajoutez le code suivant :

constante exprimer = exiger("exprimer");
constante sans serveur = exiger("http sans serveur");
constante app = express();
constante routeur = express. Routeur();


routeur.get("/", (req, res) => {
 res.send("Bonjour le monde!")
});


app.use(`/.netlify/fonctions/app`, routeur);
module.exports = application ;
module.exports.handler = sans serveur (application) ;

Ce code définit un serveur Express avec une route unique pour l'URL racine qui gère les requêtes GET. Le app.use La fonction enregistre le middleware de la route auprès de l'application Express, garantissant que toutes les requêtes HTTP adressées au chemin /.netlify/functions/app seront correctement gérés par le routeur, même dans un environnement de production.

Par conséquent, si vous ajoutez un nouveau point de terminaison tel que /api/auth, il sera accessible sur /.netlify/functions/app/api/auth. Enfin, le code exporte l'application Express et la fonction de gestionnaire sans serveur.

Cela permet de tester localement le serveur et garantit 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 Netlify.toml fichier et ajoutez le code suivant.

[construire]
 base = "/"
 commande = "npm run build"
 publier = "/dist/"
 fonctions = "fonctions/"
[environnement.de.construction]
 NODE_VERSION = "16"
[les fonctions]
 external_node_modules = ["exprimer"]
 node_bundler = "esbuild"
[[redirection]]
 forcer = vrai
 de = "/api/*"
 statut = 200
 to = "/.netlify/functions/app/:splat"
[[redirection]]
 de = "/*"
 statut = 200
 à = "/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 génération, le répertoire de publication et le répertoire des fonctions.

De plus, il définit les paramètres de redirection qui doivent gérer le routage des demandes d'API HTTP, en s'assurant qu'elles sont correctement dirigées vers les fonctions sans serveur Netlify.

Mettre à jour le fichier Package.json

Ouvrez le package.json fichier et ajoutez ces commandes à l'objet scripts.

"scénarios": {
"commencer": "netlify-lambda servir src",
"construire": "netlify-lambda build src"
 },

Exécutez les commandes suivantes pour créer et démarrer l'application localement.

construction d'exécution npm
démarrage de l'exécution npm

Le serveur démarrera sur le port 9000. Vous pouvez aller de l'avant et tester l'API à l'aide de Postman en faisant des demandes à http://localhost: 9000/.netlify/fonctions/app

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

Déployer l'application Express sur Netlify

Tout d'abord, déployez l'API sur Netlify avant de configurer le workflow GitHub Actions. Suivez ces étapes pour déployer l'application Express sur Netlify.

  1. Dirigez-vous vers Netlifier et créez un compte et connectez-vous au Aperçu page.
  2. Sélectionnez et cliquez sur le Des sites languette.
  3. Clique sur le Importer depuis Git bouton et sélectionnez GitHub en tant que plate-forme de fournisseur Git. Netlify vous invitera à vous authentifier auprès de GitHub pour lui accorder l'accès à votre compte et aux référentiels du projet.
  4. Sélectionnez le référentiel de projet Express dans la liste des référentiels affichés.
  5. Après avoir sélectionné le référentiel, 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 créer l'application et pré-remplit les champs avec les paramètres de construction requis. Dans ce cas, la commande build, la publication et le répertoire des fonctions.
  6. Enfin, cliquez sur le Déployer le site bouton pour terminer le processus.

Créer un workflow d'actions GitHub

Clique sur le Actions dans le référentiel GitHub de votre projet. Dans le Intégration continue section, sélectionnez et cliquez sur Configurer Node.js flux de travail.

Depuis l'éditeur GitHub, renommez le nom du fichier en Netlify.yml, supprimez le code de workflow standard Node.js et ajoutez le code ci-dessous :

nom:ConstruireetDéployerpourNetlifier
sur:
pousser:
pull_request :
emplois:
construire:
fonctionne sur:Ubuntu-22.04
pas:
-les usages:actions/paiement@v3
# ( Construit vers ./dist ou un autre répertoire... )
-nom:DéployerpourNetlifier
les usages:nwtgck/[email protected]
avec:
répertoire_publication :'./dist'
branche de production :principal
jeton github :${{secrets. GITHUB_TOKEN}}
message de déploiement :"Déployer à partir des actions GitHub"
enable-pull-request-comment :FAUX
enable-commit-comment :vrai
écrase-pull-request-commentaire :vrai
env :
NETLIFY_AUTH_TOKEN :${{secrets. NETLIFY_AUTH_TOKEN}}
NETLIFY_SITE_ID :${{secrets. NETLIFY_SITE_ID}}
timeout-minutes :1

Voici une ventilation des propriétés du flux de travail :

  • sur: événements qui déclenchent les actions dans ce workflow.
  • emplois: spécifie l'événement qu'une action particulière doit exécuter, à savoir: les événements de génération et de déploiement.
  • fonctionne sur: l'environnement de production hôte de l'action.
  • pas: Spécifie une série d'étapes impliquées pour effectuer un travail particulier.
  • avec: définit les arguments requis pour que les actions s'exécutent correctement.
  • env: spécifie les variables d'environnement requises pour le workflow.

Enfin, validez les mises à jour apportées à ce fichier. GitHub devrait déclencher automatiquement le workflow.

La construction initiale, 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. Dirigez-vous vers votre Paramètres du site sur Netlify et copiez le ID du site.

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

Ajoutez les deux variables d'environnement en tant que NETLIFY_SITE_ID et NETLIFY_AUTH_TOKEN aux sections des variables d'environnement et des secrets du référentiel dans votre référentiel GitHub. Après avoir apporté ces modifications, réexécutez le flux de travail. Netlify déploiera automatiquement toutes les modifications ultérieures que vous pousserez à l'aide de ce pipeline.

Allez-y et testez l'API à l'aide de Postman en envoyant des requêtes à cette URL: /.netlify/functions/app.

Configuration des pipelines CI/CD avec les actions GitHub et Netlify

En utilisant les fonctions sans serveur de Netlify, vous pouvez déployer des applications Web complètes qui englobent à la fois les fonctionnalités côté client et backend sur Netlify.

De plus, la configuration de pipelines CI/CD pour les applications avec GitHub Actions offre une approche simplifiée pour automatiser le 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.