En el artículo anterior les mostramos cómo preparar el ambiente de desarrollo para crear una aplicación serverless desde cero. Fue bastante fácil y básico. Pero en esta sección vamos a subir un poco de nivel. Por eso esta parte de la guía va a requerir un conocimiento previo de Angular.
Bueno, primero lo primero. Para hospedar un proyecto de Angular o cualquier otra página en Amazon, es necesario crear un bucket. En general, es más sencillo crear y administrar un S3 bucket desde la CLI de Amazon. Sin embargo, para el proceso de hospedaje, resulta más fácil hacerlo desde la consola de administración en consola s3.
Estando en la consola, presionen Create Bucket. Cuando lo hagan, se abrirá una ventana con 4 pasos. En el primer paso deben ponerle un nombre al bucket, que debe ser único entre todos los buckets existentes en Amazon S3. Un ejemplo de nombre de bucket es pragma.demo.web-host. El nombre debe cumplir con los parámetros de nombres de DNS, por lo tanto, solo puede contener minúsculas, puntos y guiones (ojo que los guiones al piso no son permitidos).
Estando aún en el paso 1, la región se puede dejar como está por defecto, igual que los demás pasos.
Para hospedar una página creada en Angular, primero deben compilar el proyecto, de tal manera que exista dentro de él la carpeta: dist/nombre_proyecto. Los archivos que se encuentran en la ruta mencionada deben almacenarse en el bucket que se acaba de crear. Lo anterior se logra haciendo clic en el bucket. Después aparecerá una página como lo muestra la siguiente imagen:
Para subir los archivos basta con presionar el botón Upload. Seleccionar todos los archivos compilados que se encuentran en la ruta ya mencionada y dejar todas las opciones por defecto. Una vez subidos los archivos, debe quedar algo parecido a la imagen siguiente:
Para que el bucket se convierta en un hosting web, se debe realizar una configuración adicional. Estando en la consola de S3, seleccionen el bucket creado y hagan clic en la pestaña Properties. Acto seguido, hagan clic sobre la opción de Static website hosting, tal como lo muestra la imagen:
Al seleccionar la opción, aparecerá una ventana en la cual se dan varias opciones. La configuración debe quedar como se muestra en la imagen siguiente:
En la configuración anterior se especifica que el bucket se usará como un web hosting y además se indica el nombre del archivo que será el index de la página. En este caso, por ser un proyecto de Angular, el nombre del archivo es index.html. En la ventana de hosting también se muestra el endpoint de la página web; si todo se configuró correctamente, debería verse la página en el link proporcionado. Si no es así, se deben revisar los pasos anteriores.
Dado que una página web debe ser accesible para cualquiera que navegue en Internet, es necesario realizar una última configuración al bucket: asígnenle una política de acceso público. Lo anterior se logra en la consola de S3. Debe seleccionarse el bucket que está configurado para hospedar la web y seleccionar la pestaña Permissions. Luego, en Bucket Policy, establecezcan la siguiente política:
A continuación, se muestra la imagen con el resultado:
Finalizada la configuración, se puede verificar el acceso desde cualquier parte; una página en incógnito, por ejemplo.
Eso es todo por ahora.
En la próxima lección vamos a configurar una función Lambda con Node.js