Implementar una aplicación web en Amazon Amplify

GUÍA DE INTRODUCCIÓN

Módulo 3: Automatizar la implementación

En este módulo, implementará su aplicación web mediante la canalización CI/CD integrada de Amplify

Introducción

En este módulo, almacenará su aplicación en un repositorio de GitHub (“repo” para abreviar) y luego configurará la implementación continua mediante la consola de Amplify.

Lo que aprenderá

  • Conectar un repositorio de GitHub a Amplify
  • Configurar la implementación continua mediante Amplify

 Tiempo de realización

5 minutos

 Requisitos previos del módulo

  • Una cuenta de AWS con acceso de nivel de administrador**
  • Navegador recomendado: la última versión de Chrome o Firefox

[**] Es posible que las cuentas creadas en las últimas 24 horas aún no tengan acceso a los servicios necesarios para este tutorial.

Implementación

Almacenar proyecto en GitHub

Antes de que pueda configurar su proyecto para implementar actualizaciones de manera automática, es necesario alojarlo en algún sitio. Esta guía asume que está familiarizado con GitHub, dispone de cuenta y sabe cómo crear un repositorio privado nuevo. Cree un repo privado, y envíe el código que ha creado hasta ahora a ese repo.

Configurar la implementación continua

Para configurar Amplify de modo que implemente su código, necesita conectarlo con su cuenta de GitHub. Esto se hace a través de la consola de AWS, puesto que es necesario generar un token de GitHub para acceder a su repo privado, y almacenarlo en su cuenta de AWS. Para ello, desde el directorio amplify-app, ejecute amplify add hosting. Amplify mostrará una lista de preguntas sobre el alojamiento; seleccione las opciones que se muestran a continuación:

amplify add hosting

? Select the plugin module to execute (Use arrow keys)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3
? Choose a type
❯ Continuous deployment (Git-based deployments)
  Manual deployment
  Learn more

Esto hará que se lance una nueva ventana en su navegador, y abrirá la consola de Amplify para que configure el alojamiento de su proyecto. Desde la página de aplicaciones de la consola de Amplify, haga clic en la pestaña Frontend environments (Entornos de frontend, seleccione GitHub y haga clic en el botón Connect branch (Conectar ramificación).

gsg-build-amplify-4.png

Esto le redirigirá a GitHub. Ahora le dará a la consola de Amplify acceso a su cuenta de GitHub, de modo que pueda implementar el código fuente que aloja allí. Para hacerlo, haga clic en el botón de color verde Authorize aws-amplify-console (Autorizar aws-amplify-console).

gsg-build-amplify-5

Ahora, conectará su repo de GitHub a su aplicación de Amplify. Desde la página Add repository branch (Agregar ramificación de repositorio), seleccione el repo amplify-web-app y la ramificación main. A continuación, haga clic en Next (Siguiente).

gsg-build-amplify-6

El siguiente paso es configurar los ajustes de creación para su aplicación. Va a necesitar una función de servicio de IAM que permita a Amplify acceder a los recursos de AWS ubicados dentro de su cuenta para realizar la implementación de manera automática. En la página Configure build settings (Configurar ajustes de creación), haga clic en el botón Create new role (Crear nuevo rol) ubicado dentro de la caja azul.

gsg-build-amplify-7

Esto hará que se abra la consola de IAM en una nueva pestaña, y se rellenará con los valores requeridos; haga clic en Create Role (Crear rol):

  • Tipo de entidad de confianza: Servicio de AWS
  • Servicio: Amplify
  • Caso de uso: Amplify - Implementación de backend
  • Política de permisos: AdministratorAccess-Amplify
gsg-build-amplify-8

Una vez creado, puede cerrar esta pestaña en su navegador y volver a la página Configure build settings (Configurar ajustes de creación), donde debe hacer clic en Refresh existing roles (Actualizar roles existentes) y seleccionar el rol que acaba de crear en el menú desplegable. A continuación, seleccione dev del menú desplegable Environment (Entorno): este es el entorno que creó al configurar Amplify en su proyecto tras ejecutar amplify init.

Deje los ajustes restantes con sus valores predeterminados y haga clic en Next (Siguiente).

gsg-build-amplify-9

Revise los valores que ha configurado y haga clic en Save and deploy (Guardar e implementar). Amplify comenzará a implementar automáticamente su aplicación de React en los cambios de repositorio de origen.

gsg-build-amplify-10

Ahora puede volver a su terminal y seguir el progreso si presiona Intro:

? Continuous deployment is configured in the Amplify Console. Please hit enter once you connect your repository
Amplify hosting urls:
┌──────────────┬────────────────────────────────────────────┐
│ FrontEnd Env │ Domain                                     │
├──────────────┼────────────────────────────────────────────┤
│ main         │ https://main.d339jiqv9kzj2m.amplifyapp.com │
└──────────────┴────────────────────────────────────────────┘

Una vez que se complete la implementación, estará disponible en la URL impresa, y cualquier persona podrá acceder a su aplicación mediante esta URL.

Conclusión

En este módulo, ha aprendido a conectar su repo de GitHub privado con el código de la aplicación web para configurar la implementación automática con Amplify. En el siguiente módulo, aprenderá a eliminar la aplicación que acaba de implementar, junto con todos los recursos de AWS que ha creado para esta.

Siguiente: Eliminación de recursos

Háganos saber su opinión.

Agradecemos sus comentarios
Nos alegra que esta página le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar
Agradecemos sus comentarios
Lamentamos que esta página no le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar