Notre intégration de CloudFront utilise la solution Lambda@Edge d'Amazon pour vous fournir un service de salle d'attente qui fonctionne directement à partir de votre CDN sans que vous ayez besoin d'apporter des modifications à votre code d'application ou à vos serveurs web.

Introduction


Cet article vous guidera à travers les étapes nécessaires pour intégrer CrowdHandler à votre distribution CloudFront. Comme cette intégration implique le provisionnement de l'infrastructure dans votre compte AWS, les frais d'utilisation standard d'AWS s'appliquent.


Si, à un moment ou à un autre de votre parcours dans le guide, vous êtes bloqué ou si vous avez des questions, n'hésitez pas à nous contacter à l'adresse suivante : https://www.crowdhandler.com.

Conditions préalables

  1. Un compte CrowdHandler actif. Si vous ne vous êtes pas encore inscrit, vous pouvez le faire ici.
  2. Accès à la console AWS dans laquelle se trouve votre distribution CloudFront et autorisation :
    1. Modifier la distribution CloudFront
    2. Publier des fonctions Lambda
    3. Modifier les rôles IAM.


Comme pour toutes nos intégrations côté serveur, nous recommandons d'intégrer votre environnement UAT/Staging avant d'intégrer votre domaine de production. 


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


  1. Allez sur le dépôt GitHub de l'intégration CloudFront.
  2. Saisissez le répertoire dist.
  3. Téléchargez les fichiers zip qu'ils contiennent.


É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 dans le monde entier, mais elles doivent provenir de cet emplacement géographique.


  1. Connectez-vous à votre console AWS.
  2. Naviguez jusqu'au service AWS Lambda. 
  3. Créer une nouvelle fonction.
  4. Laissez les options de création de fonction réglées sur "Auteur à partir de zéro".
  5. Nommez la fonction crowdhandler-viewerRequest
  6. Définir le Runtime à Node.js 14.x
  7. Développez le menu déroulant du rôle d'exécution et notez le rôle d'exécution que Lambda va créer. 
  8. Créer la fonction.


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



Étape 3 : Configuration des autorisations du rôle d'exécution.


  1. Ouvrez un nouvel onglet de navigateur et accédez à la console de gestion AWS IAM.
  2. Sélectionnez 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 politique de confiance pour inclure le service edgelambda.amazonaws.com et enregistrez-la. 



Étape 4a : Configurer la fonction Lambda viewerRequest.


  1. Revenez à l'onglet du navigateur où 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-la par la valeur de votre clé publique CrowdHandler (Vous la trouverez dans la section Account -> API du panneau de contrôle de CrowdHandler).


  6. Faites défiler vers le bas jusqu'aux paramètres d'exécution.
  7. Cliquez sur modifier.
  8. Modifier le nom du gestionnaire en handlerViewerRequest.viewerRequest.
  9. Mettez à jour la fonction Lambda en cliquant sur le bouton de déploiement.



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



failTrust (boolean) (default true)

If false, a user that fails to check-in with CrowdHandler's API will be sent to a safety net waiting room until CrowdHandler is able to make a decision on what to do with them. 

If true, users that fail to check-in with CrowdHandler's API will be trusted.

safetyNetSlug (string) (default undefined)

If defined and if failTrust is set to false, this waiting room slug will be used as the safety net room. 

whitelabel (boolean) (default false)

By default, users will be queued on CrowdHandler's wait.crowdhandler.com domain. If whitelabel is set to true, users will be queued on the domain CrowdHandler is protecting. For example, if CrowdHandler has been set up to protect www.example.com, users will be queued on the www.example.com/ch/ path. The /ch/ route does not need to exist in your application. 

