Nuestra integración de CloudFront utiliza la solución de código de borde Lambda@Edge de Amazon para ofrecerle un servicio de sala de espera que funciona directamente desde su CDN sin necesidad de que realice ningún cambio en el código de su aplicación ni en sus servidores web.

Introducción


Este artículo le guiará a través de los pasos necesarios para integrar CrowdHandler con su distribución de CloudFront. Dado que esta integración implica el aprovisionamiento de infraestructura en su cuenta de AWS, se aplicarán las tarifas de uso estándar de AWS.


Si en algún momento de la guía te quedas atascado o tienes alguna pregunta, no dudes en ponerte en contacto con nosotros a través de https://www.crowdhandler.com.

Requisitos previos

  1. Una cuenta CrowdHandler activa. Si aún no te has registrado, puedes hacerlo aquí.
  2. Acceso a la consola de AWS en la que se encuentra su distribución de CloudFront y permiso para:
    1. Realizar modificaciones en la distribución de CloudFront
    2. Publicar funciones Lambda
    3. Editar roles IAM.


Al igual que con todas nuestras integraciones del lado del servidor, recomendamos realizar la integración en su entorno UAT/Staging antes de realizar la integración en su dominio de producción. 


Paso 1: Descargue el código de integración.


  1. Vaya al repositorio GitHub de integración de CloudFront.
  2. Introduzca el directorio dist.
  3. Descargue los archivos zip que contiene.


Paso 2: Crear la función Lambda viewerRequest.



AWS exige que las funciones lambda@edge se creen en la región US-East-1 (N.Virgina). 

Las funciones lambda@Edge se distribuyen globalmente, pero deben originarse en esta ubicación geográfica.


  1. Inicie sesión en su consola de AWS.
  2. Navegue hasta el servicio AWS Lambda. 
  3. Crea una nueva función.
  4. Deje las opciones de creación de funciones establecidas en "Autor desde cero".
  5. Nombre de la función crowdhandler-viewerRequest
  6. Establecer el tiempo de ejecución a Node.js 14.x
  7. Expanda el desplegable de rol de ejecución y anote el rol de ejecución que creará Lambda. 
  8. Crea la función.


En el siguiente ejemplo, el rol de ejecución se denomina crowdhandler-viewerRequest-role-28dhheno



Paso 3: Configurar los permisos de la función de ejecución.


  1. Abra una nueva pestaña del navegador y navegue hasta la consola de administración de AWS IAM.
  2. Seleccione Roles.
  3. Seleccione el rol de ejecución creado en el paso 2. 
  4. Seleccione la pestaña de relaciones de confianza.
  5. Haz clic en el botón "editar relación de confianza". 
  6. Actualiza la Política de Confianza para incluir el servicio edgelambda.amazonaws.com y guárdala. 



Paso 4a: Configure la función Lambda viewerRequest.


  1. Vuelva a la pestaña del navegador donde creó la función viewerRequest en el paso 2.
  2. Cargue el archivo viewerRequest.zip que descargó en el paso 1.


  3. Haga doble clic en el archivo handlerViewerRequest.js para mostrar el código fuente.
  4. Busque CROWDHANDLER_API_DOMAIN en el código fuente y sustitúyalo por api.crowdhandler.com.


  5. Busque CROWDHANDLER_PUBLIC_KEY y sustitúyalo por el valor de su clave pública de CrowdHandler (Puede encontrarlo en la sección Cuenta -> API del panel de control de administración de CrowdHandler).


  6. Desplácese hacia abajo hasta Configuración de tiempo de ejecución.
  7. Haz clic en Editar.
  8. Cambiar el nombre del manejador a handlerViewerRequest.viewerRequest.
  9. Actualice la función Lambda haciendo clic en el botón desplegar.



Paso 4b: (Opcional) Configurar ajustes avanzados.



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 se ha modificado la configuración avanzada, actualice la función Lambda pulsando el botón de despliegue.

Paso 5: Implemente la función viewerRequest Lambda en CloudFront.


  1. Actualice la página (AWS Lambda almacena en caché las configuraciones de roles de ejecución de IAM). 
  2. Seleccione Desplegar en Lambda@Edge en el menú desplegable de acciones.


  3. Seleccione su distribución de CloudFront en el menú desplegable Distribución.
  4. Seleccione el comportamiento que desea que CrowdHandler active. Recomendamos seleccionar *.

El patrón * activará la función CrowdHandler para todas las rutas de su sitio, excepto las rutas excluidas en los comportamientos de CloudFront (consulte la sección 13). Le recomendamos que comience con este patrón a menos que esté seguro de que su sitio no se inundará con tráfico a rutas no protegidas y no será vulnerable al problema de redirección descrito aquí. 

Puede realizar configuraciones de rutas de salas de espera más granulares a través de la consola de administración de CrowdHandler.


5. Cambie el evento CloudFront a solicitud de espectador.

6. Seleccione el acuse de recibo.

7. Despliegue.



Paso 6: Cree la función Lambda viewerResponse.


  1. Navegue hasta el servicio AWS Lambda. 
  2. Crea una nueva función.
  3. Deje las opciones de creación de funciones establecidas en "Autor desde cero".
  4. Nombre de la función crowdhandler-viewerResponse
  5. Establecer el tiempo de ejecución a Node.js 14.x
  6. Expanda el menú desplegable del rol de ejecución y seleccione el rol de ejecución del que tomó nota en el paso 2. 
  7. Crea la función.



