Installer et configurer StackPath pour les sites hébergés chez Kinsta

Le CDN de StackPath est hautement personnalisable, y compris des fonctionnalités telles que la protection du contenu et l’optimisation des ressources. Une fois que vous avez lancé votre site sur Kinsta, si vous souhaitez utiliser le CDN de StackPath au lieu de celui de Kinsta, ce guide vous expose la marche à suivre.

Pour WordPress, StackPath propose deux configurations différentes, Full Site Integration et Static Assets Integration. Full Site Integration met en cache l’ensemble du site dans le même domaine, tandis que Static Assets Integration utilise un sous-domaine pour mettre en cache uniquement le contenu statique. Ces deux configurations sont compatibles avec notre intégration Cloudflare.

Vous aurez besoin d’un sous-domaine pour utiliser l’intégration des ressources statiques, mais ce sous-domaine ne doit pas être ajouté à la liste des domaines de votre site dans MyKinsta car nous ajoutons automatiquement le sous-domaine wildcard (*.example.com) lorsque vous ajoutez votre domaine dans MyKinsta. Vous devrez également utiliser une extension telle que CDN Enabler pour réécrire les URL des ressources de l’adresse périphérique StackPath vers votre sous-domaine. Nous en parlerons un peu plus dans la section Intégration des ressources statiques ci-dessous.

À part la nécessité d’un sous-domaine pour l’intégration des ressources statiques, les réglages et options de StackPath pour les deux intégrations sont les mêmes pour des raisons de compatibilité avec notre intégration Cloudflare. Pour l’intégration des ressources statiques, vous aurez également besoin d’une extension pour modifier les URL de vos ressources statiques, que nous aborderons dans la section Intégration des ressources statiques ci-dessous.

Démarrer avec StackPath CDN

Si vous n’avez pas encore de compte StackPath, vous pouvez vous inscrire sur leur page d’inscription. Ensuite, connectez-vous à votre compte StackPath et cliquez sur le bouton Créer un site dans la section Sites.

Sur la page Sélectionner une intégration, cliquez sur le bouton correspondant au type d’intégration que vous souhaitez configurer, Site complet ou Ressources statiques.

Intégration complète de site

Première étape

Une fois que vous avez sélectionné Full Site Integration et que vous êtes passé à la page suivante, entrez votre nom de domaine, sélectionnez les services que vous souhaitez utiliser avec votre site, puis cliquez sur le bouton Définissez votre origine.

Étape 2

Sur la page Définissez votre origine, vérifiez que l’adresse IP que StackPath a automatiquement générée pour votre origine correspond à l’adresse IP de votre site dans MyKinsta.

Si votre site Kinsta est protégé par un mot de passe, sélectionnez Oui pour « L’adresse de votre origine est-elle protégée par un mot de passe ? » Ensuite, saisissez le nom d’utilisateur et le mot de passe à utiliser pour l’authentification afin que StackPath puisse accéder au contenu.

Il n’est pas nécessaire d’ajouter un domaine personnalisé ici puisque vous avez déjà défini le domaine de livraison à l’étape précédente.

Cliquez sur le bouton Confirmer l’adresse d’origine pour passer à la page suivante.

Étape 3

Pour la méthode SSL, l’utilisation du SSL gratuit fourni par StackPath est recommandée et n’interférera pas avec le SSL Cloudflare inclus avec notre intégration Cloudflare ici chez Kinsta.

Vous avez également la possibilité de télécharger un certificat SSL si votre site utilise un SSL personnalisé que vous avez acheté auprès d’un tiers.

Une fois que vous avez confirmé les domaines que vous voulez protéger avec SSL, cliquez sur le bouton Confirmer la méthode SSL.

Étape 4

Pour que le certificat SSL de StackPath soit émis, vous devez vérifier la propriété de votre domaine. Deux options sont disponibles, DNS Challenge ou HTTP Request. Nous utiliserons la méthode DNS Challenge dans cet exemple, avec notre DNS géré dans le DNS de Kinsta.

Si vous avez un fournisseur DNS différent (il peut s’agir de votre registraire ou d’un autre hôte DNS, selon l’endroit où vous avez pointé les serveurs de noms de votre domaine), les étapes peuvent être un peu différentes.

Cliquez sur chaque icône de copie (presse-papiers) à côté de Nom et Valeur pour copier les détails du CNAME personnalisé que vous devrez ajouter à vos enregistrements DNS pour vérification.

Pour ajouter le nouvel enregistrement CNAME dans le DNS de Kinsta, connectez-vous à MyKinsta et cliquez sur DNS dans la colonne de navigation latérale gauche.

