Intégration d'AWS CloudFront - Pour commencer

Notre intégration à CloudFront utilise la solution Lambda@Edge d'Amazon pour vous offrir un service de « salle d'attente » qui fonctionne directement depuis votre CDN, sans que vous ayez à modifier le code de votre application ni vos serveurs web.

Cet article vous guidera à travers les étapes nécessaires à l'intégration de CrowdHandler à votre distribution CloudFront. Cette intégration impliquant la mise en place d'une infrastructure sur votre compte AWS, les frais d'utilisation standard d'AWS s'appliqueront.

Si, à un moment ou à un autre de votre lecture de ce guide, vous rencontrez des difficultés ou avez des questions, n'hésitez pas à nous contacter à l'adresse https://support.crowdhandler.com.

Conditions

  1. Un compte CrowdHandler actif. Si vous n'êtes pas encore inscrit, vous pouvez le faire ici.
  2. Accès à la console AWS sur laquelle se trouve votre distribution CloudFront, ainsi que les autorisations nécessaires pour :
    1. Apporter des modifications à la distribution CloudFront
    2. Publier des fonctions Lambda
    3. Modifier les rôles IAM.

Comme pour toutes nos intégrations côté serveur, nous vous recommandons de procéder d'abord à l'intégration dans votre environnement UAT/de préproduction avant de passer à votre domaine de production.

Étape 1 : Télécharger le code d'intégration.

  1. Accédez au dépôt GitHub dédié à l'intégration CloudFront.
  2. Accédez au répertoire « dist ».
  3. Téléchargez les fichiers ZIP qu'il contient.

Étape 2 : Créer la fonction Lambda « viewerRequest ».

AWS exige que les fonctions Lambda@Edge soient créées dans la région US-East-1 (Virginie du Nord). Les fonctions Lambda@Edge sont distribuées à l'échelle mondiale, mais elles doivent provenir de cette zone géographique.

  1. Connectez-vous à votre console AWS.
  2. Accédez au service AWS Lambda.
  3. Créez une nouvelle fonction.
  4. Laissez les options de création de fonction réglées sur « Créer à partir de zéro ».
  5. Nommez la fonction « crowdhandler-viewerRequest »
  6. Définissez l'environnement d'exécution sur Node.js
  7. Dépliez le menu déroulant des rôles d'exécution et notez le rôle d'exécution que Lambda va créer.
  8. Créez la fonction.

Dans l'exemple ci-dessous, le rôle d'exécution est nommé « crowdhandler-viewerRequest-role-28dhheno ».

Étape 3 : Configurer les autorisations du rôle d'exécution.

  1. Ouvrez un nouvel onglet dans votre navigateur et accédez à la console de gestion AWS IAM.
  2. Sélectionnez les rôles.
  3. Sélectionnez le rôle d'exécution créé à l'étape 2.
  4. Sélectionnez l'onglet « Relations de confiance ».
  5. Cliquez sur le bouton « Modifier la relation de confiance ».
  6. Mettez à jour la stratégie de confiance pour y inclure le service edgelambda.amazonaws.com, puis enregistrez-la.

