Introducción a código existente - AWS Amplify

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.

Introducción a código existente

En este tutorial, aprenderá a compilar, implementar y alojar de forma continua una aplicación web moderna. Las aplicaciones web modernas incluyen marcos de trabajo Single Page Apps (SPA) (por ejemplo, React, Angular o Vue) y generadores de sitios estáticos (SSG) (por ejemplo, Hugo, Jekyll o Gatsby). Amplify también admite aplicaciones web que utilizan la representación del lado del servidor (SSR) y se crean con Next.js.

Para comenzar, inicie sesión en elConsola de Amplify. Si está comenzando desde elAWS AmplifyPágina de inicio de, elijaIntroducciónen la parte superior de la página.


         Captura de pantalla de la página de inicio de AWS Amplify.

A continuación, elijaIntroducciónUNDEREntregar.


         Captura de pantalla de la sección Delivere (Entregar) en la parte inferior de la página de inicio de AWS Amplify.

Si está comenzando desde elTodas las aplicaciones, elijaNueva aplicación,Alojamiento de una aplicación weben la esquina superior derecha.


         Captura de pantalla de la página Todas las aplicaciones de la consola de Amplify.

Paso 1: Connect repositorio

Conecte sus repositorios de GitHub, Bitbucket, GitLab o AWS CodeCommit. También tiene la opción de cargar manualmente sus artefactos de compilación sin necesidad de conectar un repositorio de Git (consulte el artículo sobre las implementaciones manuales). Después de autorizar la consola de Amplify, Amplify obtiene un token de acceso del proveedor del repositorio, perono almacena el tokenen los servidores de AWS. Amplify obtiene acceso a su repositorio utilizando claves de implementación instaladas solo en un repositorio específico.

Después de conectarse al proveedor de servicios de repositorio, seleccione un repositorio y, a continuación, elija una ramificación correspondiente para compilar e implementar.

Paso 2a: Confirme la configuración de compilación para el front-end

Para la ramificación seleccionada, Amplify inspecciona el repositorio para detectar automáticamente la secuencia de comandos de compilación que se va a ejecutar.

Importante: Compruebe que el directorio de salida de compilación y comandos de compilación (es decir, artifacts > baseDirectory (baseDirectory > baseDirectory) es correcto. Si tiene que modificar esta información, elija Edit (Editar) para abrir el editor YML. Puede guardar la configuración de compilación en nuestros servidores, o bien puede descargar el archivo YML y añadirlo a la raíz de su repositorio (para monorepos, almacene el archivo YML en el directorio raíz de la aplicación).

Para obtener más información, consulte Estructura de YML.

Paso 2b: Confirmar la configuración de compilación para el back-end

Si ha conectado un repositorio aprovisionado por la versión 1.0+ de la CLI de Amplify (ejecute amplify -v para buscar la versión de la CLI), la consola de Amplify implementará o actualizará automáticamente recursos de backend (cualquier recurso aprovisionado por la CLI de Amplify) en un solo flujo de trabajo con la compilación de front-end. Puede elegir apuntar un entorno de backend existente a su ramificación, o bien crear un entorno completamente nuevo. Para obtener un tutorial paso a paso, consulteImplementación de una aplicación fullstack.

Para implementar la funcionalidad de backend mediante la interfaz de línea de comandos (CLI) de Amplify durante la compilación, cree o reutilizar un rol de servicio de AWS Identity and Access Management (IAM). Los roles de IAM son una manera segura de conceder permisos a la consola de Amplify para actuar en los recursos de su cuenta.

Nota: La interfaz de línea de comandos (CLI) de Amplify no ejecutará sin un rol de servicio de IAM habilitado.

Paso 2c: Agregar variables de entorno (opcional)

Casi todas las aplicaciones necesitan obtener información de configuración en tiempo de ejecución. Estas configuraciones pueden ser los detalles de conexión de base de datos, claves de API o parámetros diferentes. Las variables de entorno proporcionan un medio de exponer estas configuraciones en el momento de la compilación.

Paso 3: Guarde e implemente

Revise toda la configuración para garantizar que todo se haya configurado correctamente. Elija Save and deploy (Guardar e implementar) para implementar su aplicación web en una red de entrega de contenido (CDN) global. La compilación de front-end suele tardar de 1 a 2 minutos, pero puede variar en función del tamaño de la aplicación.

Acceda a la pantalla de registros de compilación seleccionando un indicador de progreso en el mosaico de la ramificación. Una compilación tiene las siguientes etapas:

  1. Aprovisionamiento: el entorno de compilación se configura mediante una imagen de Docker en un host con 4 vCPU, 7 GB de memoria. Cada compilación obtiene su propia instancia de host, lo que garantiza que todos los recursos se aíslen de forma segura. Se muestra el contenido del archivo de Docker para garantizar que la imagen predeterminada sea compatible con sus requisitos.

  2. Compilación: la fase de compilación consta de tres etapas: configuración (clona el repositorio en contenedor), implementar backend (ejecuta la CLI de Amplify para implementar recursos de backend) y compilar front-end (compila los artefactos del front-end).

  3. Implementación: cuando se completa el proceso de compilación, todos los artefactos se implementan en un entorno de alojamiento administrado por Amplify. Cada implementación es atómica: las implementaciones atómicas eliminan los períodos de mantenimiento asegurándose de que la aplicación web solo se actualice después de haber completado toda la implementación.

  4. Verificación: para verificar que la aplicación funciona correctamente, Amplify reproduce capturas de pantalla de index.html en varias resoluciones de dispositivos con Headless Chrome.

Pasos siguientes