# Déploiement automatisé sécurisé de sites web statiques pour les paresseux
> Construire un workflow automatisé pour servir des sites web statiques avec GitHub, Astrojs, Vercel et Cloudflare.
Publié le 2025-03-28 | Mis à jour le 2025-03-23
https://xsec.fr/cybersecurity/vercel-cloudflare-github/
---
import Callout from '@shared/components/Callout.astro'
import { Steps, Step } from '@/components/ui/steps'
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**
| Fonctionnalité | npm | yarn | pnpm |
|---|---|---|---|
| Vitesse d'installation | Modérée | Plus rapide que npm | Le plus rapide |
| Efficacité de l'espace disque | Moins efficace | Moins efficace que pnpm | Le plus efficace |
| Structure des dépendances | Aplatie (avec hoisting) | Aplatie (avec hoisting) | Imbriquée (via symlinks) |
| Risque de "dépendances fantômes" | Risque plus élevé | Risque plus élevé | Risque le plus faible |
| Support monorepo | Basique | Bon | Excellent |
| Familiarité des commandes | Élevée | Élevée (principalement compatible npm) | Élevée (principalement compatible npm) |
## Visualisation complète du workflow
Avant de plonger dans la configuration, visualisons l'ensemble du workflow automatisé avec un diagramme Mermaid :
```mermaid
graph TB
A[Developer Commits Code] --> B[Push to Repository]
B --> C{Branch Type?}
C -->|Preview Branch| D[Dependabot]
C -->|Main Branch| E[Direct Push]
D --> F[Code Review]
F --> G[Merge to Main]
G --> H[Trigger Webhook]
E --> H
H --> I{Deployment Type?}
I -->|Preview| J[Build Preview Environment]
I -->|Production| K[Build Production Environment]
J --> L[Generate Preview URLs]
L --> M[Add Preview Link to PR]
K --> N[Deploy to Production Domain]
N --> O[TLS Certificate Assessment]
```
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 :
```bash
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 :
```sh
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 :
```sh
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.
Une structure de projet Astro typique inclut un répertoire src où réside le code de votre site web, avec `src/pages` étant l'emplacement principal pour créer des pages web. Le fichier `astro.config.mjs` à la racine du projet est utilisé pour configurer divers aspects de votre projet Astro, tels que les intégrations et les paramètres de construction.
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 :
```sh
git add .
```
- Committez les changements avec :
```sh
git commit -m "Initial commit of Astro project"
```
- et poussez vers le dépôt distant sur github :
```sh
git remote add origin
git push -u origin main
```
Lier votre identité github et ouvrir votre dossier de dépôt dans vscode est fortement conseillé, vous bénéficierez de l'implémentation logicielle multiple de github et pousserez les changements plus facilement et rapidement.
## 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
Créez un compte Vercel sur `vercel.com` (vous pouvez vous inscrire avec votre compte GitHub)
Dans le tableau de bord Vercel, cliquez sur **"New Project"**
Sélectionnez **"Import GitHub Repository"**
**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 :
Définissez le **preset de framework** (si applicable, astro sera automatiquement détecté)
Cliquez sur **"Deploy"**
`pnpm` construira votre site web dans le dossier **/dist** où vous aurez des fichiers html et des répertoires.
### 3. Comprendre le processus de déploiement
Visualisons le workflow de déploiement GitHub-Vercel :
```mermaid
graph TB
P1[Developer Commits Code] --> P2[Push to GitHub Repository]
P2 --> P3{Branch Type?}
P3 -->|Preview Branch| P4[Dependabot]
P3 -->|Main Branch| P5[Direct Push to Main]
P4 --> P6[Code Review Process]
P6 --> P7[Main Branch]
P7 --> P8[Merge to Main]
P8 --> P9[Vercel Webhook Triggered]
P5 --> P9
P9 --> P10{Deployment Type?}
P10 -->|Preview| P11[Build Preview Environment]
P11 --> P12[Generate Preview URL]
P12 --> P13[Add Preview Link to PR]
P13 --> P14[Developer Review]
P14 -->|Approved| P15[Build Production Environment]
P14 -->|Changes Needed| P16[New Commits]
P16 --> P2
P10 -->|Production| P15
P15 --> P17[Deploy to Production Domain]
P17 --> P18[TLS Certificate Auto-renewal]
P18 --> P19[Production Site Live]
```
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
Créez un compte Cloudflare si vous n'en avez pas
Sur le tableau de bord, cliquez sur "Add a Site"
Entrez votre nom de domaine et suivez les instructions de configuration
Cloudflare scannera vos enregistrements DNS existants
**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 :
Dans le tableau de bord Cloudflare, allez dans la section DNS pour votre domaine
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)
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 :
```mermaid
graph TB
D1[User Request] --> D2[Cloudflare DNS]
D2 --> D3{Record Type?}
D3 -->|A Record| D4[A Record]
D3 -->|CNAME Record| D5[CNAME Record]
D4 --> D6[Root Domain Request]
D5 --> D7[WWW Subdomain Request]
D6 -->|Vercel IP: 76.76.21.21| D8[Vercel Edge Network]
D7 -->|cname.vercel-dns.com| D8
D8 --> D9[Your Static Website]
```
### 3. Configurez SSL/TLS dans Cloudflare
Dans le tableau de bord Cloudflare, allez dans la section **SSL/TLS**
Définissez le mode de **chiffrement SSL/TLS** sur **"Full"**
Activez **"Always Use HTTPS"** pour rediriger tout le trafic **HTTP** vers **HTTPS**
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 :
Dans le tableau de bord Vercel, sélectionnez votre projet
Allez dans **"Settings"** > **"Domains"**
Entrez votre nom de domaine :
Cliquez sur **"Add Domain"**
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 :
```yml
version: 2
updates:
- package-ecosystem: "npm"
directory: "/"
schedule:
interval: "daily"
groups:
patch-updates:
patterns:
- "*"
update-types:
- "patch"
minor-updates:
patterns:
- "*"
update-types:
- "minor"
pull-request-branch-name:
separator: "-"
ignore:
- dependency-name: "*"
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 :
Vérifiez que vous avez mis à jour vos nameservers chez votre bureau d'enregistrement de domaine
Vérifiez que vos enregistrements A et CNAME sont correctement configurés dans Cloudflare
Assurez-vous que le statut proxy est DÉSACTIVÉ pour les enregistrements Vercel dans Cloudflare
Accordez jusqu'à 48 heures pour que les changements DNS se propagent globalement
### Échecs de déploiement
Si vos déploiements Vercel échouent :
Vérifiez les journaux de construction dans le tableau de bord Vercel
Vérifiez que votre commande de construction est correcte
Assurez-vous que toutes les dépendances sont correctement listées dans votre package.json
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.