Read more about whitelabel waiting rooms here.


  1. Si des modifications ont été apportées aux paramètres avancés, mettez à jour la fonction Lambda en cliquant sur le bouton de déploiement.

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


  1. Actualiser la page (AWS Lambda met en cache les configurations des rôles d'exécution IAM). 
  2. Sélectionnez Deploy to 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 sur lequel vous souhaitez que CrowdHandler se déclenche. Nous recommandons de sélectionner *.

Le motif * déclenchera la fonction CrowdHandler pour toutes les routes de votre site, à l'exception des routes exclues dans les comportements de CloudFront (voir section 13). Nous vous recommandons de commencer par ce motif à moins que vous ne soyez sûr que votre site ne sera pas inondé de trafic vers des routes non protégées et qu'il ne sera pas vulnérable à la redirection gotcha décrite ici. 

Vous pouvez configurer les routes de la salle d'attente de manière plus granulaire via la console d'administration de CrowdHandler.


5. Changez l'événement CloudFront en demande de spectateur.

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

7. Déployer.



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


  1. Naviguez jusqu'au service AWS Lambda. 
  2. Créer une nouvelle fonction.
  3. Laissez les options de création de fonction réglées sur "Auteur à partir de zéro".
  4. Nommez la fonction crowdhandler-viewerResponse
  5. Définir le Runtime à Node.js 14.x
  6. Développez la liste déroulante du rôle d'exécution et sélectionnez le rôle d'exécution dont vous avez pris note à l'étape 2. 
  7. Créer 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 vers le bas jusqu'aux paramètres d'exécution.
  3. Cliquez sur modifier.
  4. Modifier le nom du gestionnaire en handlerViewerResponse.viewerResponse.



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


  1. Sélectionnez Deploy to 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 qu'à l'étape 5.
  4. Changez l'événement CloudFront en réponse du spectateur.
  5. Sélectionnez l'accusé de réception.
  6. Déployer




Les étapes 9 à 12 peuvent être ignorées 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. Naviguez jusqu'au service AWS Lambda. 
  2. Créer une nouvelle fonction.
  3. Laissez les options de création de fonction réglées sur "Auteur à partir de zéro".
  4. Nommez la fonction crowdhandler-originOverride.
  5. Définir le Runtime à Node.js 14.x
  6. Développez la liste déroulante du rôle d'exécution et sélectionnez le rôle d'exécution dont vous avez pris note à l'étape 2. 
  7. Créer 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 vers le bas jusqu'aux paramètres d'exécution.
  3. Cliquez sur modifier.
  4. Modifiez le nom du gestionnaire en handlerOriginOverride.originOverride, enregistrez, puis augmentez le délai d'attente de la fonction à 10 secondes.




Étape 11 : Ajouter le support CloudFront whitelabel(configuration Whitelabel uniquement).


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


! !! IMPORTANT ! !!

Il est essentiel que la mise en cache CloudFront soit activée lors de cette étape en sélectionnant la politique de mise en cache indiquée dans la capture d'écran. Si ce n'est pas le cas, AWS risque d'étrangler votre trafic dans les situations de trafic élevé.


É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. Actualiser la page.
  3. Sélectionnez Deploy to 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. Modifier l'événement CloudFront en demande d'origine
  7. Sélectionnez l'accusé de réception.
  8. Déployer.

Étape 13 : Ajouter les routes d'exclusion de CrowdHandler.


D'emblée, CrowdHandler n'essaiera pas de mettre en file d'attente les itinéraires avec les extensions de fichiers 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 est de votre responsabilité d'omettre les motifs et les itinéraires qui ne doivent pas être mis en file d'attente. 

Voici des exemples courants :

* Chemins utilisés pour le stockage de ressources statiques et de médias, par exemple /wp-includes/*
* URL de rappel créées par des fournisseurs de paiement tiers. 
* JSON et flux RSS.
  1. Accédez à la console AWS CloudFront.
  2. Recherchez votre distribution CloudFront et cliquez sur l'identifiant de la distribution pour passer en mode configuration.
  3. Sélectionnez l'onglet "Comportements".
  4. Ajouter de nouveaux comportements pour les itinéraires qui ne devraient pas être soumis à la protection du Crowdhandler.
Voici un exemple de configuration pour un répertoire d'actifs 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 vérifier cet en-tête dans votre application pour vérifier que la demande a traversé CrowdHandler. Des exemples de mise en œuvre peuvent être trouvés dans la section "Exemples d'intégration" de cet article.


  1. Accédez à la console AWS CloudFront.
  2. Recherchez votre distribution CloudFront et cliquez sur l'identifiant de la distribution pour passer en mode configuration.
  3. Sélectionnez l'onglet des origines.
  4. Sélectionnez votre origine et cliquez sur modifier.
  5. Ajouter un en-tête personnalisé.


  6. Définir le nom de l'en-tête sur x-ch-no-bypass.
  7. Définir la valeur d'une chaîne secrète (envisager l'utilisation d'un générateur de mot de passe).
  8. Cet en-tête/valeur sera désormais envoyé à votre origine à chaque demande.

Étape 15 : Finalisation de la configuration.

CrowdHandler est intégré à votre distribution CloudFront et c'est maintenant à vous de personnaliser votre configuration CrowdHandler à travers la console d'administration CrowdHandler. Voici quelques articles de support recommandés qui couvrent les bases :

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