1. Cliquez sur le domaine auquel vous voulez ajouter un enregistrement DNS.
2. Cliquez sur le bouton Ajouter un enregistrement DNS.
3. Cliquez sur l’onglet CNAME et ajoutez les détails de Hostname (Nom) et Poiner vers (Valeur) que vous avez copiés depuis la page Verify Domain Ownership de StackPath. Cliquez sur le bouton Ajouter un enregistrement DNS pour enregistrer votre nouvel enregistrement CNAME.

Remarque : selon le paramètre TTL de votre enregistrement DNS, la propagation de l’enregistrement DNS peut prendre de quelques minutes à quelques heures.

Étape 5

De retour dans StackPath, cochez la case à côté de « J’ai effectué l’une des étapes de validation ci-dessus pour vérifier que je suis propriétaire du domaine. » et cliquez sur le bouton Vérifier la propriété du domaine.

Étape 6

Une fois le DNS propagé, la propriété de votre domaine est vérifiée et vous verrez des informations sur le pointage de votre DNS vers StackPath. Cliquez sur l’icône de copie (presse-papiers) pour copier l’adresse IP indiquée.

Étape 7

Une fois de plus, nous vous montrerons comment faire cela dans le DNS de Kinsta. Ces étapes peuvent varier en fonction de votre fournisseur de DNS.

1. Si vous n’êtes pas déjà dans DNS dans MyKinsta, cliquez sur DNS dans la colonne de navigation latérale gauche.
2. Cliquez sur le domaine auquel vous voulez ajouter un enregistrement DNS.
3. Si vous avez déjà un enregistrement A existant pour votre domaine, cliquez sur l’icône Modifier (crayon) pour le mettre à jour avec la première adresse IP affichée sur StackPath. Sinon, cliquez sur le bouton Ajouter un enregistrement DNS.
   1. Laissez le nom d’hôte vide, sauf si vous ajoutez l’enregistrement A à un sous-domaine.
   2. Adresse IPv4 : L’adresse IP que vous avez copiée de StackPath.
   3. Cliquez sur le bouton Modifier un enregistrement DNS (mise à jour d’un enregistrement DNS) ou Ajouter un enregistrement DNS (ajout d’un nouvel enregistrement DNS) pour enregistrer votre enregistrement DNS.

      

      

Remarque : La propagation de vos enregistrements DNS peut prendre jusqu’à 1 heure.

Étape 8

De retour dans votre tableau de bord StackPath, cochez la case confirmant que vous avez terminé les étapes de mise à jour des DNS et cliquez sur le bouton Terminer la configuration.

Étape 9

Vous serez amené à la page d’aperçu de votre site dans StackPath. Vous devriez voir un enregistrement DNS supplémentaire qui doit être ajouté ou modifié pour le CNAME www (www.example.com). Cliquez sur l’icône de copie (presse-papiers) pour copier la valeur.

Étape 10

Une fois encore, nous allons vous montrer comment ajouter ou modifier cet enregistrement DNS dans le DNS de Kinsta. Ces étapes peuvent varier en fonction de votre fournisseur DNS.

1. Si vous avez déjà un enregistrement CNAME existant pour le nom d’hôte www, cliquez sur l’icône Modifier (crayon) pour le mettre à jour. Sinon, cliquez sur le bouton Ajouter un enregistrement DNS et sélectionnez l’onglet CNAME.
2. Nom d’hôte : www
3. Pointe vers : Le nom d’hôte vers lequel pointer www comme indiqué dans StackPath.
4. Cliquez sur le bouton Modifier l’enregistrement DNS (mise à jour d’un enregistrement DNS) ou sur le bouton Ajouter un enregistrement DNS (ajout d’un nouvel enregistrement DNS) pour enregistrer votre enregistrement DNS.

   

   

Remarque : La propagation de vos enregistrements DNS peut prendre jusqu’à 1 heure.

Étape 11

De retour dans votre tableau de bord StackPath, cliquez sur le bouton Revérifier les réglages DNS.

Votre site est maintenant connecté au CDN de StackPath, et vous êtes prêt à vérifier et configurer les paramètres (ci-dessous) pour terminer.

Intégration des ressources statiques

Étape 1

Une fois que vous avez sélectionné Static Assets Integration et avancé à la page suivante, saisissez le sous-domaine pour vos ressources statiques, assurez-vous que Content Delivery Network (CDN) est coché, et cliquez sur le bouton Configurer votre origine.

