Dans le sud de la Tunisie, un distributeur pharmaceutique de renom cherchait à moderniser ses opérations. Nous avons été mandatés pour développer un espace client sur mesure, mais une contrainte de taille s’imposait : la sécurité et conformité légale.

Plutôt que d’opter pour le cloud, une décision inhabituelle dans le monde de la technologie, nous avons décidé de déployer l’application sur leur infrastructure interne. Pourquoi ? Parce que la sécurité des données des pharmacies est une priorité absolue.

Vous êtes prêt à moderniser vos opérations et à offrir à vos clients une expérience exceptionnelle, tout en assurant la sécurité de leurs données sensibles. Suivez notre guide étape par étape pour déployer votre propre espace client sur votre infrastructure interne, inspiré de notre expérience réussie avec un distributeur pharmaceutique en Tunisie.

Dans cet article, nous allons explorer comment déployer une application Next.js en utilisant Caddy, en mettant en place un pipeline de déploiement automatisé sans utiliser Github Actions ou Gitlab CI/CD.

Dans cet article, nous couvrirons les sujets suivants :

• Obtenir une application Next.js depuis Gitlab
• Configurer PM2 pour exécuter l’application Next.js
• Configurer un serveur Caddy
• Déployer une application Next.js avec Caddy
• Mise en place d’un pipeline de déploiement automatisé
• Bien que cet article soit centré sur le déploiement d’une application Next.js, les concepts et techniques discutés peuvent être appliqués à n’importe quelle application web.

Qu’est-ce que Caddy ?

Caddy est un serveur web moderne et open-source conçu pour être facile à utiliser et à configurer. Il est écrit en Go et est conçu pour être rapide, sécurisé et fiable. Caddy est un excellent choix pour le déploiement d’applications web car il est facile à mettre en place et à configurer, et il dispose d’un support intégré pour HTTPS.

Le choix classique serait d’utiliser Nginx, mais Caddy est une excellente alternative plus facile à mettre en place et à configurer.

Obtenir une application Next.js depuis Gitlab

La première étape du déploiement d’une application Next.js avec Caddy est de récupérer l’application depuis Gitlab. Si vous n’avez pas encore d’application Next.js, vous pouvez en créer une en suivant la documentation Next.js. Une fois que vous avez une application Next.js, vous pouvez la pousser vers un dépôt Gitlab. Pour les besoins de cet article, nous supposerons que vous avez une application Next.js dans un dépôt Gitlab.

Générer les clés SSH

L’étape suivante consiste à générer les clés SSH qui seront utilisées pour s’authentifier auprès du dépôt Gitlab. Pour générer les clés SSH, exécutez la commande suivante dans votre terminal :

ssh-keygen -t rsa -b 4096 -C "Deployment server"Language:bash

Cette commande génère une nouvelle paire de clés SSH. Lorsque vous y êtes invité, appuyez sur Entrée pour accepter l’emplacement et le nom du fichier par défaut. Ne saisissez pas de phrase de passe. Copiez la clé publique dans votre presse-papiers en exécutant la commande suivante :

xclip -sel clip < ~/.ssh/id_ed25519.pubLanguage:bash

Ensuite, allez dans votre projet Gitlab et naviguez vers Settings > Repository > Deploy Keys. Cliquez sur Add deploy key et collez la clé publique dans le champ Key. Donnez un titre à la clé et cochez la case Accès en écriture. Cliquez sur Add key pour enregistrer la clé.

Extraire l’application de Gitlab

Allez dans le répertoire où vous souhaitez déployer l’application et clonez le dépôt Gitlab en exécutant la commande suivante :

git clone git@gitlab.yourdomain.com:project-group/project.gitLanguage:bash

Découvrez notre entreprise

Comment nous collaborons avec vous

Penser en grand

Nous transformons vos ambitions en objectifs concrets, en mettant l'innovation au cœur de notre collaboration.

Commencer petit

Nous commençons par des solutions pragmatiques, puis évoluons avec agilité pour maximiser votre succès à chaque étape.

Créer rapidement

Notre équipe réactive transforme les idées en résultats concrets, accélérant votre croissance et votre impact.

Innover à grande échelle

Nous repoussons les limites pour vous aider à saisir les opportunités à grande échelle, garantissant une collaboration visionnaire.

Planifier un rendez-vous

Configuration de PM2 pour exécuter l’application

PM2 est un gestionnaire de processus pour les applications Node.js qui vous permet de faire fonctionner votre application en arrière-plan. Pour installer PM2, exécutez la commande suivante :

npm install pm2 -gLanguage:bash

Créez ensuite le fichier serveur personnalisé pour l’application Next.js, créez un nouveau fichier appelé server.js à la racine de l’application Next.js avec le contenu suivant :

const { createServer } = require("http");
const { parse } = require("url");
const next = require("next");

const hostname = "localhost";
const port = 3000;
const app = next({ dev: false, hostname, port });
const handle = app.getRequestHandler();

app.prepare().then(() => {
  createServer(async (req, res) => {
    try {
      // Be sure to pass `true` as the second argument to `url.parse`.
      // This tells it to parse the query portion of the URL.
      const parsedUrl = parse(req.url, true);
      const { pathname, query } = parsedUrl;
      await handle(req, res, parsedUrl);
    } catch (err) {
      console.error("Error occurred handling", req.url, err);
      res.statusCode = 500;
      res.end("internal server error");
    }
  }).listen(port, (err) => {
    if (err) throw err;
    console.log(`> Ready on http://${hostname}:${port}`);
  });
});Language:javascript

