Acheter et configurer son nom de domaine

Retour à la liste des articles

21 septembre 2019

Une fois arrivé-e au bout du chapitre 9, ton site est accessible par n'importe qui sur Internet grâce à une adresse sous la forme https://juliequiz.herokuapp.com/. Cette adresse n'est pas facile à mémoriser et peu élégante, mais on peut heureusement la personnaliser. On va voir comment acheter ton propre nom de domaine et le faire pointer sur ton site, pour qu'il soit accessible via une jolie adresse telle que https://qui-sont-les-poissons.com/.

C'est quoi déjà le DNS ?

Le DNS, pour Domain Name Service ou service de noms de domaine en français, permet de faire correspondre des noms avec des adresses IP. C'est comme un annuaire téléphonique qui ferait correspondre des noms de personnes avec leur numéro de téléphone, à la différence qu'il s'agit ici de domaines (p.ex. geniesducode.com) plutôt que de personnes et d'adresses IP plutôt que de numéros de téléphone.

Actuellement, ton site est déjà disponible sur un sous-domaine du domaine herokuapp.com, par exemple juliequiz.herokuapp.com, parce qu'Heroku s'est occupé tout seul de faire pointer ce sous-domaine vers ton site.

Acheter le nom de domaine

Un nom de domaine se réserve auprès d'un bureau d'enregistrement (registrar en anglais). Il existe de nombreuses sociétés qui fournissent ce service, et le choix se fait généralement en fonction des extensions de noms de domaine qu'elles vendent (p.ex. .com, .net, .fr, etc), des prix, des conditions, et des services additionnels qu'elles fournissent. La location d'un nom de domaine est payante et se fait pour une durée limitée, en général 1 an au minimum, avec la possibilité de la renouveler. Le prix d'un nom de domaine dépend principalement de l'extension, et peut aller d'une dizaine d'euros (pour les extensions les plus répandues comme .com, .fr, .net etc.) à plusieurs centaines d'euros par année.

Dans cet article je te donnerai des indications pour Gandi parce que c'est celui que j'utilise habituellement, mais le concept est le même pour tous les bureaux d'enregistrement. Tu peux donc utiliser celui que tu souhaites, comme par exemple OVH ou Infomaniak, si tu ne souhaites pas utiliser Gandi.

La première étape est de réserver ton nom de domaine. Pour ce faire, rends-toi sur le site web du bureau d'enregistrement (par exemple gandi.net). Dans la barre de recherche principale, entre le nom de domaine que tu souhaites réserver:

Un nom de domaine peut contenir des lettres, des chiffres, et des traits d'union. Si le nom de domaine que tu souhaites réserver n'est pas disponible, tu pourras choisir une alternative, par exemple en utilisant une extension différente.

