Déploiement automatisé sécurisé de sites web statiques pour les paresseux

Aujourd’hui, les sites web statiques sont devenus la solution de prédilection pour ceux qui recherchent performance, sécurité et simplicité. Cependant, le processus de déploiement peut encore être fastidieux sans une automatisation appropriée. Dans cet article, je vous guiderai dans la mise en place d’un workflow entièrement automatisé qui fait passer votre site web statique du code à la production avec un minimum d’effort. Nous utiliserons Astrojs comme générateur de site web statique, GitHub pour le contrôle de version, Vercel pour les déploiements, Dependabot pour l’analyse des dépendances et les Pull requests automatiques sur le dépôt github, et Cloudflare pour la gestion de domaine, créant une infrastructure puissante et moderne qui fonctionne pratiquement toute seule.

Pourquoi automatiser le déploiement de votre site web statique ?

Les sites web statiques—composés de fichiers HTML, CSS et JavaScript servis directement aux navigateurs—offrent d’excellentes performances et sécurité comparés aux sites dynamiques. Cependant, sans automatisation, vous êtes coincé à construire et télécharger manuellement les fichiers à chaque modification.

Un workflow automatisé élimine ces tâches répétitives, vous permettant de :

• Vous concentrer sur le contenu plutôt que sur la logistique de déploiement
• Déployer les changements instantanément avec l’intégration du contrôle de version
• Implémenter des environnements de test et de prévisualisation appropriés
• Bénéficier de la distribution CDN mondiale automatiquement
• Gérer les domaines et certificats SSL sans effort

Explorons comment GitHub, Vercel, Cloudflare et Astrojs fonctionnent ensemble pour créer cette expérience fluide.

Comprendre les outils de notre stack

GitHub

GitHub sert de dépôt de code, offrant des fonctionnalités de contrôle de version et de collaboration. Chaque modification de votre site web est suivie, révisée et approuvée via le système de pull request de GitHub avant d’être automatiquement déployée.

Vercel

Vercel est une plateforme cloud spécialisée dans les déploiements de sites statiques et les fonctions serverless. Elle offre une intégration exceptionnelle avec GitHub, des déploiements de prévisualisation automatiques et une distribution CDN mondiale. Vercel brille particulièrement avec les frameworks modernes comme Next.js, Nuxt ou Astro.

Cloudflare

Cloudflare fournit la gestion DNS, les certificats SSL/TLS et des fonctionnalités de sécurité supplémentaires. Utiliser Cloudflare avec Vercel vous donne plus de contrôle sur votre domaine tout en bénéficiant des puissantes fonctionnalités de sécurité et du réseau mondial de Cloudflare.

Astrojs

Astrojs est un générateur de site statique moderne conçu pour la vitesse et axé sur la fourniture de sites web orientés contenu avec des performances exceptionnelles. Les caractéristiques clés incluent :

• Rendu côté serveur pour des chargements de page initiaux plus rapides
• Philosophie "Zéro JavaScript par défaut"
• Architecture “Islands” innovante pour une interactivité sélective
• Optimisations automatiques comme le fractionnement de code et le chargement différé
• Nature agnostique au framework, supportant diverses bibliothèques UI

pnpm

pnpm est un gestionnaire de paquets plus rapide et plus efficace en espace disque pour les projets Node.js. Il offre :

• Vitesse remarquable dans l’installation des paquets
• Utilisation efficace de l’espace disque via un magasin adressable par contenu et des liens physiques
• Résolution stricte des dépendances pour prévenir les “dépendances fantômes”
• Excellent support pour les monorepos

Visualisation complète du workflow

Avant de plonger dans la configuration, visualisons l’ensemble du workflow automatisé avec un diagramme Mermaid :

Ce diagramme illustre comment le code circule du développement via le système de contrôle de version de GitHub, déclenche les déploiements automatisés de Vercel, et se connecte avec Cloudflare pour la gestion du domaine et de la sécurité.

Configuration de votre dépôt GitHub avec un squelette astrojs

• Créez un projet Astrojs en utilisant pnpm :

pnpm create astro@latest

Cette commande initiera l’assistant de configuration Astro, qui vous guidera à travers plusieurs options, comme choisir un modèle de démarrage. Vous pouvez sélectionner un modèle minimal pour une configuration de base ou explorer d’autres modèles comme blog ou portfolio selon les besoins de votre projet. Alternativement, vous pouvez utiliser le flag --template pour spécifier directement un modèle.

Après avoir spécifié le nom du projet et sélectionné vos options désirées, l’Astro CLI créera le répertoire du projet et installera les dépendances nécessaires en utilisant pnpm. Une fois le processus terminé, naviguez dans votre répertoire de projet nouvellement créé en utilisant la commande cd :

cd nom-de-votre-projet

