Introducción a un sitio web seguro estático - Amazon CloudFront
Información general de la soluciónImplementación de la solución

Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.

Introducción a un sitio web seguro estático

Puedes empezar a utilizar Amazon CloudFront con la solución que se describe en este tema para crear un sitio web estático y seguro para tu nombre de dominio. Un sitio web estático utiliza únicamente archivos estáticos, como HTML, CSS, JavaScript imágenes y vídeos, y no necesita servidores ni procesamiento por parte del servidor. Con esta solución, su sitio web obtiene los siguientes beneficios:

  • Utiliza el almacenamiento duradero de Amazon Simple Storage Service (Amazon S3): esta solución crea un bucket de Amazon S3 para alojar el contenido de su sitio web estático. Para actualizar el sitio web, solo tiene que cargar los archivos nuevos en el bucket de S3.

  • Se acelera gracias a la red de entrega de CloudFront contenido de Amazon: esta solución crea una CloudFront distribución para ofrecer su sitio web a los espectadores con baja latencia. La distribución está configurada con una identidad de acceso de origen para garantizar que solo se pueda acceder al sitio web a través CloudFront de S3 y no directamente desde S3.

  • Está protegido por HTTPS y encabezados de seguridad adicionales: esta solución crea un certificado SSL/TLS en AWS Certificate Manager(ACM) y lo adjunta a la distribución. CloudFront Este certificado permite que la distribución sirva el sitio web de su dominio de forma segura con HTTPS.

    Esta solución también usa Lambda @Edge para agregar encabezados de seguridad a cada respuesta del servidor. Los encabezados de seguridad son un grupo de encabezados en la respuesta del servidor web que indican a los navegadores web que tomen precauciones de seguridad adicionales. Para obtener más información, consulte esta entrada de blog: Cómo añadir encabezados de seguridad HTTP mediante Lambda @Edge y Amazon. CloudFront

  • Se configura e implementa con AWS CloudFormation: esta solución utiliza una plantilla de AWS CloudFormation para configurar todos los componentes, de modo que pueda centrarse más en el contenido de su sitio web y menos en la configuración de componentes.

Esta solución es de código abierto en. GitHub Para ver el código, enviar una solicitud de extracción o abrir una incidencia, vaya a https://github.com/aws-samples/amazon-cloudfront-secure-static-site.

Información general de la solución

En el siguiente diagrama se muestra información general de cómo funciona esta solución de sitio web estático:

Diagrama general de un sitio web estático seguro con CloudFront

  1. El lector solicita el sitio web en www.example.com.

  2. Si el objeto solicitado está en caché, CloudFront devuelve el objeto de su caché al visor.

  3. Si el objeto no CloudFront está en la caché, lo CloudFront solicita desde el origen (un bucket de S3).

  4. S3 devuelve el objeto a CloudFront, lo que desencadena el evento de respuesta de origen de Lambda @Edge.

  5. El objeto, incluidos los encabezados de seguridad añadidos por la función Lambda @Edge, se añade CloudFront a la memoria caché.

  6. (No se muestra) Los objetos se devuelven al lector. Las solicitudes posteriores del objeto que lleguen a la misma ubicación de CloudFront borde se atienden desde la CloudFront memoria caché.

Implementación de la solución

Para implementar esta solución de sitio web estático seguro, puede elegir una de las siguientes opciones:

  • Utilice la consola de AWS CloudFormation para implementar la solución con contenido predeterminado y, a continuación, cargue el contenido del sitio web en Amazon S3.

  • Clone la solución en su equipo para agregar contenido de su sitio web. A continuación, implemente la solución con AWS Command Line Interface (AWS CLI).

nota

Debe utilizar la región EE.UU. Este (Virginia del Norte) para implementar la CloudFormation plantilla.

Requisitos previos

Para utilizar esta solución, debe cumplir los siguientes requisitos previos:

  • Un nombre de dominio registrado, como example.com, que apunte a una zona alojada por Amazon Route 53. La zona alojada debe estar en el mismo Cuenta de AWS lugar en el que se implementa esta solución. Si no tiene un nombre de dominio registrado, puede registrarlo con Route 53. Si tiene un nombre de dominio registrado pero no apunta a una zona alojada por Route 53, configure Route 53 como su servicio de DNS.

  • AWS Identity and Access Management(IAM) para lanzar CloudFormation plantillas que creen funciones de IAM y permisos para crear todos los AWS recursos de la solución.

Usted es responsable de los costos generados durante el uso de esta solución. Para obtener más información sobre los costos, consulte las páginas de precios de cada uno. Servicio de AWS

Mediante la consola de AWS CloudFormation

