S3 está pensado para el almacenamiento, pero perfectamente puede «almacenar» los archivos HTML, JavaScript, CSS, imágenes o videos que forman un sitio web estático. Estos archivos pueden configurarse para que sean accesibles públicamente, lo que da lugar a un sito web perfectamente operativo.
Emplearemos el servicio AWS Amplify para conectar un repositorio Git con S3, de modo que las modificaciones realizadas en los archivos del repositorio se actualicen automáticamente en el sitio web. Es posible utilizar otros repositorios, incluido AWS CodeCommit, pero en nuestro caso usaremos GitHub. Además, Amplify utiliza CloudFront para la entrega de contenidos mediante CDN de AWS. También sería posible subir los archivos directamente, pero aconsejamos usar Git como almacén de contenidos, sobre todo si se trata de un trabajo donde pueden colaborar otros desarrolladores.
1. Conectar el repositorio.
Estamos suponiendo que contamos con una cuenta en GitHub.com. En caso contrario, en primer lugar debemos crear una cuenta nueva en GitHub.
Si ya tenemos una cuenta, incluso si ha sido recién creada, el primer paso será conectar el repositorio con Amplify. Para ello, iniciamos sesión en la consola y buscamos Amplify en los servicios de AWS. Enseguida aparecerá la consola de Amplify, donde seleccionamos Deliver/Get Started. Dentro de las opciones de repositorios, elegimos GitHub y vamos a continuar. Si Este abierta la sesión en GitHub, el navegador nos solicita permiso para conectar.
Una vez se ha confirmado la autorización, debemos seleccionar el repositorio desde el que se van a recibir los archivos. Si no lo hemos hecho ya, creamos un nuevo repositorio específico para este proyecto. Una vez seleccionado, elegimos todas las variables por defecto y pulsamos Save and deploy.
2. Crear contenido en el repositorio.
Con lo anterior simplemente hemos conectado Amplify con el repositorio, pero este está por el momento vacío. Vamos a añadir unos archivos sencillos. En primer lugar, añadimos un archivo índex.html:
<html>
<head>
<meta http-equiv=”Content-Type” content=text/html; charset=UTF-8 />
<title>Ejemplo hola mundo</title>
<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen" />
</head>
<body>
<h1>Hola Mundo</h1>
<p>Este es un ejemplo de página de inicio</p>
</body>
</html>y una hoja de estilo CSS /css/style.css:
h1 {color:red}
p {color: green}3. Visualizar el contenido.
En la página principal de la aplicación veremos el estado de la app y la URL en la que podemos visualizarla. Una vez que comprobamos que su estado es verify, podemos acceder al enlace del subdominio de amplifyapp.com para visualizar la web en el navegador.
4. Modificar y visualizar de nuevo el contenido.
Si modificamos cualquiera de los archivos índex.html o style.css, veremos tras unos instantes dichos cambios reflejados en la web. Para ello debemos esperar a que el estado de la app sea de nuevo verify.
Como podemos comprobar, cualquier cambio que realizamos en los archivos del repositorio se ven reflejados automáticamente en la web tras unos instantes.
Conclusión
Como hemos podido comprobar, es muy sencillo crear una web estática perfectamente operativa conectando los contenidos de un repositorio con AWS-S3 mediante AWS-Amplify. Cualquier cambio realizado en el repositorio es inmediatamente actualizado con Amplify para estar visible en la web. Existen muchas otras opciones dentro de Amplify, que veremos en nuevas entradas.
