BUT Réseau et Télécoms - 1ère année
Durée estimée : 2-3 heures
À la fin de ce TP, vous serez capable de :
.pp.uamindmap
root((Cloudflare Pages))
Domaine gratuit
Inscription nic.ua
Activation Telegram
Domaine .pp.ua
Configuration Cloudflare
Compte gratuit
Zone DNS
Projet Pages
Secrets GitHub
API Token
Account ID
Repository secrets
Déploiement
Workflow Actions
Build automatique
Publication
DNS & SSL
Enregistrement CNAME
Certificat SSL/TLS
Site en ligne
.uaLes domaines .ua correspondent à l'extension de domaine de l'Ukraine. Utiliser un domaine .ua en tant que développeur français peut être perçu comme un geste politique de solidarité ou de soutien.
Vous devez être conscient de cette dimension géopolitique avant de procéder.
Si vous n'êtes pas à l'aise avec ce choix, deux alternatives s'offrent à vous :
.com par exemple directement chez Cloudflare (domaine payant)Le TP suivra la route .pp.ua, mais vous pouvez l'adapter à votre choix.
Avant de commencer, assurez-vous d'avoir :
+33612345678).pp.uagraph LR
A["nic.ua<br/>Accueil"] -->|Sign in| B["Page de connexion"]
B -->|Pas encore de compte| C["Créer un compte"]
C -->|Email + mot de passe| D["Dashboard nic.ua"]
.pp.uaUne fois connecté :
.pp.ua via la barre de recherchemonportfolio.pp.ua)graph LR
A["Barre de recherche"] -->|monportfolio.pp.ua| B["Résultats"]
B -->|Disponible ✅| C["Add to cart"]
B -->|Indisponible ❌| D["Essayer un autre nom"]
D --> A
Sélectionnez un nom de domaine court et mémorable. Exemple :
monportfolio.pp.uajean-dupont.pp.uadevweb-2024.pp.ua⚠️ Important : Le nom doit être disponible et unique. Vous pouvez tester plusieurs variantes.
# Exemples de noms valides :
- votrenom.pp.ua
- votreprojet.pp.ua
- portfolio-iut.pp.ua
Cliquez sur "Add to cart".
.pp.ua via TelegramLors de mes tests, Telegram s'est avéré être la solution la plus fiable à 100%. Les SMS peuvent être bloqués ou retardés selon votre opérateur mobile. Telegram offre une activation immédiate et sans problème.
Si vous n'avez pas Telegram :
Format international requis :
+33 (France)
+41 (Suisse)
+32 (Belgique)
…
Exemple : +33612345678 (pas d'espace ni de parenthèses)
nic.ua utilise le portail APU (Activating Personal User) pour les domaines .pp.ua.
graph TD
A["APU Portal<br/>apu.drs.ua/en/"] -->|Cliquez Telegram| B["Formulaire avec<br/>champ téléphone"]
B -->|Entrez +33612345678| C["Message de confirmation"]
C -->|Scannez QR ou<br/>cliquez lien| D["Bot Telegram"]
D -->|Écrivez /start| E["Bot répond avec<br/>code activation"]
E -->|Copiez le code| F["Retour à APU"]
F -->|Collez le code| G["Domaine activé ✅"]
+33612345678@ppuabot/startABC123DEF456)✅ Votre domaine est maintenant activé !
.pp.ua avec le statut "Active"⚠️ Utilisez une adresse email que vous contrôlez - vous en aurez besoin pour les étapes suivantes.
Un email de confirmation vous sera envoyé. Cliquez sur le lien "Verify email" pour activer votre compte.
Une fois inscrit et connecté, vous accédez au Cloudflare Dashboard : https://dash.cloudflare.com/
votredomaine.pp.uaCloudflare vous présente plusieurs plans :
| Plan | Coût | Fonctionnalités |
|---|---|---|
| Free | Gratuit | DNS, SSL/TLS, accès basique |
| Pro | 20 $/mois | Analytics, WAF avancé, etc. |
| Business | 200 $/mois | Support prioritaire, etc. |
✅ Sélectionnez le plan "Free" - il est largement suffisant pour ce TP.
ATTENTION : Une option vous proposera d'importer les enregistrements DNS existants.
Manually enter DNS records
C'est important! Nic.ua a mis en place des enregistrements de "parking" qui contiennent des redirections indésirables.
✅ Laissez la zone vide - vous la remplissez plus tard.
Cliquez sur "Continue".
Une nouvelle page affiche vos DNS primaire et secondaire Cloudflare. Exemple :
DNS Primaire : arthur.ns.cloudflare.com
DNS Secondaire : nina.ns.cloudflare.com
⚠️ NOTEZ CES DEUX ADRESSES - vous en aurez besoin à l'étape suivante.
Vous pouvez les copier/coller dans un fichier texte ou un bloc-notes.
# Exemple à sauvegarder :
Mon Domaine: monportfolio.pp.ua
Cloudflare DNS:
Primaire: arthur.ns.cloudflare.com
Secondaire: nina.ns.cloudflare.com
Cliquez sur "Continue" pour terminer la configuration de la zone.
.pp.uaDans la page de gestion du domaine, cliquez sur l'engrenage à droite de votre domaine, puis sélectionnez "NS-servers".
Vous verrez actuellement les DNS de nic.ua (DNS de parking) :
ns1.nic.ua
ns2.nic.ua
ns3.nic.ua
Remplacez-les par les DNS de Cloudflare que vous avez notés à l'étape 4.4 en choisissant l'option Custom Name Servers :
arthur.ns.cloudflare.com (DNS Primaire)
nina.ns.cloudflare.com (DNS Secondaire)
graph LR
A["nic.ua<br/>DNS avant"] -->|ns1, ns2, ns3.nic.ua| B["Parking nic.ua"]
A -->|Modification| C["nic.ua<br/>DNS après"]
C -->|arthur, nina.cloudflare.com| D["Cloudflare DNS ✅"]
⏱️ Important : La propagation des DNS peut prendre 15 minutes à 48 heures. Généralement, c'est effectif sous 30 minutes.
Vous pouvez vérifier la propagation avec cet outil : https://dnschecker.org/
NSarthur.ns.cloudflare.com et nina.ns.cloudflare.comUn formulaire de création de token s'affiche. Vous pouvez :
Option A : Créer un token personnalisé (recommandé)
Zone.Zone.ReadZone.DNS.EditPages.Build.EditAccount.Pages.EditOption B : Utiliser le template prédéfini
Cloudflare propose un template pour "Pages Deploy" - c'est le plus simple pour débuter.
Copiez le token généré (exemple : 6d8f8c9a1b2c3d4e5f6g7h8i9j0k1l2m).
a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6)# Vos secrets à sauvegarder temporairement :
CLOUDFLARE_API_TOKEN: 6d8f8c9a1b2c3d4e5f6g7h8i9j0k1l2m
CLOUDFLARE_ACCOUNT_ID: a1b2c3d4e5f6g7h8i9j0k1l2m3n4o5p6
⚠️ IMPORTANT : Vous allez ajouter ces secrets au niveau de votre dépôt GitHub - ils devront être configurés pour chaque projet.
Secret 1 :
Name: CLOUDFLARE_API_TOKEN
Value: (collez votre token)
Secret 2 :
Name: CLOUDFLARE_ACCOUNT_ID
Value: (collez votre account ID)
✅ Ces secrets sont maintenant disponibles dans tous vos dépôts GitHub !
Avant de continuer, vous devez avoir un fichier ZIP contenant les fichiers compilés de votre site web (généralement le dossier dist, public, ou build).
site.zip ou un nom de votre choixDans Cloudflare, glissez-déposez votre fichier ZIP dans la zone prévue à cet effet.
Définissez le nom de votre projet (ex: mon-portfolio) dans la zone dédiée.
Cliquez sur "Deploy".
Attendez quelques secondes que le déploiement se termine.
Une fois terminé, vous verrez le nom de votre projet Pages. Exemple : flow-dilution, mon-portfolio, etc.
Ce nom sera utile pour les workflows GitHub Actions.
.github/workflows/deploy.yml (ou le nom de votre workflow créé précédemment)Avant l'étape de déploiement, ajoutez ces nouvelles étapes :
- name: Tell CF that the production branch is the main branch
continue-on-error: true
shell: bash
run: |
# Adapt the project name to your Cloudflare Pages project
curl --request PATCH \
"https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/mon-portfolio" \
--header "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
--header "Content-Type: application/json" \
--data "{\"production_branch\": \"main\"}" || true
- name: Publish to Cloudflare Pages
uses: sctg-development/pages-action-without-url@v2
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
projectName: mon-portfolio # Change with your Cloudflare Pages project name
directory: dist # Adapt to your build output directory
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
Modifiez ces trois lignes avec vos propres informations :
# Nom de votre projet Cloudflare Pages
projectName: mon-portfolio
# Nom de votre projet Cloudflare Pages (même valeur)
"...pages/projects/mon-portfolio"
# Répertoire contenant vos fichiers compilés
directory: dist
Comment trouver ces valeurs :
dist, public, ou build)Voici un exemple complet d'un workflow avec GitHub Pages ET Cloudflare Pages :
name: Deploy to GitHub Pages
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
environment: github-pages
permissions:
contents: read
pages: write
id-token: write
steps:
- name: Checkout
uses: actions/checkout@v6
- name: Setup Pages
uses: actions/configure-pages@v4
- name: Upload artifact
uses: actions/upload-pages-artifact@v4
with:
path: .
- name: Deploy to GitHub Pages
id: deployment
uses: actions/deploy-pages@v4
- name: Tell CF that the production branch is the main branch
continue-on-error: true
shell: bash
run: |
curl --request PATCH \
"https://api.cloudflare.com/client/v4/accounts/${{ secrets.CLOUDFLARE_ACCOUNT_ID }}/pages/projects/mon-portfolio" \
--header "Authorization: Bearer ${{ secrets.CLOUDFLARE_API_TOKEN }}" \
--header "Content-Type: application/json" \
--data "{\"production_branch\": \"main\"}" || true
- name: Publish to Cloudflare Pages
uses: sctg-development/pages-action-without-url@v2
with:
apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
projectName: mon-portfolio
directory: dist
gitHubToken: ${{ secrets.GITHUB_TOKEN }}
feat: add Cloudflare Pages deploymentVotre workflow est mis à jour ! À chaque push sur main, votre site sera automatiquement déployé sur GitHub Pages ET Cloudflare Pages.
Maintenant, vous devez ajouter un enregistrement DNS qui pointe votre domaine vers Cloudflare Pages.
Vous allez créer un enregistrement CNAME :
Type: CNAME
Name: @ (ou votre domaine complet)
Content: votredomaine.pp.ua.pages.cloudflare.com
TTL: Auto
Proxy: Proxied (bouton orange)
Exemple détaillé :
Type: CNAME
Name: monportfolio.pp.ua
Content: monportfolio.pp.ua.pages.cloudflare.com
TTL: Auto
Proxy: Proxied
⚠️ Important : Assurez-vous que le bouton "Proxy" est sur "Proxied" (orange) et non "DNS only" (gris).
Cliquez sur "Save".
monportfolio.pp.ua✅ Votre domaine est maintenant pointé vers Cloudflare Pages !
Après avoir ajouté l'enregistrement CNAME, attendez quelques minutes pour la propagation DNS.
Vous pouvez vérifier avec https://dnschecker.org/.
https://votredomaine.pp.uaVous devriez voir votre site s'afficher !
✅ Félicitations ! Votre site est maintenant publié sur Cloudflare Pages avec un domaine personnel .pp.ua !
Cliquez sur le cadenas 🔒 dans la barre d'adresse. Vous devriez voir :
Secure
Certificate is valid
Issued by: Cloudflare Inc
Cloudflare génère automatiquement un certificat SSL/TLS gratuit pour votre domaine.
.pp.ua ne s'active pasProblème : Le code d'activation via Telegram ne s'affiche pas ou n'arrive pas.
Solutions :
+33612345678 (sans espaces)Cause : Après 48h, le domaine ne pointe toujours pas vers Cloudflare.
Solutions :
Cause : mondomaine.pp.ua retourne une erreur 404 ou "Project not found".
Solutions :
projectName de votre workflowmondomaine.pp.ua.pages.cloudflare.comCause : Le workflow GitHub Actions échoue avec une erreur d'authentification Cloudflare.
Solutions :
CLOUDFLARE_API_TOKEN et CLOUDFLARE_ACCOUNT_IDCause : Le site s'affiche mais sans CSS/images.
Solutions :
directory dans le workflow correspond au bon dossier de buildnpm run build génère bien tous les fichiers dans le directorygraph TB
A["GitHub Repository"] -->|Push| B["GitHub Actions Workflow"]
B -->|npm run build| C["Build Output<br/>dist/"]
C -->|Deploy| D["GitHub Pages"]
C -->|Deploy| E["Cloudflare Pages"]
F["nic.ua<br/>Domain Registry"] -->|DNS: CloudFlare| G["Cloudflare DNS"]
G -->|CNAME| E
H["User Browser"] -->|https://mondomaine.pp.ua| I["Cloudflare Network"]
I -->|CDN/Cache| E
I -->|SSL/TLS| J["Secure Connection 🔒"]
# Cloner votre dépôt
git clone https://github.com/votreusername/votreprojet.git
# Vérifier le statut
git status
# Ajouter des modifications
git add .
# Committer avec un message
git commit -m "feat: update site content"
# Pousser vers GitHub (déclenche le workflow)
git push origin main
# Voir l'historique des commits
git log --oneline
| Ressource | Lien | Utilité |
|---|---|---|
| nic.ua | https://nic.ua/ | Gérer votre domaine .pp.ua |
| APU Portal | https://apu.drs.ua/en/ | Activer votre domaine via Telegram/SMS |
| Cloudflare | https://dash.cloudflare.com/ | Dashboard principal |
| Cloudflare Pages | https://pages.cloudflare.com/ | Documentation Pages |
| DNS Checker | https://dnschecker.org/ | Vérifier la propagation DNS |
| GitHub Actions | https://docs.github.com/actions | Documentation des workflows |
| Telegram | https://telegram.org/ | Chat pour l'activation |
# Vérifier que votre token fonctionne
curl -X GET "https://api.cloudflare.com/client/v4/user/tokens/verify" \
-H "Authorization: Bearer VOTRE_TOKEN" \
-H "Content-Type: application/json"
# Lister vos projets Pages
curl -X GET "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects" \
-H "Authorization: Bearer VOTRE_TOKEN" \
-H "Content-Type: application/json"
# Vérifier le statut d'un déploiement
curl -X GET "https://api.cloudflare.com/client/v4/accounts/ACCOUNT_ID/pages/projects/PROJECT_NAME/deployments" \
-H "Authorization: Bearer VOTRE_TOKEN" \
-H "Content-Type: application/json"
Vérifiez que vous avez bien accompli toutes les étapes :
.pp.ua créé et activé sur nic.uaCLOUDFLARE_API_TOKEN et CLOUDFLARE_ACCOUNT_ID ajoutéshttps://votredomaine.pp.uamainUne fois à l'aise avec les bases, vous pourrez apprendre :
Les Workers Cloudflare : Exécuter du code JavaScript à la périphérie du réseau
// Exemple de Worker simple
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request))
})
Les redirections et règles de page : Configurer des redirections 301/302 dans Cloudflare
Le cache avancé : Optimiser les performances avec les règles de cache Cloudflare
Les domaines multiples : Pointer plusieurs domaines vers le même projet
Les environnements de prévisualisation : Déployer des branches de développement
Pour pratiquer, essayez de :
blog.votredomaine.pp.uaCLOUDFLARE_API_TOKEN, il donne accès à votre compteÀ la fin de ce TP, vous devriez être capable de :
Félicitations ! Vous venez de franchir une nouvelle étape importante dans votre parcours de développeur web.
Vous avez appris à :
Ces compétences sont utilisées quotidiennement par les développeurs professionnels et les équipes DevOps dans le monde entier. Vous disposez maintenant d'une infrastructure de déploiement gratuite et professionnelle !
"Any sufficiently advanced technology is indistinguishable from magic."
— Arthur C. Clarke
Mais maintenant, vous savez que ce n'est pas de la magie, c'est juste du DNS bien configuré ! 😉
Bon développement et bonne continuation ! 🚀
Cloudflare Pages Documentation - developers.cloudflare.com/pages
Cloudflare DNS Documentation - developers.cloudflare.com/dns
GitHub Actions Documentation - docs.github.com/actions
nic.ua Documentation - nic.ua/en/help
Cloudflare Learning Center - cloudflare.com/learning
DNS Checker - dnschecker.org
SSL Labs - ssllabs.com/ssltest
Cloudflare Community - community.cloudflare.com
GitHub Community - github.community
Stack Overflow - Cloudflare - stackoverflow.com/questions/tagged/cloudflare
Auteur : Ronan LE MEILLAT - SCTG Development
Audience : Étudiant en BUT R&T
Version du document : 1.0
Dernière mise à jour : Janvier 2026
Licence : CC BY-SA 4.0