Para realizar la implementación mediante la CloudFormation consola

  1. Elija Lanzar en AWS para abrir esta solución en la consola de AWS CloudFormation. Si es necesario, inicie sesión en suCuenta de AWS.

    Launch on AWS button

  2. El asistente Crear pila se abre en la CloudFormation consola, con campos rellenados previamente que especifican la CloudFormation plantilla de esta solución.

    En la parte inferior de la página, elija Next.

  3. En la página Especificar los detalles de la pila, escriba valores para los siguientes campos:

    • SubDomain— Introduzca el subdominio que va a utilizar en su sitio web. Por ejemplo, si el subdominio es www, el sitio web está disponible en www.example.com. (Reemplace example.com por su nombre de dominio, como se explica en el siguiente punto).

    • DomainName— Introduce tu nombre de dominio, como example.com. Este dominio debe apuntar a una zona alojada por Route 53.

    • HostedZoneId— El ID de zona alojada de Route 53 de su nombre de dominio.

    Cuando haya terminado, elija Next (Siguiente).

  4. (Opcional) En la página Configure stack options (Configurar las opciones la de pila), agregue etiquetas y otras opciones de pila.

    Cuando haya terminado, elija Next (Siguiente).

  5. En la página Revisar, desplácese hasta la parte inferior de la página y, a continuación, seleccione los dos cuadros de la sección Capacidades. Estas capacidades permiten a AWS CloudFormation crear un rol de IAM que concede acceso a los recursos de la pila y asignar nombres a los recursos de manera dinámica.

  6. Elija Create stack.

  7. Espere a que termine la creación de la pila. La pila crea algunas pilas anidadas y puede tardar varios minutos en terminar. Cuando termine, el estado cambia a CREATE_COMPLETE.

    Cuando el estado sea CREATE_COMPLETE, vaya a https://www.example.com para ver su sitio web (reemplace www.example.com por el subdominio y el nombre de dominio especificados en el paso 3). Debería ver el contenido predeterminado del sitio web:

    Contenido predeterminado del sitio web estático de esta solución. Se puede ver: "Soy un sitio web estático".
Para reemplazar el contenido predeterminado del sitio web por el suyo propio

  1. Abra la consola de Amazon S3 en https://console.aws.amazon.com/s3.

  2. Elija el bucket cuyo nombre comience por amazon-cloudfront-secure-static-site-s3bucketroot -.

    nota

    Asegúrese de elegir el bucket que tiene s3bucketroot en el nombre, no s3bucketlogs. El bucket con s3bucketroot en el nombre incluye el contenido del sitio web. El que tiene s3bucketlogs solo contiene archivos de registro.

  3. Elimine el contenido predeterminado del sitio web y, a continuación, cargue el suyo propio.

    nota

    Si has visitado tu sitio web con el contenido predeterminado de esta solución, es probable que parte del contenido predeterminado esté almacenado en caché en una ubicación perimetral. CloudFront Para asegurarse de que los espectadores vean el contenido actualizado de su sitio web, invalide los archivos y elimine las copias almacenadas en caché de CloudFront las ubicaciones periféricas. Para obtener más información, consulte Invalidar archivos.

Clonación local de la solución

Requisitos previos 

Para agregar contenido de su sitio web antes de implementar esta solución, debe empaquetar localmente los artefactos de la solución, lo que requiere Node.js y npm. Para obtener más información, consulte https://www.npmjs.com/get-npm.

Para agregar contenido de su sitio web e implementar la solución

  1. Clone o descargue la solución desde https://github.com/aws-samples/amazon-cloudfront-secure-static-site. Después de clonarla o descargarla, abra un símbolo del sistema o terminal y navegue hasta la carpeta amazon-cloudfront-secure-static-site.

  2. Ejecute el siguiente comando para instalar y empaquetar los artefactos de la solución:

    make package-static

  3. Copie el contenido de su sitio web en la carpeta www, con lo que se sobrescribe el contenido predeterminado del sitio web.

  4. Ejecute el siguiente comando de AWS CLI para crear un bucket de Amazon S3 a fin de almacenar los artefactos de la solución. example-bucket-for-artifactsSustitúyalo por el nombre de tu propio bucket.

    aws s3 mb s3://example-bucket-for-artifacts --region us-east-1

  5. Ejecute el siguiente comando de la AWS CLI para empaquetar los artefactos de la solución como una plantilla de AWS CloudFormation. example-bucket-for-artifactsReemplácelo por el nombre del depósito que creó en el paso anterior.

    aws cloudformation package \
    --region us-east-1 \ 
    --template-file templates/main.yaml \
    --s3-bucket example-bucket-for-artifacts \
    --output-template-file packaged.template

  6. Ejecute el siguiente comando para implementar la solución con AWS CloudFormation; para ello, reemplace los siguientes valores:

    • your- CloudFormation -stack-name: sustitúyelo por un nombre para la pila. AWS CloudFormation

    • example.com: reemplácelo por el nombre de su dominio. Este dominio debe apuntar a una zona alojada de Route 53 (Ruta 53) en la misma cuenta de AWS.

    • www: reemplácelo por el subdominio que se usará para su sitio web. Por ejemplo, si el subdominio es www, el sitio web está disponible en www.example.com.

    aws cloudformation deploy \
    --region us-east-1 \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides DomainName=example.com SubDomain=www

  7. Espere a que termine la creación de la pila de AWS CloudFormation. La pila crea algunas pilas anidadas y puede tardar varios minutos en terminar. Cuando termine, el estado cambia a CREATE_COMPLETE.

    Cuando el estado cambie a CREATE_COMPLETE, vaya a https://www.example.com para ver su sitio web (reemplace www.example.com por el subdominio y el nombre de dominio especificados en el paso anterior). Debería ver el contenido de su sitio web.

Búsqueda de registros de acceso

Esta solución permite los registros de acceso para la distribución de CloudFront. Complete los siguientes pasos para localizar los registros de acceso de la distribución.

Para localizar los registros de acceso de la distribución

  1. Abra la consola de Amazon S3 en https://console.aws.amazon.com/s3.

  2. Elige el depósito cuyo nombre comience por -site-s3bucketlogs-. amazon-cloudfront-secure-static

    nota

    Asegúrese de elegir el bucket que tiene s3bucketlogs en el nombre, no s3bucketroot. El bucket con s3bucketlogs en el nombre contiene los archivos de registro. El que tiene s3bucketroot incluye el contenido del sitio web.

  3. La carpeta denominada cdn contiene los registros de acceso. CloudFront