Paso 7: Configure la función Lambda viewerResponse.


  1. Cargue el archivo viewerResponse.zip que descargó en el paso 1.


  2. Desplácese hacia abajo hasta Configuración de tiempo de ejecución.
  3. Haz clic en Editar.
  4. Cambiar el nombre del manejador a handlerViewerResponse.viewerResponse.



Paso 8: Implemente la función viewerResponse Lambda en CloudFront.


  1. Seleccione Desplegar en Lambda@Edge en el menú desplegable de acciones.



  2. Seleccione su distribución de CloudFront en el menú desplegable Distribución.
  3. Seleccione el mismo comportamiento que eligió en el paso 5.
  4. Cambia el evento de CloudFront a respuesta de espectador.
  5. Seleccione el acuse de recibo.
  6. Despliegue




Los pasos 9-12 pueden omitirse si no ha establecido whitelabel en true en el paso 4b.

Paso 9: Cree la función Lambda originOverride(sólo configuración Whitelabel).


  1. Navegue hasta el servicio AWS Lambda. 
  2. Crea una nueva función.
  3. Deje las opciones de creación de funciones establecidas en "Autor desde cero".
  4. Nombre de la función crowdhandler-originOverride.
  5. Establecer el tiempo de ejecución a Node.js 14.x
  6. Expanda el menú desplegable del rol de ejecución y seleccione el rol de ejecución del que tomó nota en el paso 2. 
  7. Crea la función.



Paso 10: Configure la función Lambda originOverride(solo configuración Whitelabel).


  1. Cargue el archivo originOverride.zip que descargó en el paso 1.


  2. Desplácese hacia abajo hasta Configuración de tiempo de ejecución.
  3. Haz clic en Editar.
  4. Cambie el nombre del manejador a handlerOriginOverride.originOverride, guarde y aumente el tiempo de espera de la función a 10 segundos.




Paso 11: Añada compatibilidad con CloudFront de etiqueta blanca(solo configuración de etiqueta blanca).


  1. Abra una nueva pestaña del navegador y navegue hasta la consola de AWS CloudFront.
  2. Busque su distribución de CloudFront y haga clic en el ID de distribución para acceder al modo de configuración. 
  3. Seleccione la pestaña comportamientos.
  4. Añada un nuevo comportamiento para el patrón de ruta /ch/* como se muestra en la siguiente captura de pantalla, alterando el origen para que coincida con el suyo.


¡¡¡!!! ¡¡¡IMPORTANTE !!!

Es crítico al completar este paso que el almacenamiento en caché de CloudFront esté habilitado seleccionando la política de caché que se muestra en la captura de pantalla. De lo contrario, AWS podría limitar el tráfico en situaciones de tráfico elevado.


Paso 12: Desplegar ruta deetiqueta blanca(sólo configuración de etiqueta blanca).

  1. Vuelva a la pestaña del navegador donde creó la función originOverride en el paso 9.
  2. Actualiza la página.
  3. Seleccione Desplegar en Lambda@Edge en el menú desplegable de acciones.

  4. Seleccione su distribución de CloudFront en el menú desplegable Distribución.
  5. Seleccione el comportamiento /ch/* .
  6. Cambiar el evento CloudFront a solicitud de origen
  7. Seleccione el acuse de recibo.
  8. Desplegar.

Paso 13: Añadir rutas de exclusión CrowdHandler.


CrowdHandler no intentará automáticamente poner en cola rutas con las siguientes extensiones de archivo. 

"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".

Es su responsabilidad omitir patrones y rutas que no deban ponerse en cola. 

Algunos ejemplos comunes son:

* Rutas utilizadas para almacenar activos estáticos y multimedia, por ejemplo, /wp-includes/*
* URL de devolución de llamada realizadas por proveedores de pago externos. 
* Fuentes JSON y RSS.
  1. Vaya a la consola de AWS CloudFront.
  2. Busque su distribución de CloudFront y haga clic en el ID de distribución para acceder al modo de configuración.
  3. Selecciona la pestaña de comportamientos.
  4. Añade nuevos comportamientos para cualquier ruta que no deba estar sujeta a la protección de Crowdhandler.
A continuación se muestra un ejemplo de configuración para un directorio de activos estáticos.

Paso 14: (Opcional) Añada el encabezado x-ch-no-bypass.


El encabezado x-ch-no-bypass se puede configurar para que se envíe a su servidor de origen en CloudFront. Puede comprobar este encabezado en su aplicación para verificar que la solicitud ha pasado por CrowdHandler. Puede encontrar ejemplos de implementación en la sección "Ejemplos de integración" de este artículo.


  1. Vaya a la consola de AWS CloudFront.
  2. Busque su distribución de CloudFront y haga clic en el ID de distribución para acceder al modo de configuración.
  3. Seleccione la pestaña Orígenes.
  4. Seleccione su origen y haga clic en Editar.
  5. Añade una cabecera personalizada.


  6. Establece el nombre de la cabecera como x-ch-no-bypass.
  7. Establezca el valor en una cadena secreta (considere la posibilidad de utilizar un generador de contraseñas).
  8. Esta cabecera/valor se enviará ahora a su origen en cada petición.

Paso 15: Finalice la configuración.

CrowdHandler está integrado con su distribución de CloudFront y ahora le toca a usted personalizar su configuración de CrowdHandler a través de la consola de administración de CrowdHandler. Estos son algunos artículos de soporte recomendados que cubren los aspectos básicos:

  1. Primeros pasos (Puedes ignorar las partes sobre la instalación de la integración de Javascript).
  2. Salas de espera
  3. Configuración del dominio