En este módulo, configurará AWS Amplify para alojar los recursos estáticos de la aplicación web con implementación continua integrada. La consola de Amplify proporciona un flujo de trabajo basado en git para el alojamiento y la implementación continua de aplicaciones web de pila completa. En los siguientes módulos, incorporará funcionalidad dinámica a estas páginas mediante JavaScript para llamar a las API RESTful remotas creadas con AWS Lambda y Amazon API Gateway.
La arquitectura de este módulo es muy sencilla. Todo el contenido web estático, incluidos los archivos HTML, CSS, JavaScript y de imagen, entre otros, serán administrados por la consola de AWS Amplify. Después, los usuarios finales obtendrán acceso al sitio mediante la URL de sitio web público que se expone en la consola de AWS Amplify. No es necesario ejecutar ningún servidor web ni utilizar otros servicios para hacer que el sitio esté disponible.
Para la mayoría de las aplicaciones reales, es conveniente utilizar un dominio personalizado para alojar el sitio. Si desea utilizar su propio dominio, siga las instrucciones para configurar un dominio personalizado en Amplify.
Tiempo de realización del módulo: 15 minutos
Servicios utilizados: AWS Amplify
Siga las instrucciones paso a paso a continuación para alojar un sitio web estático. Haga clic en cada uno de los números de paso para ampliar la sección correspondiente.
-
Paso 1. Seleccione una región
Esta aplicación web se puede implementar en cualquier región de AWS que admita todos los servicios utilizados en la aplicación, entre los que se incluyen AWS Amplify, AWS CodeCommit, Amazon Cognito, AWS Lambda, Amazon API Gateway y Amazon DynamoDB.
Consulte la tabla de regiones para ver qué regiones cuentan con los servicios admitidos. A continuación, se indican algunas de las regiones admitidas que puede elegir:
- EE. UU. Este (Norte de Virginia)
- EE.UU. Este (Ohio)
- EE.UU. Oeste (Oregón)
- UE (Fráncfort)
- UE (Irlanda)
- UE (Londres)
- Asia Pacífico (Tokio)
- Asia Pacífico (Seúl)
- Asia Pacífico (Sídney)
- Asia-Pacífico (Mumbai)
Seleccione la región en el menú desplegable de la esquina superior derecha de la consola de administración de AWS.
(Haga clic para ampliar)
-
Paso 2: Cree un repositorio de Git
Tiene dos opciones para administrar el código fuente para este módulo: AWS CodeCommit (incluido en la capa gratuita de AWS) o GitHub. En este tutorial, usaremos CodeCommit para almacenar el código de la aplicación. Sin embargo, puede hacerlo mediante la creación de un repositorio en GitHub.
a. Abra la consola de AWS CodeCommit
b. Seleccione Crear repositorio
c. Establezca el nombre* del repositorio como “wildrydes-site”
d. Seleccione Crear
e. Ya que el repositorio se ha creado, configure un usuario de IAM con credenciales de Git en la consola de IAM. Para ello, siga las siguientes instrucciones.
f. De vuelta en la consola de CodeCommit, seleccione Clonar HTTPS en el menú desplegable de clonar la URL
g. Ejecute el clon de git y la URL HTTPS del repositorio desde una ventana de terminal:
$ git clone https://git-codecommit.us-east1.amazonaws.com/v1/repos/wildrydes-site
Clonando en “wildrydes-site”…
Nombre de usuario para “https://git-codecommit.us-east-1.amazonaws.com”:XXXXXXXXXX
Contraseña para “USERID”: XXXXXXXXXXXX
advertencia: Parece que ha clonado un repositorio vacío.
-
Paso 3: Rellene el repositorio de Git
Luego de haber utilizado AWS CodeCommit o GitHub para crear el repositorio de git y clonarlo localmente, deberá copiar el contenido del sitio web de un bucket de S3 con acceso público existente asociado con este taller y agregar el contenido al repositorio.
a. Cambie el directorio al repositorio y copie los archivos estáticos de S3:
cd wildrydes-site/
aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursiveb. Confirme los archivos en el servicio de Git
$ git add .
$ git pushConteo de objetos: 95, listo.
Compresión de objetos: 100 % (94/94), listo.
Escritura de objetos: 100 % (95/95), 9,44 MiB | 14,87 MiB/s, listo.
Total 95 (delta 2), reutilizados 0 (delta 0)
A https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
* [nueva ramificación] principal -> principal
-
Paso 4: Habilite el alojamiento web con la consola de AWS Amplify
A continuación, utilizará la consola de AWS Amplify para implementar el sitio web que acaba de confirmar en git. La consola de Amplify se encarga de configurar un lugar para almacenar el código de la aplicación web estática y proporciona varias capacidades útiles que simplifican el ciclo de vida de la aplicación y permiten las prácticas recomendadas.
a. Lance la página de la consola de la consola de Amplify
b. Haga clic en Comenzar bajo Implementar con la consola de Amplify
c. Seleccione el proveedor del servicio de repositorio utilizado hoy y seleccione Siguiente
d. Si utilizó GitHub, deberá autorizar AWS Amplify en la cuenta de GitHub
e. En el menú desplegable, seccione el Repositorio y la ramificación recién creados
e. En la página de “Configuración de compilación”, deje todos los valores predeterminados y seleccione Siguiente.
f. En la página “Revisar”, seleccione Guardar e implementar
g. El proceso tarda algunos minutos para que la consola de Amplify cree los recursos necesarios e implemente el código.
Una vez finalizado el proceso, haga clic en la imagen del sitio para lanzar el sitio de Wild Rydes.
Al hacer clic en el enlace de la Principal, verá los detalles de la compilación y la implementación relacionados con la ramificación, así como capturas de pantalla de la aplicación en varios dispositivos:
-
Paso 5: Modifique el sitio
La consola de AWS Amplify volverá a compilar e implementar la aplicación al detectar cambios en el repositorio conectado. Haga un cambio a la página principal para probar este proceso.
a. Abra la página “index.html” y modifique la línea del título para que diga: <title>Wild Rydes - Rydes of the Future!</title>
b. Guarde el archivo y confirme el repositorio de git nuevamente. La consola de Amplify comenzará a compilar el sitio nuevamente poco tiempo después de notar la actualización del repositorio. Ocurrirá rápidamente. Regrese a la página de la consola de la consola de Amplify para observar el proceso.
$ git add index.html $ git commit -m "updated title" [master dfec2e5] updated title 1 file changed, 1 insertion(+), 1 deletion(-) $ git push Counting objects: 3, done. Compressing objects: 100% (3/3), done. Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done. Total 3 (delta 2), reused 0 (delta 0) remote: processing To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site 2e9f540..dfec2e5 master -> master
c. Una vez finalizado, vuelva a abrir el sitio de Wild Rydes y observe el cambio de título.
-
Resumen
En este módulo, ha creado un sitio web estático, que será la base para el negocio de Wild Rydes. La consola de AWS Amplify hace que implementar sitios web estáticos bajo un modelo de integración y entrega continuas sea muy fácil. Tiene capacidades para “compilar” aplicaciones basadas en el marco de Javascript más complejas y tiene características como las implementaciones de ramificaciones de características, la fácil configuración de dominios personalizados, las implementaciones instantáneas y la protección de contraseñas.
