Publicar web angular usando AWS S3

Si lo que deseamos es publicar nuestro site angular de manera rápida usando AWS una de las opciones a usar es el Servicio Amazon S3 (Simple Storage Service).

Pasos a Realizar

1. Crear un Bucket con configuración por defecto.

Imagen 1: Servicio S3. (Fuente Propia)



Imagen 2: Crear Bucket. (Fuente Propia)



Imagen 3: Configuración de nombre y region de Bucket. (Fuente Propia)



Imagen 4: Crear Bucket. (Fuente Propia)


2. Ingresar al Bucket creado e ir a la sección Permission y editar la opción "Block public access"

Imagen 5: Bucket. (Fuente Propia)



Imagen 6: Editar Block Public Access. (Fuente Propia)



Imagen 7: Desactivando Block Public Access. (Fuente Propia)



Imagen 8: Confirmando cambio. (Fuente Propia)


3. En la misma sección Permission, editamos "Bucket policy" y agregamos el siguiente código (tener en cuenta que debemos reemplazar valor <BucketName> por el nombre de nuestro Bucket).



Imagen 9: Editar Bucket Policy. (Fuente Propia)



Imagen 10: Guardando cambios de Bucket Policy. (Fuente Propia)


4. Ahora tenemos que ir a Properties y editar la opción Static website hosting, activamos la opción y especificamos los campos index document y error document. Después que terminemos esta configuración se nos proveerá una URL en la opción Static website hosting.

Imagen 11: Ir a Properties. (Fuente Propia)



Imagen 12: Editar Static Website Hosting. (Fuente Propia)



Imagen 13: Configuración de Static Website Hosting. (Fuente Propia)



Imagen 14: Guardar cambios realizados. (Fuente Propia)



Imagen 15: URL provista por S3. (Fuente Propia)



Imagen 16: Web Vacía. (Fuente Propia)


5. Ahora solo debemos generar nuestros archivos usando el comando ng build --prod y subirlo al bucket.

Imagen 17: Generación de archivos a publicar. (Fuente Propia)

Imagen 18: Cargar archivos. (Fuente Propia)

Imagen 19: Agregar Archivos. (Fuente Propia)

Imagen 20: Seleccionar archivos a subir. (Fuente Propia)

Imagen 21: Cargar archivos seleccionados. (Fuente Propia)

Imagen 22: Carga de archivos correcta. (Fuente Propia)

Imagen 23: Web publicada usando Angular y S3. (Fuente Propia)