Configurer un domaine personnalisé dans Azure Static Web Apps en préversionSetup a custom domain in Azure Static Web Apps Preview

Par défaut, Azure Static Web Apps fournit un nom de domaine généré automatiquement.By default, Azure Static Web Apps provides an auto-generated domain name. Cet article explique comment mapper un nom de domaine personnalisé avec une application Azure Static Web Apps.This article shows you how to map a custom domain name to an Azure Static Web Apps application.

PrérequisPrerequisites

  • Un nom de domaine achetéA purchased domain name
  • Accéder aux propriétés de configuration DNS de votre domaineAccess to the DNS configuration properties for your domain

Lors de la configuration des noms de domaine, les enregistrements « A » sont utilisés pour mapper les domaines racine (par exemple, example.com) à une adresse IP.When configuring domain names, "A" Records are used to map root domains (for instance, example.com) to an IP address. Les domaines racines doivent être mappés directement à une adresse IP, car la spécification DNS n’autorise pas le mappage d’un domaine à un autre.Root domains must be mapped directly to an IP address, because the DNS specification does not allow mapping of one domain to another.

Options de configuration DNSDNS configuration options

Il existe plusieurs types de configurations DNS disponibles pour une application.There are a few different types of DNS configurations available for an application.

PourIf you want to AlorsThen
Prendre en charge www.example.com ou blog.example.netSupport www.example.com or blog.example.net Mapper un enregistrement CNAMEMap a CNAME record
Prise en charge d’example.comSupport example.com Configurer un domaine racineConfigure a root domain
Diriger tous les sous-domaines vers www.example.comPoint all subdomains to www.example.com Mapper un domaine génériqueMap a wildcard

Mapper un enregistrement CNAMEMap a CNAME record

Un enregistrement CNAME mappe un domaine à un autre.A CNAME record maps one domain to another. Vous pouvez utiliser un enregistrement CNAME pour mapper www.example.com, blog.example.com ou un autre sous-domaine généré automatiquement fourni par Azure Static Web Apps.You can use a CNAME record to map www.example.com, blog.example.com, or any other sub-domain to the auto-generated domain that is provided by Azure Static Web Apps.

  1. Ouvrez le portail Azure et connectez-vous avec votre compte Azure.Open the Azure portal and sign in with your Azure account.

  2. Rechercher et sélectionner Static Web AppsSearch for and select Static Web Apps

  3. Dans la page Static Web Apps, sélectionnez le nom de votre application web.On the Static Web Apps page, select the name of your app.

  4. Cliquez sur Domaines personnalisés dans le menu.Click on Custom domains in the menu.

  5. Cliquez sur le bouton Ajouter.Click on the Add button

  6. Dans la fenêtre Domaines personnalisés, copiez l’URL dans le champ Valeur.In the Custom domains window, copy the URL in the Value field.

Configurer un fournisseur DNSConfigure DNS provider

  1. Connectez-vous au site web de votre fournisseur de domaine.Sign in to the website of your domain provider.

  2. Trouvez la page de gestion des enregistrements DNS.Find the page for managing DNS records. Chaque fournisseur de domaine ayant sa propre interface d’enregistrements DNS, consultez la documentation de votre fournisseur.Every domain provider has its own DNS records interface, so consult the provider's documentation. Recherchez les zones du site qui portent les mentions Nom de domaine, DNS ou Gestion du nom de serveur.Look for areas of the site labeled Domain Name, DNS, or Name Server Management.

  3. Vous trouvez généralement la page des enregistrements DNS en affichant vos informations de compte, puis en recherchant un lien comme Mes domaines.Often, you can find the DNS records page by viewing your account information, and then looking for a link such as My domains. Accédez à cette page et recherchez un lien nommé Fichier de zone, Enregistrements DNS ou Configuration avancée.Go to that page and then look for a link that is named similar to Zone file, DNS Records, or Advanced configuration.

    La capture d’écran suivante est un exemple d’une page d’enregistrements DNS :The following screenshot is an example of a DNS records page:

    Exemple de configuration de fournisseur DNS

  4. Créez un enregistrement CNAME avec les valeurs suivantes...Create a new CNAME record with the following values...

    ParamètreSetting ValeurValue
    TypeType CNAMECNAME
    HostHost wwwwww
    ValeurValue Coller à partir du presse-papiersPaste from your clipboard
    TTL (le cas échéant)TTL (if applicable) Laisser la valeur par défautLeave as default value
  5. Enregistrez les modifications avec votre fournisseur DNS.Save the changes with your DNS provider.

Valider CNAMEValidate CNAME

  1. Revenez à la fenêtre Domaines personnalisés dans le Portail Azure.Return to the Custom domains window in the Azure portal.

  2. Entrez votre domaine, y compris la partie www dans la section Valider le domaine personnalisé.Enter your domain, including the www portion in the Validate custom domain section.

  3. Cliquez sur le bouton Valider.Click the Validate button.

