Comment les domaines fonctionnent avec Cmssy headless

Cmssy est un CMS headless avec un éditeur visuel. Votre contenu vit dans l'admin Cmssy et est servi via l'API de diffusion, tandis que votre site réel est une application Next.js (App Router) que vous construisez avec @cmssy/react et @cmssy/next et que vous déployez vous-même (par exemple sur Vercel). Cmssy n'héberge pas votre site.

Comme le déploiement vous appartient, votre domaine personnalisé pointe vers votre hébergeur, pas vers Cmssy. Vous ajoutez le domaine là où votre site est déployé, configurez le DNS chez votre registrar, et votre hébergeur émet le certificat SSL. Côté Cmssy, vous définissez la Preview URL de l'espace de travail pour que l'éditeur encadre votre site déployé pour l'édition visuelle.

Pourquoi utiliser un domaine personnalisé

Utiliser un domaine personnalisé pour votre site headless offre plusieurs avantages importants :

• Professionnalisme — Un domaine personnalisé comme yourcompany.com paraît bien plus professionnel qu'une URL de déploiement par défaut. Il montre aux visiteurs que vous prenez votre présence en ligne au sérieux.
• Image de marque — Votre domaine fait partie de votre identité de marque. Un domaine mémorable renforce la reconnaissance de votre marque à chaque visite ou partage de votre URL.
• Avantages SEO — Les moteurs de recherche favorisent les domaines personnalisés établis. Avec le temps, votre domaine gagne en autorité et améliore votre positionnement dans les résultats de recherche.
• Adresses e-mail assorties — Avec un domaine personnalisé, vous pouvez utiliser des adresses e-mail assorties (par ex. hello@yourcompany.com) pour une expérience de marque cohérente et digne de confiance.

Prérequis

Avant de commencer, assurez-vous d'avoir :

• Un site Cmssy déployé — Une application Next.js connectée à votre espace de travail avec @cmssy/react et @cmssy/next. Consultez le guide d'installation et le quickstart si vous n'avez pas encore déployé.
• Un compte d'hébergement — Là où vous avez déployé votre site (par ex. Vercel). Les domaines personnalisés et le SSL y sont gérés.
• Un domaine enregistré chez n'importe quel registrar — Vous pouvez utiliser Cloudflare Registrar (tarification au prix coûtant), Namecheap, Porkbun ou tout autre registrar de domaines.

Étape 1 : Déployez votre site headless

Avant d'attacher un domaine, assurez-vous que votre site est construit et déployé :

1. Construisez votre application Next.js avec les blocs Cmssy en utilisant @cmssy/react et @cmssy/next.
2. Déployez-la chez votre hébergeur (par exemple, poussez vers un dépôt Git connecté à Vercel).
3. Confirmez que le déploiement est en ligne à son URL par défaut (par ex. your-site.vercel.app).

C'est vers cette application déployée que pointera votre domaine personnalisé.

Étape 2 : Ajoutez votre domaine chez votre hébergeur

Dans le tableau de bord de votre hébergeur (Vercel en exemple) :

1. Ouvrez votre projet et allez dans Settings → Domains.
2. Cliquez sur Add et saisissez votre nom de domaine, par exemple : example.com.
3. Ajoutez aussi la variante www si vous la voulez : www.example.com.

Votre hébergeur affichera alors les enregistrements DNS exacts à configurer à l'étape suivante.

Étape 3 : Configurez les enregistrements DNS

Rendez-vous dans le panneau de gestion DNS de votre registrar et ajoutez les enregistrements fournis par votre hébergeur. Pour Vercel, ils ressemblent généralement à :

L'enregistrement CNAME pour www pointe votre sous-domaine www vers votre hébergeur. L'enregistrement A pour le domaine racine (@) pointe l'apex vers l'IP de votre hébergeur. Utilisez toujours les valeurs exactes affichées dans le tableau de bord de votre hébergeur — elles peuvent varier selon les fournisseurs et dans le temps.

Étape 4 : Vérifiez le domaine

Après avoir ajouté les enregistrements DNS :

1. Retournez à la section Domains dans le tableau de bord de votre hébergeur.
2. Votre hébergeur vérifie les enregistrements automatiquement et marque le domaine comme valide dès qu'ils résolvent.

La propagation DNS peut prendre jusqu'à 48 heures, mais dans la plupart des cas elle se termine en 15 à 30 minutes. Si le domaine apparaît comme invalide, attendez un peu plus longtemps et revérifiez.

