Amazon CloudFront es un servicio rápido de red de entrega de contenido (CDN) con baja latencia, altas velocidades de transferencia y dentro de un entorno fácil para desarrolladores.

Amazon S3 o Amazon Simple Storage Service es un "servicio de almacenamiento simple" ofrecido por Amazon Web Services (AWS) que proporciona almacenamiento de objetos a través de una interfaz de servicio web. Está diseñado para facilitar a los desarrolladores recursos de computación escalables basados en Web.

Una vez que tenemos una visión general de los dos servicios principales de AWS que vamos a usar, ya podemos empezar a desplegar nuestro sitio web estático.

Vamos a partir de la base que tenemos configurado correctamente AWS Command Line Interface (AWS CLI). Si no es así, este tutorial nos puede ayudar: https://docs.aws.amazon.com/es_es/cli/latest/userguide/cli-chap-configure.html

En Amazon S3 almacenaremos los archivos de nuestro sitio estático: HTML, CSS, JS, imágenes, videos, etc.

S3 necesita que crees un bucket, que actúe como un directorio, es aquí donde almacenaremos nuestros archivos del sitio estático.

Ejecute los siguientes comandos en su terminal:

Estos dos comandos crearán un bucket llamado test-static.com y además le dirán a S3 que trate el bucket como un sitio web estático, renderizando index.html cuando el usuario visite la URL raíz, y mostrando error.html cuando el usuario intenta visitar una página que no existe.

El siguiente paso es subir los archivos estáticos de la web en el bucket recién creado.

El comando anterior mueve todos los ficheros de nuestro sitio estático alojados en el path (/path/static/site) al bucket test-static.com. La opción de lectura pública –acl le dice a Amazon que se asegure de que todos los archivos que cargue se puedan leer públicamente. Las opciones –sse le indican a Amazon que almacene estos archivos cifrados (más información: https://docs.aws.amazon.com/es_es/AmazonS3/latest/dev/UsingServerSideEncryption.html). La opción –delete permite eliminar todos los archivos del bucket que no existan en su carpeta local.

Cuando se complete este paso, tendremos un sitio web funcional que podemos probar visitando la URL que Amazon S3 nos haya dado para el bucket. Por ejemplo: http://test-static.com.s3-website-us-east-1.amazonaws.com

En este paso vamos a configurar el servicio Amazon CloudFront que en realidad es un servicio CDN que ofrece Amazon. De esta manera cuando los usuarios visiten nuestro sitio web, en realidad visitarán una copia en caché que CloudFront almacena en varios centros de datos en todo el mundo.

CloudFront también puede comprimir las páginas web para minimizar la transferencia de ancho de banda.

Empezaremos visitando el panel de CloudFront, hacemos clic en Create Distribution y después en el botón Get Started en la sección Web (nos aseguramos de no seleccionar RTMP).

A continuación aparecerá el siguiente formulario:

Rellenaremos el formulario, los datos más importantes son:

• En Origin Domain Name, pondremos la URL que nos dio Amazon S3: http://test-static.com.s3-website-us-east-1.amazonaws.com
• En Viewer Protocol Policy, seleccionamos Redirigir HTTP a HTTPS (porque planeamos servir este sitio a través de SSL).
• Activamos la compresión de objetos automáticamente (Compress Objects Automatically).
• En Alternate Domain Names, insertamos nuestro dominio real. Por ejemplo: test-static.com
• En Default Root Object, insertamos index.html. Con esto le indicamos a CloudFront que renderice index.html de manera predeterminada cuando un usuario visita nuestro sitio web.
• En SSL Certificate, seleccionamos Custom SSL Certificate. Aquí es donde vamos a generar un nuevo certificado SSL. Hacemos clic en el botón Request or Import a Certificate with ACM (se abrirá una nueva ventana).
  Ingresamos nuestro nombre de dominio (test-static.com) y confirmamos la solicitud. Ahora, debemos hacer clic en el enlace de verificación que Amazon nos enviará al correo electrónico registrado para nuestro dominio. Esto le permite a Amazon saber que somos el propietario del dominio.
  Volvemos a la página de configuración de CloudFront en la que estábamos y hacemos clic en el pequeño icono de actualización en la sección Custom SSL Certificate. Ahora podremos seleccionar nuestro nuevo certificado SSL desde el menú desplegable.
• Por último hacemos clic en el botón Create Distribution

Ya tenemos creada nuestra distribución en CloudFront. Debemos esperar unos 15 minutos para que se despliegue en todos los centros de datos de AWS.

Una vez que nos indique que esta operación ha finalizado podemos ver nuestro sitio web estático a través del CDN de CloudFront copiando la URL de la columna Origin en el panel de CloudFront. Esta es la dirección pública de CloudFront para nuestro sitio web.