À présent que le domaine personnalisé est configuré, le fournisseur DNS peut prendre plusieurs heures pour propager les modifications dans le monde entier.Now that the custom domain is configured, it may take several hours for the DNS provider to propagate the changes worldwide. Vous pouvez vérifier l’état de la propagation en accédant à dnspropagation.net.You can check the status of the propagation by going to dnspropagation.net. Entrez votre domaine personnalisé, y compris la partie www, sélectionnez CNAME dans la liste déroulante, puis sélectionnez Démarrer.Enter your custom domain including the www, select CNAME from the drop-down, and select Start.

Si vos modifications DNS sont indiquées, le site web renvoie l’URL générée automatiquement de votre application Static Web App (par exemple, random-name-123456789c.azurestaticapps.net).If your DNS changes have populated, the website returns the auto-generated URL of your Static Web App (for instance, random-name-123456789c.azurestaticapps.net).

Configurer un domaine racineConfigure a root domain

Un domaine racine correspond à votre domaine moins n’importe quel sous-domaine, notamment www.Root domains are your domain minus any subdomain, including www. Par exemple, le domaine racine de www.example.com est example.com.For example, the root domain for www.example.com is example.com. Un tel domaine est également appelé domaine « APEX ».This is also known as an "APEX" domain.

Alors que la prise en charge du domaine racine n’est pas disponible pendant la préversion, vous pouvez consulter le billet de blog Configurer des domaines racines dans Azure Static Web Apps pour plus d’informations sur la configuration de la prise en charge du domaine racine avec une application Static Web App.While root domain support is not available during preview, you can see the blog post Configure root domains in Azure Static Web Apps for details on how to configure root domain support with a Static Web App.

Mapper un domaine génériqueMap a wildcard domain

Parfois, vous souhaitez que tout le trafic envoyé à un sous-domaine soit acheminé vers un autre domaine.Sometimes you want all traffic sent to a subdomain to route to another domain. Un exemple courant consiste à mapper tout le trafic de sous-domaines vers www.example.com.A common example is mapping all subdomain traffic to www.example.com. De cette façon, même si quelqu’un tape w.example.com au lieu de www.example.com, la requête est envoyée à www.example.com.This way, even if someone types w.example.com instead of www.example.com, the request is sent to www.example.com.

Configurer un fournisseur DNSConfigure DNS provider

  1. Connectez-vous au site web de votre fournisseur de domaine.Sign in to the website of your domain provider.

  2. Trouvez la page de gestion des enregistrements DNS.Find the page for managing DNS records. Chaque fournisseur de domaine ayant sa propre interface d’enregistrements DNS, consultez la documentation de votre fournisseur.Every domain provider has its own DNS records interface, so consult the provider's documentation. Recherchez les zones du site qui portent les mentions Nom de domaine, DNS ou Gestion du nom de serveur.Look for areas of the site labeled Domain Name, DNS, or Name Server Management.

  3. Vous trouvez généralement la page des enregistrements DNS en affichant vos informations de compte, puis en recherchant un lien comme Mes domaines.Often, you can find the DNS records page by viewing your account information, and then looking for a link such as My domains. Accédez à cette page et recherchez un lien nommé Fichier de zone, Enregistrements DNS ou Configuration avancée.Go to that page and then look for a link named similar to Zone file, DNS Records, or Advanced configuration.

    La capture d’écran suivante est un exemple d’une page d’enregistrements DNS :The following screenshot is an example of a DNS records page:

    Exemple de configuration de fournisseur DNS

  4. Créez un enregistrement CNAME avec les valeurs suivantes, en remplaçant www.example.com par votre nom de domaine personnalisé.Create a new CNAME record with the following values, replacing www.example.com with your custom domain name.

    ParamètreSetting ValeurValue
    TypeType CNAMECNAME
    HostHost *
    ValeurValue www.example.comwww.example.com
    TTLTTL Laisser la valeur par défautLeave as default value
  5. Enregistrez les modifications avec votre fournisseur DNS.Save the changes with your DNS provider.

À présent que le domaine générique est configuré, la propagation des changements à travers le monde peut prendre plusieurs heures.Now that the wildcard domain is configured, it may take several hours for the changes to propagate worldwide. Vous pouvez vérifier l’état de la propagation en accédant à dnspropagation.net.You can check the status of the propagation by going to dnspropagation.net. Entrez votre domaine personnalisé de domaine avec n’importe quel sous-domaine (sauf www), sélectionnez CNAME dans la liste déroulante, puis sélectionnez Démarrer.Enter your domain custom domain with any subdomain (other than www), select CNAME from the drop-down, and select Start.

Si vos modifications DNS sont renseignées, le site web renvoie votre domaine personnalisé configuré pour votre application Static Web App (par exemple, www.example.com).If your DNS changes have populated, the website returns your custom domain configured for your Static Web App (for instance, www.example.com).

Étapes suivantesNext steps