Integración con AWS CloudFront: primeros pasos

Nuestra integración con CloudFront utiliza Lambda@Edge, la solución de código en el borde de Amazon, para ofrecerte un servicio de sala de espera que funciona directamente desde tu CDN sin que tengas que realizar ningún cambio en el código de tu aplicación ni en tus servidores web.

En este artículo se describen los pasos necesarios para integrar CrowdHandler con tu distribución de CloudFront. Dado que esta integración implica el aprovisionamiento de infraestructura en tu cuenta de AWS, se aplicarán las tarifas estándar de uso de AWS.

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

Requisitos

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

Al igual que con todas nuestras integraciones del lado del servidor, te recomendamos que realices la integración primero en tu entorno UAT/de pruebas antes de llevarla a cabo en tu dominio de producción.

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

  1. Accede al repositorio de GitHub de la integración de CloudFront.
  2. Entra en el directorio «dist».
  3. Descarga los archivos ZIP que contiene.

Paso 2: Crea la función Lambda «viewerRequest».

AWS exige que las funciones Lambda@Edge se creen en la región US-East-1 (Virginia del Norte). Las funciones Lambda@Edge se distribuyen a nivel mundial, pero deben tener su origen en esta ubicación geográfica.

  1. Inicia sesión en tu consola de AWS.
  2. Accede al servicio AWS Lambda.
  3. Crea una nueva función.
  4. Deja las opciones de creación de funciones configuradas en «Crear desde cero».
  5. Asigna un nombre a la función «crowdhandler-viewerRequest»
  6. Configura el entorno de ejecución como Node.js
  7. Despliega el menú desplegable de roles de ejecución y toma nota del rol de ejecución que creará Lambda.
  8. Crea la función.

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

Paso 3: Configurar los permisos del rol de ejecución.

  1. Abre una nueva pestaña del navegador y accede a la consola de gestión de AWS IAM.
  2. Seleccionar funciones.
  3. Selecciona el rol de ejecución que se creó en el paso 2.
  4. Selecciona la pestaña «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: Configurar la función Lambda «viewerRequest».

  1. Vuelve a la pestaña del navegador en la que creaste la función `viewerRequest` en el paso 2.

  2. Sube el archivo viewerRequest.zip que descargaste en el paso 1.

  3. Haz doble clic en el archivo handlerViewerRequest.js para ver el código fuente.

  4. Busca «CROWDHANDLER_API_DOMAIN» en el código fuente y sustitúyelo por «api.crowdhandler.com».

  5. Busca «CROWDHANDLER_PUBLIC_KEY» y sustitúyelo por el valor de tu clave pública de CrowdHandler (la encontrarás en la sección «Cuenta» -> «API» del panel de control de administración de CrowdHandler).

  6. Desplázate hacia abajo hasta la configuración de tiempo de ejecución.

  7. Haz clic en «Editar».

  8. Cambia el nombre del controlador a handlerViewerRequest.viewerRequest.

  9. Actualiza la función Lambda haciendo clic en el botón «Implementar».

Paso 4b: (Opcional) Configurar los ajustes avanzados.

failTrust (booleano) (por defecto: true)

Si el valor es «false», cualquier usuario que no consiga registrarse mediante la API de CrowdHandler será enviado a una sala de espera de seguridad hasta que CrowdHandler pueda decidir qué hacer con él.

Si es cierto, se considerará de confianza a los usuarios que no realicen el registro de entrada mediante la API de CrowdHandler.

safetyNetSlug (cadena) (por defecto: sin definir)

Si se ha definido y si failTrust está establecido en «false», este slug de la sala de espera se utilizará como sala de seguridad.

**whitelabel (booleano) (por defecto false)**Por defecto, los usuarios se pondrán en cola en el dominio wait.crowdhandler.com de CrowdHandler. Si se establece whitelabel en true, los usuarios se pondrán en cola en el dominio que CrowdHandler está protegiendo. Por ejemplo, si CrowdHandler se ha configurado para proteger www.example.com, los usuarios se pondrán en cola en el www.example.com/ch/ . No es necesario que la ruta /ch/ exista en tu aplicación. Obtén más información sobre las salas de espera de whitelabel aquí.

  1. Si se ha realizado algún cambio en la configuración avanzada, actualiza la función Lambda haciendo clic en el botón «Implementar».

Paso 5: Implementa la función Lambda «viewerRequest» en CloudFront.

  1. Actualiza la página (AWS Lambda almacena en caché las configuraciones de los roles de ejecución de IAM).

  2. Selecciona «Implementar en Lambda@Edge» en el menú desplegable de acciones.

  3. Selecciona tu distribución de CloudFront en el menú desplegable «Distribución».

  4. Selecciona el comportamiento que deseas que active CrowdHandler. Te recomendamos que selecciones *.

El patrón * activará la función CrowdHandler para todas las rutas de tu sitio, salvo aquellas excluidas en los comportamientos de CloudFront (véase la sección 13). Te recomendamos que empieces con este patrón, a menos que estés seguro de que tu sitio no se verá saturado de tráfico hacia rutas desprotegidas y de que no será vulnerable al problema de redireccionamiento descrito aquí.

Puedes realizar configuraciones más detalladas de las rutas de la sala de espera a través de la consola de administración de CrowdHandler.

5. Cambia el evento de CloudFront a «solicitud del usuario».

6. Selecciona el acuse de recibo.

7. Implementar.

Paso 6: Crea la función Lambda «viewerResponse».

  1. Accede al servicio AWS Lambda.
  2. Crea una nueva función.
  3. Deja las opciones de creación de funciones configuradas en «Crear desde cero».
  4. Asigna un nombre a la función «crowdhandler-viewerResponse»
  5. Configura el entorno de ejecución como Node.js
  6. Despliega el menú desplegable de roles de ejecución y selecciona el rol de ejecución que has anotado en el paso 2.
  7. Crea la función.