Pendant l’initialisation du projet, pnpm créera un fichier pnpm-lock.yaml. Ce fichier garantit que les versions exactes des dépendances de votre projet sont installées à chaque fois, assurant la cohérence entre différents environnements. Contrairement à npm et yarn, pnpm structure le répertoire node_modules en utilisant des symlinks, ce qui contribue à son efficacité en utilisation d’espace disque.

Pour démarrer le serveur de développement Astro et prévisualiser votre site web localement, exécutez la commande suivante :

pnpm dev

Cette commande démarrera typiquement le serveur de développement à http://localhost:4321/. Ouvrez cette URL dans votre navigateur pour voir votre nouveau site web Astro en action. Au fur et à mesure que vous apportez des modifications aux fichiers de votre projet dans le répertoire src, Astro mettra automatiquement à jour l’aperçu dans votre navigateur, offrant une expérience de développement fluide.

Avec votre projet Astro configuré en utilisant pnpm, vous êtes maintenant prêt à procéder à l’automatisation du processus de déploiement, mais initialisons d’abord un dépôt git :

• Allez sur GitHub et cliquez sur “New repository”
• Nommez votre dépôt (idéalement correspondant à votre nom de domaine)
• Ajoutez une description et définissez la visibilité (publique ou privée)
• Initialisez avec un fichier README
• Cliquez sur “Create repository”

• Dans un nouveau terminal, Stagez, committez et poussez vers GitHub :

• git clone votreURL le nouveau dépôt avec l’url (si public), sinon utilisez votre clé publique ssh et mettez-la à jour sur votre profil.

• Stagez tous vos fichiers avec :

git add .

• Committez les changements avec :

git commit -m "Initial commit of Astro project"

• et poussez vers le dépôt distant sur github :

git remote add origin
git push -u origin main

Configuration de Vercel pour les déploiements automatisés

L’intégration de Vercel avec GitHub crée un pipeline de déploiement fluide. Configurons-le :

1. Connectez votre dépôt GitHub à Vercel

1. Créez un compte Vercel sur vercel.com (vous pouvez vous inscrire avec votre compte GitHub)

2. Dans le tableau de bord Vercel, cliquez sur “New Project”

3. Sélectionnez “Import GitHub Repository”

4. Autorisez Vercel à accéder à votre compte GitHub si demandé

2. Configurez les paramètres de votre projet

Vercel détectera automatiquement les frameworks courants (Next.js, React, Vue, etc.) et suggérera les paramètres appropriés :

1. Définissez le preset de framework (si applicable, astro sera automatiquement détecté)

2. Cliquez sur “Deploy”

3. Comprendre le processus de déploiement

Visualisons le workflow de déploiement GitHub-Vercel :

Ce processus se produit automatiquement une fois l’intégration configurée. Chaque push vers une branche de fonctionnalité crée un déploiement de prévisualisation avec une URL unique, tandis que les pushs vers la branche principale mettent à jour votre site de production.

Configuration de Cloudflare pour la gestion DNS et TLS

Bien que Vercel fournisse sa propre gestion de domaine et SSL, utiliser Cloudflare vous donne des fonctionnalités de sécurité et un contrôle supplémentaires :

1. Ajoutez votre domaine à Cloudflare

1. Créez un compte Cloudflare si vous n’en avez pas
2. Sur le tableau de bord, cliquez sur “Add a Site”
3. Entrez votre nom de domaine et suivez les instructions de configuration

4. Cloudflare scannera vos enregistrements DNS existants
5. Mettez à jour les nameservers de votre domaine dans le tableau de bord de votre bureau d’enregistrement pour pointer vers les nameservers de Cloudflare.

2. Configurez les enregistrements DNS pour Vercel

Une fois votre domaine actif sur Cloudflare, configurez les enregistrements DNS pour pointer vers votre déploiement Vercel :

1. Dans le tableau de bord Cloudflare, allez dans la section DNS pour votre domaine
2. Ajoutez un enregistrement A :
   • Type : A
   • Nom : @ (représentant votre domaine racine)
   • Cible : 76.76.21.21 (adresse IP de Vercel)
   • Statut proxy : Désactivé (important pour la compatibilité avec Vercel)
3. Ajoutez un enregistrement CNAME :
   • Type : CNAME
   • Nom : www
   • Cible : cname.vercel-dns.com
   • Statut proxy : Désactivé

La configuration DNS peut être visualisée comme suit :

3. Configurez SSL/TLS dans Cloudflare

1. Dans le tableau de bord Cloudflare, allez dans la section SSL/TLS
2. Définissez le mode de chiffrement SSL/TLS sur “Full”
3. Activez “Always Use HTTPS” pour rediriger tout le trafic HTTP vers HTTPS
4. Cloudflare provisionnera et gérera automatiquement les certificats pour votre domaine

Ajout de votre domaine personnalisé à Vercel

Maintenant, connectez votre domaine géré par Cloudflare à votre projet Vercel :

1. Dans le tableau de bord Vercel, sélectionnez votre projet
2. Allez dans “Settings” > “Domains”
3. Entrez votre nom de domaine :