Plus de lecture sur  comment créer un serveur personnalisé de Next.js

Ensuite, allez dans le répertoire et créez un nouveau fichier appelé ecosystem.config.js avec le contenu suivant :

module.exports = {
  apps: [
    {
      name: "my-application",
      script: "./server.js",
      env: {
        NODE_ENV: "production",
      },
    },
  ],
};Language:javascript

Mise en place d’un serveur

Pour configurer un serveur Caddy, vous devrez installer Caddy sur votre serveur. Vous pouvez télécharger la dernière version de Caddy depuis le site officiel. Une fois que vous avez téléchargé Caddy, vous pouvez l’installer en exécutant la commande suivante :

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddyLanguage:bash

Pour les besoins de l’exemple, nous avons utilisé le serveur Ubuntu. Vous pouvez trouver les instructions d’installation pour d’autres systèmes d’exploitation sur le site officiel.

Créez ensuite un nouveau fichier appelé  Caddyfile à la racine de l’application Next.js avec le contenu suivant :

mydomain.com {
    reverse_proxy 0.0.0.0:3000
    encode gzip
}

http://mydomain.com {
  redir https://{host}{uri}
}Language:text

Remplacez mydomain.com par votre nom de domaine. Démarrez le serveur Caddy en exécutant la commande suivante :

caddy runLanguage:bash

Ce qui est génial avec Caddy, c’est qu’il génère automatiquement des certificats SSL pour votre domaine à l’aide de Let’s Encrypt. Cela signifie que votre application sera servie via HTTPS par défaut.

Mise en place d’un pipeline

Pour configurer un pipeline de déploiement automatisé, nous utilisons normalement un outil tel que Jenkins, Gitlab CI/CD ou Github Actions. Cependant, dans cet article, nous utiliserons un simple script bash pour automatiser le processus de déploiement.

Créez un nouveau fichier appelé  deploy.sh à la racine de l’application Next.js avec le contenu suivant :

#!/bin/bash

git pull

BUILD_VERSION=$(git rev-parse HEAD)

echo "$(date --utc +%FT%TZ): Releasing new server version. $BUILD_VERSION"

echo "$(date --utc +%FT%TZ): Running build..."
yarn build
echo "$(date --utc +%FT%TZ): Restarting PM server..."
pm2 restart all

sleep 10

caddy reloadLanguage:bash

Ce script bash extraira les dernières modifications du référentiel Gitlab, créera l’application Next.js, redémarrera le serveur PM2 et rechargera le serveur Caddy.

Nous exécuterons ce script avec un cron toutes les minutes. Mais pour être sûr que le script ne sera pas déployé indéfiniment, nous ajouterons un script pour vérifier si une nouvelle version est disponible. Créez un nouveau fichier appelé  deploy-if-changed.sh à la racine de l’application Next.js avec le contenu suivant :

#!/bin/bash

echo "$(date --utc +%FT%TZ): Fetching remote repository..."
git fetch

UPSTREAM=${1:-'@{u}'}
LOCAL=$(git rev-parse @)
REMOTE=$(git rev-parse "$UPSTREAM")
BASE=$(git merge-base @ "$UPSTREAM")

if [ $LOCAL = $REMOTE ]; then
  echo "$(date --utc +%FT%TZ): No changes detected in git"
elif [ $LOCAL = $BASE ]; then
  BUILD_VERSION=$(git rev-parse HEAD)
  echo "$(date --utc +%FT%TZ): Changes detected, deploying new version: $BUILD_VERSION"
  ./deploy.sh
elif [ $REMOTE = $BASE ]; then
  echo "$(date --utc +%FT%TZ): Local changes detected, stashing"
  git stash deploy.sh
else
  echo "$(date --utc +%FT%TZ): Git is diverged, this is unexpected."
fiLanguage:bash

Rendez le script exécutable en exécutant la commande suivante :

chmod +x deploy.sh
chmod +x deploy-if-changedLanguage:bash

Pour la tâche cron, nous créerons un nouveau fichier appelé deploy-cron.sh dans un nouveau dossier en dehors de l’application Next.js nommé automation. Le nouveau fichier sera donc localisé  automation/deploy-cron.sh avec le contenu suivant :

#!/bin/bash

LOCK_FILE="$(pwd)/my-app.lock"
cd /absolute-path-to-your-nextjs-app
flock -n $LOCK_FILE ./deploy-if-changed.sh >> /home/automation/deploy-logs.log 2>&1Language:bash

Ce script exécutera le  deploy-if-changed.sh script toutes les minutes et enregistrera la sortie dans un fichier appelé  deploy-logs.log. Nous utilisons flock pour empêcher le script de s’exécuter plusieurs fois simultanément.

Rendez le script exécutable en exécutant la commande suivante :

chmod +x deploy-cron.shLanguage:bash

Pour configurer la tâche cron, exécutez la commande suivante :

crontab -eLanguage:bash

Ajoutez la ligne suivante au fichier crontab :

* * * * * /absolute-path-to-your-automation-folder/deploy-cron.shLanguage:text

Conclusion

Dans cet article, nous avons exploré comment déployer une application Next.js à l’aide de Caddy, en configurant un pipeline de déploiement automatisé sans utiliser Github Actions ou Gitlab CI/CD.

Nous espérons que vous avez apprécié cet article et que vous l’avez trouvé utile. Si vous avez des questions ou des commentaires, envoyez-moi un e-mail à  kharrat.m [at] tekru.net .

Cet article est inspiré de l’article  Le cloud est trop conçu et trop cher (pas de musique)  de  Tom Delalande .