Paso 7: Configurar la función Lambda «viewerResponse».

  1. Sube el archivo viewerResponse.zip que descargaste en el paso 1.

  2. Desplázate hacia abajo hasta la configuración de tiempo de ejecución.

  3. Haz clic en «Editar».

  4. Cambia el nombre del controlador a handlerViewerResponse.viewerResponse.

Paso 8: Implementa la función Lambda «viewerResponse» en CloudFront.

  1. Selecciona «Implementar en Lambda@Edge» en el menú desplegable de acciones.

  2. Selecciona tu distribución de CloudFront en el menú desplegable «Distribución».

  3. Selecciona el mismo comportamiento que elegiste en el paso 5.

  4. Cambia el evento de CloudFront a «respuesta del usuario».

  5. Selecciona el acuse de recibo.

  6. Implementar

Los pasos 9 a 12 se pueden omitir si no has establecido «whitelabel» en «true» en el paso 4b.

Paso 9: Crea la función Lambda «originOverride» (solo para la configuración de marca blanca).

  1. Accede al servicio AWS Lambda.
  2. Crea una nueva función.
  3. Deja las opciones de creación de funciones configuradas en «Crear desde cero».
  4. Asigna a la función el nombre «crowdhandler-originOverride».
  5. Configura el entorno de ejecución como Node.js
  6. Despliega el menú desplegable de roles de ejecución y selecciona el rol de ejecución que has anotado en el paso 2.
  7. Crea la función.

Paso 10: Configurar la función Lambda «originOverride» (solo para la configuración de marca blanca).

  1. Sube el archivo «originOverride.zip» que descargaste en el paso 1.

  2. Desplázate hacia abajo hasta la configuración de tiempo de ejecución.

  3. Haz clic en «Editar».

  4. Cambia el nombre del controlador a «handlerOriginOverride.originOverride», guarda los cambios y, a continuación, aumenta el tiempo de espera de la función a 10 segundos.

Paso 11: Añadir compatibilidad con CloudFront de marca blanca (solo para la configuración de marca blanca).

  1. Abre una nueva pestaña del navegador y accede a la consola de AWS CloudFront.
  2. Busca tu distribución de CloudFront y haz clic en el ID de la distribución para acceder al modo de configuración.
  3. Selecciona la pestaña «Comportamientos».
  4. Añade un nuevo comportamiento para el patrón de ruta /ch/*, tal y como se muestra en la captura de pantalla siguiente, modificando el origen para que se ajuste al tuyo.

!!! IMPORTANTE !!! Es fundamental que, al realizar este paso, el almacenamiento en caché de CloudFront esté activado seleccionando la política de caché que se muestra en la captura de pantalla. Si no lo haces, AWS podría limitar tu tráfico en situaciones de gran volumen de tráfico.

Paso 12: Implementar la ruta de marca blanca (solo para la configuración de marca blanca).

  1. Vuelve a la pestaña del navegador en la que creaste la función `originOverride` en el paso 9.
  2. Actualiza la página.
  3. Selecciona «Implementar en Lambda@Edge» en el menú desplegable de acciones.
  4. Selecciona tu distribución de CloudFront en el menú desplegable «Distribución».
  5. Selecciona el comportamiento /ch/ *.
  6. Cambiar el evento de CloudFront a «solicitud de origen»
  7. Selecciona el acuse de recibo.
  8. Implementar.

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

Por defecto, CrowdHandler no intentará poner en cola automáticamente las 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 tu responsabilidad omitir los patrones y las rutas que no deben incluirse en la cola.

Algunos ejemplos habituales son:

  • Rutas utilizadas para almacenar recursos estáticos y archivos multimedia, es decir, /wp-includes/*
  • URL de devolución de llamada generadas por proveedores de pago externos.
  • Formato JSON y fuentes RSS.
  1. Accede a la consola de AWS CloudFront.
  2. Busca tu distribución de CloudFront y haz clic en el ID de la distribución para acceder al modo de configuración.
  3. Selecciona la pestaña «Comportamientos».
  4. Añade nuevos comportamientos para aquellas rutas que no deban estar sujetas a la protección de Crowdhandler.

A continuación se muestra un ejemplo de configuración para un directorio de recursos estáticos.

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

El encabezado «x-ch-no-bypass» se puede configurar para que se envíe a tu servidor de origen en CloudFront. Puedes comprobar la presencia de este encabezado en tu aplicación para verificar que la solicitud ha pasado por CrowdHandler. Encontrarás ejemplos de implementación en la sección «Ejemplos de integración» de este artículo.

  1. Accede a la consola de AWS CloudFront.

  2. Busca tu distribución de CloudFront y haz clic en el ID de la distribución para acceder al modo de configuración.

  3. Selecciona la pestaña «Orígenes».

  4. Selecciona tu lugar de origen y haz clic en «Editar».

  5. Añade un encabezado personalizado.

  6. Establece el nombre del encabezado como «x-ch-no-bypass».

  7. Establece el valor en una cadena secreta (te recomendamos que utilices un generador de contraseñas).

  8. Este encabezado/valor se enviará ahora a tu origen en cada solicitud.

Paso 15: Finaliza la configuración.

CrowdHandler está integrado con tu distribución de CloudFront y ahora te toca a ti personalizar la configuración de CrowdHandler a través de la consola de administración de CrowdHandler. A continuación te ofrecemos algunos artículos de ayuda recomendados que tratan los aspectos básicos:

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