Étape 4a : Configurer la fonction Lambda « viewerRequest ».

  1. Revenez à l'onglet du navigateur dans lequel vous avez créé la fonction `viewerRequest` à l'étape 2.

  2. Téléchargez le fichier viewerRequest.zip que vous avez téléchargé à l'étape 1.

  3. Double-cliquez sur le fichier handlerViewerRequest.js pour afficher le code source.

  4. Recherchez « CROWDHANDLER_API_DOMAIN » dans le code source et remplacez-le par « api.crowdhandler.com ».

  5. Recherchez « CROWDHANDLER_PUBLIC_KEY » et remplacez-le par la valeur de votre clé publique CrowdHandler (vous la trouverez dans la section « Compte -> API » du panneau d'administration de CrowdHandler).

  6. Faites défiler la page jusqu'aux paramètres d'exécution.

  7. Cliquez sur « Modifier ».

  8. Remplacez le nom du gestionnaire par « handlerViewerRequest.viewerRequest ».

  9. Mettez à jour la fonction Lambda en cliquant sur le bouton « Déployer ».

Étape 4b : (Facultatif) Configurer les paramètres avancés.

failTrust (booléen) (valeur par défaut : true)

Si cette option est désactivée, un utilisateur dont l'enregistrement via l'API de CrowdHandler échoue sera redirigé vers une salle d'attente de sécurité jusqu'à ce que CrowdHandler soit en mesure de décider de la suite à lui réserver.

Si cette option est activée, les utilisateurs qui ne parviennent pas à s'authentifier via l'API de CrowdHandler seront considérés comme fiables.

safetyNetSlug (chaîne de caractères) (valeur par défaut : non définie)

Si elle est définie et si la variable `failTrust` est définie sur `false`, cette salle d'attente servira de salle de secours.

**whitelabel (booléen) (valeur par défaut : false)**Par défaut, les utilisateurs sont placés en file d'attente sur le domaine wait.crowdhandler.com de CrowdHandler. Si whitelabel est défini sur true, les utilisateurs sont placés en file d'attente sur le domaine que CrowdHandler protège. Par exemple, si CrowdHandler a été configuré pour protéger www.example.com, les utilisateurs seront mis en file d'attente sur le www.example.com/ch/ . La route /ch/ n'a pas besoin d'exister dans votre application. Pour en savoir plus sur les salles d'attente whitelabel, cliquez ici.

  1. Si des modifications ont été apportées aux paramètres avancés, actualisez la fonction Lambda en cliquant sur le bouton « Déployer ».

Étape 5 : Déployer la fonction Lambda « viewerRequest » sur CloudFront.

  1. Actualisez la page (AWS Lambda met en cache les configurations des rôles d'exécution IAM).

  2. Sélectionnez « Déployer vers Lambda@Edge » dans le menu déroulant des actions.

  3. Sélectionnez votre distribution CloudFront dans le menu déroulant « Distribution ».

  4. Sélectionnez le comportement que vous souhaitez que CrowdHandler déclenche. Nous vous recommandons de sélectionner *.

Le modèle * déclenchera la fonction CrowdHandler pour toutes les routes de votre site, à l'exception de celles exclues dans les comportements CloudFront (voir la section 13). Nous vous recommandons de commencer par ce modèle, sauf si vous êtes certain que votre site ne sera pas submergé par du trafic vers des routes non protégées et qu'il ne sera pas vulnérable au piège de redirection décrit ici.

Vous pouvez définir des configurations plus détaillées des parcours dans la salle d'attente via la console d'administration de CrowdHandler.

5. Remplacer l'événement CloudFront par « requête de l'utilisateur ».

6. Sélectionnez l'accusé de réception.

7. Déployer.

Étape 6 : Créer la fonction Lambda « viewerResponse ».

  1. Accédez au service AWS Lambda.
  2. Créez une nouvelle fonction.
  3. Laissez les options de création de fonction réglées sur « Créer à partir de zéro ».
  4. Nommez la fonction « crowdhandler-viewerResponse »
  5. Définissez l'environnement d'exécution sur Node.js
  6. Dépliez le menu déroulant des rôles d'exécution et sélectionnez le rôle d'exécution que vous avez noté à l'étape 2.
  7. Créez la fonction.

Étape 7 : Configurer la fonction Lambda « viewerResponse ».

  1. Téléchargez le fichier viewerResponse.zip que vous avez téléchargé à l'étape 1.

  2. Faites défiler la page jusqu'aux paramètres d'exécution.

  3. Cliquez sur « Modifier ».

  4. Remplacez le nom du gestionnaire par « handlerViewerResponse.viewerResponse ».

Étape 8 : Déployer la fonction Lambda « viewerResponse » sur CloudFront.

  1. Sélectionnez « Déployer vers Lambda@Edge » dans le menu déroulant des actions.

  2. Sélectionnez votre distribution CloudFront dans le menu déroulant « Distribution ».

  3. Sélectionnez le même comportement que celui que vous avez choisi à l'étape 5.

  4. Modifiez l'événement CloudFront pour qu'il corresponde à la réponse de l'utilisateur.

  5. Sélectionnez l'accusé de réception.

  6. Déployer

Vous pouvez ignorer les étapes 9 à 12 si vous n'avez pas défini « whitelabel » sur « true » à l'étape 4b.

Étape 9 : Créer la fonction Lambda « originOverride » (configuration « Whitelabel » uniquement).

  1. Accédez au service AWS Lambda.
  2. Créez une nouvelle fonction.
  3. Laissez les options de création de fonction réglées sur « Créer à partir de zéro ».
  4. Nommez la fonction « crowdhandler-originOverride ».
  5. Définissez l'environnement d'exécution sur Node.js
  6. Dépliez le menu déroulant des rôles d'exécution et sélectionnez le rôle d'exécution que vous avez noté à l'étape 2.
  7. Créez la fonction.

Étape 10 : Configurer la fonction Lambda « originOverride » (configuration « Whitelabel » uniquement).

  1. Téléchargez le fichier « originOverride.zip » que vous avez téléchargé à l'étape 1.

  2. Faites défiler la page jusqu'aux paramètres d'exécution.

  3. Cliquez sur « Modifier ».

  4. Renommez le gestionnaire en « handlerOriginOverride.originOverride », enregistrez, puis augmentez le délai d'expiration de la fonction à 10 secondes.

Étape 11 : Ajouter la prise en charge de CloudFront en marque blanche (configuration en marque blanche uniquement).

  1. Ouvrez un nouvel onglet dans votre navigateur et accédez à la console AWS CloudFront.
  2. Recherchez votre distribution CloudFront, puis cliquez sur l'ID de la distribution pour passer en mode de configuration.
  3. Sélectionnez l'onglet « Comportements ».
  4. Ajoutez un nouveau comportement pour le modèle de chemin /ch/*, comme indiqué sur la capture d'écran ci-dessous, en modifiant l'origine pour qu'elle corresponde à la vôtre.

!!! IMPORTANT !!! Lors de cette étape, il est essentiel d'activer la mise en cache CloudFront en sélectionnant la politique de mise en cache indiquée sur la capture d'écran. Si vous ne le faites pas, AWS pourrait limiter votre trafic en cas de forte affluence.

Étape 12 : Déployer la route « Whitelabel » (configuration « Whitelabel » uniquement).

  1. Revenez à l'onglet du navigateur dans lequel vous avez créé la fonction `originOverride` à l'étape 9.
  2. Actualisez la page.
  3. Sélectionnez « Déployer vers Lambda@Edge » dans le menu déroulant des actions.
  4. Sélectionnez votre distribution CloudFront dans le menu déroulant « Distribution ».
  5. Sélectionnez le comportement /ch/ *.
  6. Remplacer l'événement CloudFront par une requête vers l'origine
  7. Sélectionnez l'accusé de réception.
  8. Déployer.

Étape 13 : Ajouter des routes d'exclusion CrowdHandler.

Par défaut, CrowdHandler ne tentera pas automatiquement de mettre en file d'attente les routes présentant les extensions de fichier suivantes.

« avi », « css », « csv », « eot », « gif », « ico », « jpg », « js », « json », « map », « mov », «mp4", "mpeg", "mpg", "ogg", "ogv", "ott", "pdf", "png", "svg", "ttf", "webmanifest", "wmv", "woff", "woff2", "xml".

Il vous appartient d'exclure les schémas et les itinéraires qui ne doivent pas être mis en file d'attente.

En voici quelques exemples courants :

  • Chemins d'accès utilisés pour stocker les ressources statiques et les fichiers multimédias, par exemple /wp-includes/*
  • URL de rappel générées par des prestataires de paiement tiers.
  • Flux JSON et RSS.
  1. Accédez à la console AWS CloudFront.
  2. Recherchez votre distribution CloudFront, puis cliquez sur l'ID de la distribution pour passer en mode de configuration.
  3. Sélectionnez l'onglet « Comportements ».
  4. Ajoutez de nouveaux comportements pour toutes les routes qui ne doivent pas être soumises à la protection de Crowdhandler.

Vous trouverez ci-dessous un exemple de configuration pour un répertoire de ressources statiques.

Étape 14 : (Facultatif) Ajouter l'en-tête « x-ch-no-bypass ».

L'en-tête « x-ch-no-bypass » peut être configuré pour être envoyé à votre serveur d'origine dans CloudFront. Vous pouvez rechercher cet en-tête dans votre application afin de vérifier que la requête est bien passée par CrowdHandler. Vous trouverez des exemples d'implémentation dans la section « Exemples d'intégration » de cet article.

  1. Accédez à la console AWS CloudFront.

  2. Recherchez votre distribution CloudFront, puis cliquez sur l'ID de la distribution pour passer en mode de configuration.

  3. Sélectionnez l'onglet « Origines ».

  4. Sélectionnez votre lieu de départ, puis cliquez sur « Modifier ».

  5. Ajouter un en-tête personnalisé.

  6. Définissez le nom de l'en-tête sur « x-ch-no-bypass ».

  7. Définissez cette valeur en utilisant une chaîne de caractères secrète (pensez à utiliser un générateur de mots de passe).

  8. Cet en-tête/cette valeur sera désormais envoyé(e) à votre serveur d'origine à chaque requête.

Étape 15 : Finalisez votre configuration.

CrowdHandler est désormais intégré à votre distribution CloudFront ; c'est à vous de personnaliser votre configuration CrowdHandler via la console d'administration CrowdHandler. Voici quelques articles d'aide recommandés qui présentent les notions de base :

  1. Pour commencer (Vous pouvez ignorer les passages concernant l'installation de l'intégration JavaScript.)
  2. Salles d'attente
  3. Configuration du domaine