Étape 2

Sur la page Configurer votre origine, saisissez le nom de domaine principal de votre site dans le champ Nom d’hôte d’origine.

Si votre site Kinsta est protégé par un mot de passe, sélectionnez Oui pour « Votre adresse d’origine est-elle protégée par un mot de passe ? » Ensuite, saisissez le nom d’utilisateur et le mot de passe à utiliser pour l’authentification afin que StackPath puisse accéder au contenu.

Il n’est pas nécessaire d’ajouter un domaine personnalisé ici puisque vous avez déjà défini le domaine de livraison à l’étape précédente.

Cliquez sur le bouton Terminer la configuration pour passer à la page suivante.

Étape 3

Vous serez amené à la page Vue d’ensemble de votre site dans StackPath. De là, vous pouvez accéder à quelques étapes supplémentaires qui sont nécessaires pour terminer la configuration, en commençant par la configuration d’un certificat SSL pour votre sous-domaine. Pour que StackPath puisse servir en toute sécurité vos ressources statiques sur votre sous-domaine, vous devez valider le sous-domaine et ajouter un certificat SSL personnalisé dans StackPath. Cliquez sur le lien Cliquez ici pour configurer sous Configurer SSL pour commencer.

Étape 4

Sur la page EdgeSSL, cliquez sur le bouton Créer un certificat.

Étape 5

Le certificat dédié gratuit fourni par StackPath est recommandé et n’interférera pas avec le SSL Cloudflare inclus avec notre intégration Cloudflare ici chez Kinsta.

Vous avez également la possibilité de téléverser un certificat SSL si vous préférez utiliser un certificat SSL que vous avez acheté auprès d’un tiers.

Cliquez sur le bouton Générer sous Certificat dédié gratuit pour commencer à créer votre certificat personnalisé sur StackPath.

Étape 6

Sélectionnez votre sous-domaine personnalisé et cliquez sur le bouton Continuer vers la validation.

Étape 7

Pour que le certificat SSL de StackPath soit émis, vous devez vérifier la propriété de votre domaine. Deux options sont disponibles, DNS Challenge ou HTTP Request. Nous utiliserons la méthode DNS Challenge dans cet exemple, avec notre DNS géré dans le DNS de Kinsta.

Si vous avez un fournisseur DNS différent (il peut s’agir de votre registraire ou d’un autre hôte DNS, selon l’endroit où vous avez pointé les serveurs de noms de votre domaine), les étapes peuvent être un peu différentes.

Cliquez sur le lien Afficher les instructions à côté de Validation du défi DNS et cliquez sur chaque icône de copie (presse-papiers) à côté de Nom et valeur pour copier les détails du CNAME personnalisé que vous devrez ajouter à vos enregistrements DNS pour la vérification.

Pour ajouter le nouvel enregistrement CNAME dans le DNS de Kinsta, connectez-vous à MyKinsta et cliquez sur DNS dans la colonne de navigation latérale gauche.

1. Cliquez sur le domaine auquel vous voulez ajouter un enregistrement DNS.
2. Cliquez sur le bouton Ajouter un enregistrement DNS.
3. Cliquez sur l’onglet CNAME et ajoutez les détails de Nom d’hôte (nom) et Pointer vers (valeur) que vous avez copiés depuis la page Verify Domain Ownership de StackPath. Cliquez sur le bouton Ajouter un enregistrement DNS pour enregistrer votre nouvel enregistrement CNAME.

Remarque : selon le paramètre TTL de votre enregistrement DNS, la propagation de l’enregistrement DNS peut prendre de quelques minutes à quelques heures.

Étape 8

De retour dans StackPath, cliquez sur le bouton J’ai configuré mon DNS. Continuez. Sur la page EdgeSSL, vous devriez voir que votre certificat dédié gratuit est actif. Si ce n’est pas le cas, donnez au DNS plus de temps pour se propager et pour que votre certificat soit activé.

Étape 9

L’étape suivante consiste à faire pointer votre sous-domaine vers StackPath afin que le CDN puisse servir vos ressources statiques. Allez à la page Aperçu et cliquez sur l’icône de copie (presse-papiers) pour copier la valeur CNAME.

Étape 10

Une fois encore, nous allons vous montrer comment ajouter ou modifier cet enregistrement DNS dans le DNS de Kinsta. Ces étapes peuvent varier en fonction de votre fournisseur DNS.