Clique sur l'icône de caddie pour ajouter le nom de domaine dans ton panier puis sur le bouton « Payer » en haut à droite de l'écran. Vérifie que le nom de domaine est bien celui que tu souhaites et choisis la durée de location (je te conseille de prendre seulement une année, tu pourras toujours le renouveler avant qu'il arrive à expiration), puis clique sur le bouton « Payer ».

Sur l'écran suivant, crée un compte puis continue le processus jusqu'au paiement. Une fois le nom de domaine réservé, tu pourras accéder à ton tableau de bord en cliquant sur le bouton « Voir la liste » à côté de ton nom de domaine, ou en te rendant sur admin.gandi.net.

Si tu essaies maintenant d'accéder au nom de domaine que tu viens d'acheter en entrant l'adresse dans ton navigateur, tu arriveras sur une page Gandi indiquant que le nom de domaine est réservé :

Si à la place tu as un message d'erreur de ton navigateur indiquant que le site ne peut pas être trouvé, réessaie dans quelques heures, les informations DNS mettent parfois du temps à être propagées.

Maintenant que le nom de domaine est réservé, il faut le faire pointer vers Heroku plutôt que vers cette page temporaire. Mais avant cela, il va falloir indiquer à Heroku que lorsqu'il recevra des requêtes HTTP qui concernent le domaine qui-sont-les-poissons.com, il devra les diriger vers notre application.

Ajouter le nom de domaine sur Heroku

Ouvre un terminal et rends-toi dans le dossier de ton projet (si la commande suivante ne fonctionne pas, essaie de remplacer Desktop par Bureau, ou réfère-toi à la page 280 du livre) :

# Sur Linux
$ cd ~/Bureau/web/mysite

# Sur Mac
$ cd ~/Desktop/web/mysite

# Sur Windows
> cd %HomePath%\Bureau\web\mysite

Lance maintenant la commande heroku domains:add qui-sont-les-poissons.com (en remplaçant qui-sont-les-poissons.com par le nom de domaine que tu as réservé). Tu devrais voir un message indiquant que le nom de domaine a bien été ajouté :

$ heroku domains:add qui-sont-les-poissons.com
Adding qui-sont-les-poissons.com to ⬢ juliequiz... done
 ▸    Configure your app's DNS provider to point to the DNS Target environmental-rambutan-y5m4s7vn8mr2snqqk4bqsgnr.herokudns.com.
 ▸    For help, see https://devcenter.heroku.com/articles/custom-domains

The domain qui-sont-les-poissons.com has been enqueued for addition
 ▸    Run heroku domains:wait 'qui-sont-les-poissons.com' to wait for completion

Il est probable que tu aies un message indiquant que tu dois vérifier ton compte. Dans ce cas, suis les instructions en te rendant sur heroku.com/verify. Tu devras entrer un numéro de carte de crédit pour pouvoir continuer, je ne sais pas pourquoi Heroku demande ça et ça m'embête probablement autant que toi, mais rassure-toi : le fait d'associer un nom de domaine avec ton application est bien gratuit et rien ne te sera facturé. Une fois ton compte vérifié, réessaie de lancer la commande ci-dessus.

Note bien le nom de domaine indiqué par Heroku (ici environmental-rambutan-y5m4s7vn8mr2snqqk4bqsgnr.herokudns.com), tu en auras besoin plus tard. Si tu l'as perdu tu peux le retrouver grâce à la commande heroku domains.

Maintenant que ton application Heroku est configurée pour accepter les requêtes vers ton nom de domaine personnalisé, il ne reste plus qu'à configurer les enregistrements DNS pour faire pointer ton nom de domaine vers Heroku.

Comprendre les enregistrements DNS

Pour modifier les enregistrements DNS de ton nom de domaine, rends-toi sur ton tableau de bord Gandi puis clique sur « Nom de domaine » dans le menu de gauche et sélectionne le nom de domaine que tu viens d'acheter. Clique maintenant sur « Enregistrements DNS » dans le menu du haut. Tu verras les enregistrements pour ton domaine qui ont été crées automatiquement par Gandi.

Ces informations cryptiques définissent l'inscription du nom de domaine qui-sont-les-poissons.com dans l'annuaire. Les deux lignes suivantes sont les plus importantes dans le cas présent :

• La première ligne, @ A 10800 217.70.184.38, indique que le nom de domaine qui-sont-les-poissons.com pointe sur l'adresse IP 217.70.184.38. Dans la configuration DNS, le symbole @ est une façon courte d'écrire le nom de domaine principal, autrement dit qui-sont-les-poissons.com. Cette adresse IP correspond au serveur Gandi qui affiche le message « Ce nom de domaine a été réservé » que tu viens de voir.
• La dernière ligne, www CNAME 10800 webredir.vip.gandi.net, indique que le sous-domaine www, autrement dit www.qui-sont-les-poissons.com, pointe sur le domaine webredir.vip.gandi.net.

Les noms de domaine qui-sont-les-poissons.com et www.qui-sont-les-poissons.com sont donc bien deux noms de domaine différents. Tu devras donc les configurer les deux pour que ton site soit accessible aussi bien via www.qui-sont-les-poissons.com que qui-sont-les-poissons.com.

Plutôt que de faire pointer ces deux noms de domaine vers ton site, ce qui le rendrait accessible via deux adresses différentes (une fois sans le www et une fois avec le www), on va définir qui-sont-les-poissons.com comme étant le domaine principal. L'autre domaine, www.qui-sont-les-poissons.com, va rediriger vers le domaine principal qui-sont-les-poissons.com.

Ça tombe bien, c'est déjà ce que fait la configuration par défaut de ton domaine. Il nous suffira donc de modifier seulement l'enregistrement du domaine principal et de configurer la redirection.

Configurer ton domaine

Résumons les choses à faire dans la configuration DNS :

1. Faire pointer le nom de domaine qui-sont-les-poissons.com sur Heroku ;
2. Rediriger www.qui-sont-les-poissons.com sur qui-sont-les-poissons.com.

Commençons par faire pointer le nom de domaine sur Heroku. Supprime la première entrée DNS de la liste, celle qui pointe sur l'adresse IP 217.70.184.38. Clique ensuite sur le bouton « Ajouter » et ajoute l'enregistrement suivant :

• Type : ALIAS ;
• TTL : 10800 ;
• Nom : @ ;
• Nom d'hôte : le nom que tu as mis de côté dans la partie « Faire pointer le nom de domaine sur Heroku », par exemple environmental-rambutan-y5m4s7vn8mr2snqqk4bqsgnr.herokudns.com. en faisant bien attention de mettre un point à la fin, c'est très important !

Tu devrais voir l'enregistrement suivant dans la liste (avec le point à la fin de la valeur) :

Si tu te rends sur ton nom de domaine sans www (par exemple qui-sont-les-poissons.com) il est probable que tu atterrisses sur la page indiquant que le domaine a été réservé plutôt que sur ton fameux quiz, parce que la réponse DNS a été mise en cache (le fameux TTL). Le TTL par défaut est de trois heures, donc attends au moins trois heures puis réessaie.

Pendant ce temps, configurons la redirection. Toujours dans le panneau de contrôle de ton domaine, clique sur « Redirections Web » dans le menu supérieur, puis sur le bouton « Créer ».

Remplis le formulaire comme ci-dessous pour rediriger la version www de ton site sur la version sans www.

Essaie maintenant d'accéder à ton site avec www (par exemple www.qui-sont-les-poissons.com), tu verras que tu es bien redirigé-e sur la version sans www. La redirection fonctionne !

En résumé

Un nom de domaine se loue auprès d'un bureau d'enregistrement. On peut ensuite créer des enregistrements DNS, qui donnent des informations sur le domaine ou ses sous-domaines, comme l'adresse IP sur laquelle ils pointent. Dans le cas de Heroku, le nom de domaine doit aussi être configuré du côté de Heroku à l'aide de la commande heroku domains:add.

Plus de détails...

Tu n'as pas besoin de connaître tous les détails de la configuration DNS pour faire pointer ton nom de domaine sur ton site, mais si tu veux en savoir plus, voici quelques informations supplémentaires qui t'aideront à comprendre les enregistrements DNS.

La colonne nom indique le domaine, qui peut être soit un sous-domaine, soit un nom de domaine complet. Un sous-domaine est un préfixe qui sera ajouté à ton nom de domaine, par exemple www.qui-sont-les-poissons.com représente le sous-domaine www de qui-sont-les-poissons.com. Tu peux créer tous les sous-domaines que tu veux sans rien avoir à payer de plus : cela fait partie de ton nom de domaine. Dans la configuration par défaut, tu verras que Gandi a automatiquement créé des enregistrements pour qui-sont-les-poissons.com, blog.qui-sont-les-poissons.com, webmail.qui-sont-les-poissons.com et www.qui-sont-les-poissons.com.

La colonne type indique le type d'enregistrement. Les types d'enregistrements principaux sont :

• A (ou AAAA) pour indiquer que l'enregistrement pointe sur une adresse IP ;
• CNAME (ou ALIAS) pour indiquer que l'enregistrement pointe sur un autre nom de domaine ;
• TXT pour indiquer que l'enregistrement contient une valeur texte ;
• MX (pour mail exchange) pour indiquer que l'enregistrement pointe sur un serveur mail.

La colonne TTL (pour Time To Live) indique la durée de mise en cache de l'enregistrement. Pour limiter le trafic sur Internet, les enregistrements DNS sont conservés en mémoire à plusieurs niveaux (dans ton navigateur, dans ton système d'exploitation, chez ton fournisseur d'accès à Internet, etc.)

La colonne valeur indique la cible de l'enregistrement (ou la valeur texte pour les enregistrements de type TXT), autrement dit l'adresse ou le domaine sur lequel l'enregistrement pointe. Dans le cas des enregistrements de type MX, la cible est précédée d'une information de priorité, qui indique aux programmes qui envoient les mails d'essayer les cibles dans l'ordre de priorité.

Glossaire

Extension : l'extension d'un nom de domaine est la partie qui se trouve à la fin d'un nom de domaine. Par exemple .com, .net, etc.

Sous-domaine : un sous-domaine est la partie qui se trouve au début d'un nom de domaine. Par exemple www.geniesducode.com est le sous-domaine www du domaine geniesducode.com.

TTL : durée de mise en cache d'un enregistrement DNS.

Enregistrement DNS : inscription dans « l'annuaire » qui donne des informations sur un domaine ou sous-domaine. Il existe plusieurs types d'enregistrements suivant l'information que l'on veut indiquer (p.ex. A pour pointer sur une adresse IP).