Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés.
Implemente de forma continua una aplicación web AWS Amplify moderna desde un repositorio de AWS CodeCommit
Creado por Deekshitulu Pentakota (AWS) y Sai Katakam (AWS)
Entorno: PoC o piloto | Tecnologías: aplicaciones web y móviles; Modernización DevOps | Servicios de AWS: AWS Amplify; AWS CodeCommit |
Resumen
Las aplicaciones web modernas se construyen como una sola página de aplicaciones (SPA) que engloban todos los componentes de la aplicación en archivos estáticos. Con AWS Amplify Hosting, puede diseñar un proceso de integración e implementación continuas (CI/CD) que cree, implemente y aloje una aplicación web moderna administrada en un repositorio basado en Git. Al conectar Amplify Hosting al repositorio de código, cada confirmación inicia un único flujo de trabajo para implementar el frontend y el backend de la aplicación. El beneficio de este enfoque es que la aplicación web se actualiza solo después de haber realizado correctamente la implementación, lo que elimina inconsistencias entre el front-end y el backend.
En este patrón, utiliza un CodeCommit repositorio de AWS para administrar su aplicación web moderna. La aplicación web de ejemplo que se incluye en estas instrucciones emplea el marco React SPA. Sin embargo, Amplify Hosting es compatible con muchos otros marcos SPA, como Angular, Vue o Next.js, y también con generadores de sitio único, como Gatsby, Hugo y Jekyll.
Este patrón está destinado a creadores de AWS que tienen experiencia con los siguientes servicios y conceptos:
AWS CodeCommit
AWS Amplify Hosting
React
JavaScript
Node.js
npm
Git
Requisitos previos y limitaciones
Requisitos previos
Una cuenta de AWS activa.
Permisos para crear recursos en Amplify y. CodeCommit Para obtener más información, consulte Identity and Access Management for Amplify e Identity and Access Management for AWS. CodeCommit
Interfaz de la línea de comandos de AWS (AWS CLI) instalada y configurada.
Un editor de texto o de código.
CodeCommit, configurado para los usuarios de HTTPS que utilizan credenciales de Git.
Un rol de servicio de IAM para Amplify.
npm y Node.js instalados
(documentación de npm).
Limitaciones
Este patrón no aborda el desarrollo y la integración de un backend para la aplicación de Amplify, como API, autenticación o base de datos. Para obtener más información, consulte Crear un backend en la documentación de Amplify.
Versiones de producto
CLI de AWS versión 2.0
Node.js versión 16.x o posterior
Arquitectura
Pila de tecnología de destino
CodeCommitRepositorio de AWS que contiene un SPA de React
Flujo de trabajo de AWS Amplify Hosting
Arquitectura de destino
![Diagrama de arquitectura de implementación de una aplicación web desde un CodeCommit repositorio y alojamiento con AWS Amplify](images/pattern-img/370c0a43-fc09-46dc-a018-853cbd4cff11/images/746a9450-6a0b-4798-bf22-e8f89c7933f6.png)
Herramientas
Servicios de AWS
AWS Amplify Hosting proporciona un flujo de trabajo basado en Git para alojar aplicaciones web sin servidor de pila completa con implementación continua.
AWS CodeCommit es un servicio de control de versiones que le ayuda a almacenar y gestionar repositorios de Git de forma privada, sin necesidad de gestionar su propio sistema de control de código fuente.
AWS Identity and Access Management (IAM) le permite administrar de forma segura el acceso a los recursos de AWS mediante el control de quién está autenticado y autorizado a utilizarlos.
Otras herramientas
Epics
Tarea | Descripción | Habilidades requeridas |
---|---|---|
Creación de un repositorio. | Para obtener instrucciones, consulte Crear un CodeCommit repositorio de AWS en la CodeCommit documentación. | AWS DevOps |
Clonar el repositorio. | Para obtener instrucciones, consulte Conectarse al CodeCommit repositorio mediante la clonación del repositorio en la CodeCommit documentación. Si se le solicita iniciar sesión, proporcione sus credenciales de Git. | Desarrollador de aplicaciones |
Tarea | Descripción | Habilidades requeridas |
---|---|---|
Para crear una nueva aplicación React. |
Para obtener más información sobre cómo crear una aplicación React personalizada, consulte las instrucciones Crear una aplicación React | Desarrollador de aplicaciones |
Cree una ramificación e introduzca el código. |
| Desarrollador de aplicaciones |
Tarea | Descripción | Habilidades requeridas |
---|---|---|
Conecte Amplify al repositorio. | Para obtener más instrucciones, consulte Conectar un repositorio en la documentación de Amplify Hosting. Seleccione AWS CodeCommit y el repositorio y la rama que creó anteriormente. | Desarrollador de aplicaciones |
Defina la configuración de compilación del frontend. | Para obtener más instrucciones, consulte Confirmar la configuración de compilación de frontend en la documentación de Amplify Hosting. Acepte los valores predeterminados o introduzca los siguientes.
| Desarrollador de aplicaciones |
Revise e implemente. | Para obtener más instrucciones, consulte Guardar e implementar en la documentación de Amplify Hosting. Espere hasta que se complete el proceso de implementación. | Desarrollador de aplicaciones |
Tarea | Descripción | Habilidades requeridas |
---|---|---|
Verifique la implementación inicial. | Cuando se complete el proceso de implementación, seleccione el enlace en Dominio. Compruebe que la aplicación funciona según lo previsto. | Desarrollador de aplicaciones |
Envíe los cambios al repositorio de código. | Edite el código en su estación de trabajo local e inserte los cambios en el CodeCommit repositorio. Amplify Hosting detectará el cambio en el repositorio e iniciará automáticamente el proceso de creación e implementación. Confirme que las actualizaciones de la aplicación sean visibles en el dominio. | Desarrollador de aplicaciones |
Recursos relacionados
CodeCommit Documentación de AWS
Documentación de AWS Amplify Hosting
Recursos de React