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

Introducción a un sitio web seguro estático

Puede comenzar a usar Amazon CloudFront con la solución descrita en este tema para crear un sitio web estático seguro para su nombre de dominio. Un sitio web estático solo utiliza archivos estáticos, como HTML, CSS, JavaScript, imágenes y vídeos, y no necesita servidores ni procesamiento del lado 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.

  • Está acelerado por la red de entrega de contenido de Amazon CloudFront: esta solución crea una distribución de CloudFront para servir su sitio web a los lectores con baja latencia. La distribución está configurada con un control de acceso de origen (OAC) para asegurarse de que solo se pueda acceder al sitio web mediante CloudFront, no directamente desde S3.

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

  • 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 lector.

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

  4. S3 devuelve el objeto a CloudFront.

  5. CloudFront almacena el objeto en caché.

  6. Los objetos se devuelven al espectador. Las solicitudes posteriores del objeto que llegan a la misma ubicación de borde de CloudFront se sirven desde la memoria caché de CloudFront.

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 usar la región Este de EE. UU. (Norte de Virginia) para implementar la plantilla de CloudFormation.

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 la misma Cuenta de AWS en la que 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.

  • Permisos de AWS Identity and Access Management (IAM) para iniciar plantillas de CloudFormation que crean roles de IAM y permisos para crear todos los recursos de AWS en la solución. Para obtener más información, consulte Controlar el acceso con AWS Identity and Access Management en la Guía del usuario de AWS CloudFormation.

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 Servicio de AWS.

Uso de la consola de AWS CloudFormation

Para efectuar la implementación mediante la consola de CloudFormation

  1. Inicie esta solución en la consola de AWS CloudFormation. Si es necesario, inicie sesión en la Cuenta de AWS.

  2. Se abre el asistente Crear pila en la consola de CloudFormation, con campos ya rellenados que especifican la plantilla de CloudFormation 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 (SubDominio): escriba el subdominio que se va a utilizar para 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 (NombreDominio): escriba su 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 del nombre de dominio.

    • CreateApex: (opcional) cree un alias para el ápex del dominio (example.com) en la configuración de CloudFront.

  4. Cuando haya terminado, elija Next (Siguiente).

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

  6. Cuando haya terminado, elija Next (Siguiente).

  7. 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 CloudFormation crear un rol de IAM que permite el acceso a los recursos de la pila y asignar nombres a los recursos dinámicamente.

  8. Elija Create stack.

  9. 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 comienza 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 ha visto su sitio web con el contenido predeterminado de esta solución, es probable que parte del contenido predeterminado se almacene en caché en una ubicación de borde de CloudFront. Para asegurarse de que los lectores vean el contenido actualizado del sitio web, invalide los archivos para quitar las copias almacenadas en caché de las ubicaciones de borde de CloudFront. Para obtener más información, consulte Invalidación de archivos para eliminar el contenido.

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. Reemplace amzn-s3-demo-bucket-for-artifacts por el nombre de bucket propio.

    aws s3 mb s3://amzn-s3-demo-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 CloudFormation. Reemplace amzn-s3-demo-bucket-for-artifacts por el nombre del bucket que ha creado en el paso anterior.

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

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

    • your-CloudFormation-stack-name: reemplácelo por un nombre para la pila de CloudFormation.

    • example.com: reemplácelo por el nombre de su dominio. Este dominio debe apuntar a una zona alojada de Route 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.

    • hosted-zone-ID: reemplácelo por el ID de zona alojada de Route 53 del nombre de dominio.

    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 HostedZoneId=hosted-zone-ID

    1. (Opcional) Para implementar la pila con un ápex de dominio, ejecute el siguiente comando en su lugar.

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

  7. Espere a que se termine de crear la pila de 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 habilita 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. Elija el bucket cuyo nombre comience por amazon-cloudfront-secure-static-site-s3bucketlogs-.

    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 de CloudFront.