4. Cliquez sur “Add Domain”
5. Vercel vérifiera la configuration DNS

Si votre DNS est correctement configuré dans Cloudflare, Vercel vérifiera le domaine avec succès. Sinon, Vercel fournira des instructions pour corriger la configuration.

Automatisation des mises à jour de dépendances avec Dependabot

Dependabot est un outil puissant qui met automatiquement à jour les dépendances de votre projet via des pull requests (PR). Voici comment le configurer :

• Naviguez vers les paramètres de votre dépôt sur GitHub.

• Sous la section “Security”, activez les alertes Dependabot, les mises à jour de sécurité et les mises à jour de version.

• Ajoutez un fichier dependabot.yml dans le dossier .github à la racine de votre dépôt :

1
version: 2
2
updates:
3
  - package-ecosystem: "npm"
4
    directory: "/"
5
    schedule:
6
      interval: "daily"
7
    groups:
8
      patch-updates:
9
        patterns:
10
          - "*"
11
        update-types:
12
          - "patch"
13
      minor-updates:
14
        patterns:
15
          - "*"
16
        update-types:
17
          - "minor"
18
    pull-request-branch-name:
19
      separator: "-"
20
    ignore:
21
      - dependency-name: "*"
22
        update-types: ["version-update:semver-major"]

Cette configuration garantit que les mises à jour de dépendances sont révisées et créent une pull request avec prévisualisation vercel, maintenant votre projet sécurisé et à jour sans modifier les fichiers vous-même et avoir un aperçu en direct et automatisé du site web avec les modifications par dependabot :

Aperçu d’un commit dans vercel, vous avez un nom de domaine fourni gratuitement vercel.app et des sous-domaines spéciaux attribués à chaque commit, de cette façon vous pouvez avoir un aperçu du projet à un moment/commit spécifique ainsi que des rollbacks :

Vous pouvez fusionner ou résoudre les conflits directement en bas de la pull request.

Avantages de ce workflow automatisé

Cette configuration offre de nombreux avantages :

1. Processus de développement simplifié

• Apportez des modifications à votre code, committez et poussez—tout le reste se produit automatiquement
• Pas de téléchargements FTP manuels ou de processus de construction à gérer
• Les déploiements de prévisualisation pour chaque pull request permettent une révision et des tests faciles

2. Performance et sécurité améliorées

• Le CDN mondial de Cloudflare met en cache votre contenu statique proche des utilisateurs
• La gestion automatique des certificats SSL/TLS garantit que votre site est toujours sécurisé
• Les fonctionnalités de sécurité supplémentaires de Cloudflare protègent contre les attaques DDoS et autres menaces

3. Collaboration et contrôle qualité améliorés

• Les aperçus de pull request facilitent les révisions d’équipe avant que les changements ne soient mis en ligne
• Les déploiements automatiques de branches encouragent le développement basé sur les fonctionnalités
• Rollbacks faciles si quelque chose ne va pas

4. Efficacité des coûts

• Le niveau gratuit de Vercel inclut des limites généreuses (200 sites web, 6000 minutes de construction/mois, 100GB de bande passante)
• Cloudflare offre du DNS gratuit et des fonctionnalités de sécurité de base
• Payez seulement quand vous avez besoin de plus de ressources ou de fonctionnalités avancées, le plan gratuit est suffisant pour un site web personnel

Dépannage des problèmes courants

Problèmes de configuration DNS

Si votre domaine ne se connecte pas correctement :

1. Vérifiez que vous avez mis à jour vos nameservers chez votre bureau d’enregistrement de domaine
2. Vérifiez que vos enregistrements A et CNAME sont correctement configurés dans Cloudflare
3. Assurez-vous que le statut proxy est DÉSACTIVÉ pour les enregistrements Vercel dans Cloudflare
4. Accordez jusqu’à 48 heures pour que les changements DNS se propagent globalement

Échecs de déploiement

Si vos déploiements Vercel échouent :

1. Vérifiez les journaux de construction dans le tableau de bord Vercel
2. Vérifiez que votre commande de construction est correcte
3. Assurez-vous que toutes les dépendances sont correctement listées dans votre package.json
4. Testez le processus de construction localement avant de pousser

Conclusion

En combinant des outils comme GitHub, Vercel, Cloudflare, Astrojs, pnpm et Dependabot, vous pouvez créer un workflow automatisé fluide qui simplifie le développement et le déploiement de sites web statiques tout en garantissant des performances et une sécurité optimales.

Cette approche non seulement fait gagner du temps mais vous permet également de vous concentrer sur la création de contenu de qualité sans vous soucier de l’infrastructure ou des déploiements manuels ! Avec Dependabot intégré dans le workflow, maintenir les dépendances sécurisées et à jour devient sans effort—garantissant que votre projet reste robuste contre les vulnérabilités tout en maintenant d’excellents standards de performance.