Implemente de forma continua una aplicación web moderna de AWS Amplify desde un repositorio de AWS CodeCommit - Recomendaciones de AWS
ResumenRequisitos previos y limitacionesArquitecturaHerramientasEpicsRecursos relacionados

Implemente de forma continua una aplicación web moderna de AWS Amplify desde un repositorio de AWS CodeCommit

Deekshitulu Pentakota y Sai Katakam, Amazon Web Services

Resumen

Aviso: AWS CodeCommit ya no está disponible para los nuevos clientes. Los clientes existentes de AWS CodeCommit pueden seguir utilizando el servicio con normalidad. Más información.

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 frontend y el backend.

Este patrón emplea un repositorio de AWS CodeCommit 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

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

  • Repositorio de AWS CodeCommit que contiene React SPA

  • Flujo de trabajo de AWS Amplify Hosting

Arquitectura de destino

Diagrama de arquitectura de implementación de una aplicación web desde un repositorio de CodeCommit y alojamiento con AWS Amplify

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 permite almacenar y administrar repositorios de Git de forma privada, sin necesidad de administrar su propio sistema de control de origen.

  • 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

  • Node.js es un entorno de tiempo de ejecución de JavaScript basado en eventos y diseñado para crear aplicaciones de red escalables.

  • npm es un registro de software que se ejecuta en un entorno Node.js y se utiliza para compartir o tomar prestados paquetes y administrar la implementación de paquetes privados.

Epics

TareaDescripciónHabilidades requeridas

Creación de un repositorio.

Para obtener más instrucciones, consulte Crear un repositorio de AWS CodeCommit en la documentación de CodeCommit.

DevOps de AWS

Clonar el repositorio.

Para obtener más instrucciones, consulte Conectar al repositorio de CodeCommit clonando el repositorio en la documentación de CodeCommit. Si se le solicita iniciar sesión, proporcione sus credenciales de Git.

Desarrollador de aplicaciones
TareaDescripciónHabilidades requeridas

Para crear una nueva aplicación React.

  1. Ingrese el comando siguiente para navegar en el repositorio clonado. Sustituya <repo name> por el nombre de su repositorio de CodeCommit.

    $ cd <repo name>

  2. Ejecute el siguiente comando para crear una nueva aplicación de React en el repositorio clonado.

    $ npx create-react-app .

  3. Codifique la aplicación y, a continuación, ejecute el siguiente comando para iniciarla.

    $ npm start

Para obtener más información sobre cómo crear una aplicación React personalizada, consulte las instrucciones Crear una aplicación React en la documentación de Crear una aplicación React. También puede implementar una aplicación React de muestra en su cuenta de Amplify siguiendo las instrucciones de Implementar un frontend en la documentación de Amplify.

Desarrollador de aplicaciones

Cree una ramificación e introduzca el código.

  1. Ejecute el siguiente comando para crear una nueva ramificación local. <branch> es el nombre que desea asignar a la nueva ramificación.

    $ git checkout -b <branch>

  2. Ejecute el siguiente comando para enviar la ramificación al repositorio de CodeCommit. <branch> es el nombre que asignó en el paso anterior. Para obtener más información, consulte Trabajar con confirmaciones.

    $ git push --set-upstream origin <branch>
Desarrollador de aplicaciones
TareaDescripciónHabilidades 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 ramificación 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.

Build settings:
version: 0.1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: build
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*
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
TareaDescripciónHabilidades 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 y envíe los cambios al repositorio de CodeCommit. 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

Documentación de AWS CodeCommit

Documentación de AWS Amplify Hosting

Recursos de React