1. Si vous n’êtes pas déjà dans DNS dans MyKinsta, cliquez sur DNS dans la colonne de navigation latérale gauche.
2. Cliquez sur le domaine auquel vous voulez ajouter un enregistrement DNS.
3. Cliquez sur le bouton Ajouter un enregistrement DNS.
   1. Cliquez sur l’onglet CNAME et ajoutez la première partie de votre sous-domaine dans le champ Nom d’hôte (e.g. static).
   2. Ajoutez la valeur que vous avez copiée de StackPath dans le champ Pointer vers.
   3. Cliquez sur le bouton Ajouter un enregistrement DNS pour enregistrer votre nouvel enregistrement CNAME.

      

Remarque : La propagation de vos enregistrements DNS peut prendre jusqu’à 1 heure.

Étape 11

De retour dans StackPath, cliquez sur le bouton Revérifier les réglages DNS sur la page Aperçu.

Si nécessaire, laissez plus de temps au DNS pour se propager et vérifiez à nouveau les réglages DNS. Une fois le DNS propagé, les instructions pour pointer votre site disparaîtront, et vous verrez des options pour gérer votre site sur la page Aperçu.

Étape 12

Pour réécrire les URL des ressources statiques de l’adresse périphérique StackPath vers votre sous-domaine, vous devez ajouter et configurer l’extension CDN Enabler. Cette extension est réalisée par KeyCDN mais fonctionne également avec d’autres CDN. Une fois l’extension installée et activée, allez à la page des réglages de l’extension, saisissez le sous-domaine personnalisé pour les ressources statiques de votre site (par exemple, static.example.com), puis cliquez sur le bouton Enregistrer les modifications et valider la configuration.

Si tout est configuré correctement, vous verrez un message de réussite confirmant que le nom d’hôte CDN est valide et renvoie un statut 200. Si vous voyez des erreurs lors de la sauvegarde, vérifiez à nouveau tous les réglages ci-dessus, l’orthographe de votre sous-domaine, et assurez-vous que le DNS s’est propagé.

Votre site est maintenant connecté à StackPath, le CDN de StackPath sert les ressources statiques, et vous êtes prêt à vérifier et configurer les réglages (dans la section suivante) pour terminer.

Configurer les réglagpes de StackPath

Maintenant que votre domaine est entièrement pointé vers StackPath, vous pouvez commencer à ajuster et vérifier quelques réglages pour une meilleure compatibilité avec l’intégration Cloudflare de Kinsta.

Réglages

(Sites > Réglages)

Protocole d’extraction : Réglez ce paramètre sur HTTPS uniquement pour éviter les boucles/erreurs de redirection.

CDN

(Sites > CDN)

1. Contrôle de la chaîne de requête : Laissez ce réglage par défaut de Cache all Query Strings pour éviter de charger un contenu incorrect.
2. Persistance du contenu : Cette option est désactivée par défaut mais peut être activée si vous souhaitez garantir la disponibilité du contenu dans le cas où votre origine est hors ligne.
3. Mise en cache des URL : Laissez cette option désactivée, surtout si vous avez un site dynamique. Si vous avez un site dynamique et souhaitez mettre en cache certaines sections sans extension de fichier, créez plutôt une EdgeRule personnalisée.

Autres configurations et réglages

1. Sites > EdgeSSL > Forcer les connexions HTTPS : Pour rediriger tous les visiteurs vers HTTPS au lieu de HTTP, soit Force HTTPS dans MyKinsta, soit Activer Force HTTPS dans StackPath. N’ activez pas les deux options, car cela entraînera probablement des erreurs de redirection et des boucles.
2. Sites > EdgeRules > Règle de livraison : Dans certaines circonstances, la mise en cache accidentelle de la barre d’outils de l’administrateur et d’autres éléments de l’utilisateur peut se produire. Pour éviter ce risque de sécurité potentiellement grave, vous devez créer une nouvelle règle de livraison:
   1. If: Cookie Matches wordpres_logged_in*
   2. Then: Bypass Cache
3. Sites > EdgeRules > Forcer les connections www : Nous recommandons de laisser cette option désactivée car elle peut entrer en conflit avec plusieurs domaines et l’en-tête Host. Si elle est activée, assurez-vous que le DNS du sous-domaine www (www.example.com) pointe vers StackPath.

Votre site est maintenant installé et configuré chez StackPath. Si vous rencontrez des problèmes, consultez les problèmes courants et les solutions dans la section de dépannage ci-dessous.

Dépannage des problèmes courants de StackPath

Maintenant que vous avez configuré votre site avec StackPath, il peut arriver que quelque chose ne fonctionne pas comme prévu. Avec une couche CDN supplémentaire, il y a plusieurs choses à essayer lors du dépannage. Nous avons couvert les plus courantes ci-dessous.