Étape 5 : Certificat SSL

Une fois que votre domaine résout, votre hébergeur provisionne le SSL automatiquement — Cmssy n'intervient pas dans cette étape :

• Provisionnement SSL automatique — Les hébergeurs comme Vercel émettent un certificat (par ex. via Let's Encrypt) pour votre domaine.
• HTTPS activé par défaut — Tout le trafic est automatiquement redirigé vers HTTPS.
• Aucune configuration manuelle nécessaire — Le renouvellement du certificat est géré par votre hébergeur.

Votre site sera accessible via https://yourdomain.com quelques minutes après la résolution du domaine.

Étape 6 : Définissez la Preview URL de Cmssy

Pour que l'éditeur visuel encadre le bon site, pointez Cmssy vers votre domaine en production :

1. Connectez-vous à votre tableau de bord admin Cmssy.
2. Allez dans Settings → Headless.
3. Définissez la Preview URL sur votre site déployé (par ex. https://yourdomain.com).

Désormais, l'éditeur Cmssy charge votre site déployé pour une édition visuelle en contexte, tandis que le contenu continue d'être servi par l'API de diffusion.

Fournisseurs DNS courants

Voici de brèves instructions pour les registrars de domaines populaires. Dans tous les cas, utilisez les valeurs exactes fournies par votre hébergeur.

GoDaddy

1. Allez dans Mes produits → sélectionnez votre domaine → DNS.
2. Cliquez sur Ajouter un enregistrement et saisissez les enregistrements CNAME et A de votre hébergeur.
3. Enregistrez les modifications.

Namecheap

1. Allez dans Domain List → cliquez sur Manage à côté de votre domaine.
2. Sélectionnez l'onglet Advanced DNS.
3. Ajoutez les enregistrements CNAME et A.
4. Enregistrez toutes les modifications.

Cloudflare

1. Sélectionnez votre domaine dans le tableau de bord Cloudflare.
2. Allez dans DNS → Records.
3. Ajoutez l'enregistrement CNAME en mode DNS only (icône de nuage gris — non proxifié).
4. Ajoutez l'enregistrement A.

Porkbun

1. Allez dans Account → Domain Management → sélectionnez votre domaine.
2. Ouvrez l'éditeur DNS Records.
3. Ajoutez les enregistrements CNAME et A.
4. Enregistrez.

Dépannage

Le domaine ne résout pas

• Vérifiez la propagation DNS — Utilisez des outils comme dig ou nslookup dans votre terminal, ou des outils en ligne comme whatsmydns.net, pour confirmer que vos enregistrements se sont propagés.
• Confirmez que les valeurs correspondent à votre hébergeur — Revérifiez les valeurs CNAME/A par rapport à ce qu'affiche le panneau Domains de votre hébergeur.
• Attendez plus longtemps — La propagation peut prendre jusqu'à 48 heures dans de rares cas. Soyez patient.

Problèmes SSL

• Proxy CDN en conflit — Si vous utilisez Cloudflare en mode proxy, cela peut entrer en conflit avec le provisionnement SSL de votre hébergeur. Passez en mode DNS only pour que votre hébergeur puisse émettre le certificat.

WWW vs domaine racine

• www.example.com et example.com doivent tous deux être configurés chez votre hébergeur. Ajoutez à la fois le CNAME (pour www) et l'enregistrement A (pour la racine) afin que les visiteurs puissent atteindre votre site quelle que soit l'URL utilisée.

L'éditeur affiche le mauvais site

• Si l'éditeur Cmssy encadre une URL ancienne ou par défaut, mettez à jour la Preview URL dans Settings → Headless avec votre domaine en production.

Bonnes pratiques

• Configurez toujours www et la racine — Cela garantit que les visiteurs peuvent accéder à votre site depuis l'une ou l'autre variante d'URL.
• Configurez l'e-mail séparément — L'e-mail sur domaine personnalisé (par ex. via Google Workspace ou Zoho) nécessite des enregistrements MX distincts et n'entrera pas en conflit avec les enregistrements DNS pointant votre site vers votre hébergeur.
• Utilisez le mode DNS only avec Cloudflare — Le mode proxy de Cloudflare peut interférer avec les certificats SSL de votre hébergeur. Utilisez le nuage gris (DNS only) pour les enregistrements pointant vers votre hébergeur.
• Gardez la Preview URL synchronisée — Chaque fois que votre domaine de production change, mettez à jour la Preview URL dans Settings → Headless pour que l'éditeur continue d'encadrer le bon site.