Les changements ne s’affichent pas sur votre site

L’utilisation de StackPath avec votre site crée une couche supplémentaire de mise en cache qui devra être effacée à chaque fois que vous devrez vider le cache. Si vous avez des difficultés à voir les changements sur votre site ou si une extension ne se comporte pas comme prévu après l’installation ou la réinstallation, assurez-vous de vider le cache à tous les niveaux, y compris :

1. Extensions (si applicable)
2. Thèmes (si applicable)
3. Cache du site/serveur chez Kinsta (depuis MyKinsta ou l’extension Kinsta MU)
4. Cache à StackPath
5. Cache du navigateur

Adresse IP bloquée par un faux positif

Si vous avez activé le WAF et/ou le pare-feu sur StackPath et que vous ou un visiteur de votre site êtes bloqué à tort, cela peut être dû à un faux positif. Dans ce cas, vous devrez collaborer avec le service d’assistance de StackPath et notre équipe de support Kinsta pour déterminer l’origine du blocage.

Si vous avez configuré des règles personnalisées dans EdgeRules > Règles de livraison, vous devrez également les vérifier et fournir une copie de toutes les règles à notre équipe d’assistance lors de votre demande d’aide.

Boucles de redirection HTTP-HTTPS

Si vous voyez des boucles de redirection HTTP vers HTTPS sur votre site, vérifiez les réglages suivants :

1. Dans StackPath, assurez-vous que le protocole d’extraction (Sites > Aperçu > Réglages) est défini sur HTTPS uniquement.
2. Assurez-vous que l’option Force HTTPS est activée à un seul endroit, soit dans MyKinsta(Sites > Nom du site > Outils > Forcer HTTPS) ou à StackPath(Sites > EdgeSSL > Forcer les connexions HTTPS), mais pas les deux.

Réglages avancés et Compatibilité

En-tête Host

Sites > Réglages > En-tête d’hôte : L’en-tête d’hôte doit correspondre au domaine ajouté à MyKinsta. Le premier domaine ajouté dans StackPath est le domaine par défaut et est l’en-tête d’hôte utilisé pour tirer le contenu de votre origine. Si plusieurs domaines sont ajoutés à la fois à MyKinsta et à StackPath, changez ce réglage en Dynamique.

Authentification de l’origine

Sites > Réglages > Authentification d’origine : Si votre site Kinsta est protégé par un mot de passe, configurez StackPath pour qu’il ait accès au contenu.

Durée de vie

Sites > CDN > Durée de vie : Par défaut, l’origine est contrôlée, ce qui signifie que StackPath respectera les en-têtes d’origine. L’expiration est définie à max sur les fichiers statiques dans l’intégration Cloudflare de Kinsta. Si vous souhaitez que cela soit configuré différemment, vous pouvez le modifier sur StackPath.

Mise en cache par en-tête

Sites > CDN > Mise en cache par en-tête : Cette option ne doit être activée que si vous servez un contenu différent (un contenu complètement différent, pas seulement une mise en page différente contrôlée par CSS ou JavaScript) pour les mobiles et les ordinateurs de bureau sur la même URL. Vous devrez peut-être aussi contacter notre équipe de support pour créer des règles Nginx personnalisées afin de servir ce contenu.

Règles de livraison

Sites > EdgeRules > Règles de livraison : Si vous avez personnalisé votre URL de connexion WordPress, vous devrez créer une règle de livraison personnalisée dans EdgeRules pour contourner le cache pour ce chemin. Dans l’exemple suivant, notre URL de connexion personnalisée est https://example.com/mylogin :

1. If: URL Matches https://example.com/mylogin*
2. Then: Bypass Cache

Fichier robots.txt personnalisé

Sites > EdgeRules > Fichier robots.txt personnalisé : Si vous activez cette option sur StackPath, le fichier robots.txt servi par Kinsta sera ignoré, et vous devrez gérer votre fichier robots.txt sur StackPath. Toute modification apportée au fichier robots.txt de Kinsta n’affectera pas le fichier robots.txt servi par StackPath et ne sera pas vu par les moteurs de recherche.

Protection des référents

Sites > EdgeRules > Protection des référents : Si cette option est nécessaire, activez-la avec prudence car elle peut bloquer tout le trafic vers votre site. Si le référent de votre visiteur ne correspond pas aux domaines répertoriés dans StackPath, il recevra une réponse 403 Forbidden et ne pourra pas voir votre site.