Creación de un backend de una aplicación de Gen 1 - Alojamiento de AWS Amplify
Requisitos previosPaso 1: implementar un frontendPaso 2: crear un backendPaso 3: conectar el backend al frontendPasos a seguir a continuación

Creación de un backend de una aplicación de Gen 1

En este tutorial podrá configurar un flujo de CI/CD de pila completa con Amplify. Implementará una aplicación frontend en Amplify Hosting. A continuación, creará un backend con Amplify Studio. Y, finalmente, conectará el backend en la nube a la aplicación frontend.

Requisitos previos

Antes de comenzar este tutorial, complete los siguientes requisitos previos.

Cómo crear una Cuenta de AWS

Si aún no es cliente de AWS, debe seguir las instrucciones en línea para crear una Cuenta de AWS. Cuando lo haga, tendrá acceso a Amplify y otros servicios de AWS que puede usar con su aplicación.

Creación de un repositorio de Git

Amplify admite GitLab, GitHub y Bitbucket y AWS CodeCommit. Envíe su aplicación en su repositorio de Git.

Instalación de la interfaz de la línea de comandos (CLI) de Amplify

Para obtener más instrucciones, consulte Instalar la CLI de Amplify en la Documentación de Amplify Framework.

Paso 1: implementar un frontend

Si ya tiene una aplicación frontend en un repositorio de git y quiere usarla en este tutorial, proceda con las instrucciones para implementar una aplicación de frontend.

Si necesita crear una nueva aplicación frontend para usarla en este ejemplo, puede seguir las instrucciones Create React App en la documentación de Create React App.

Para implementar una aplicación frontend

  1. Inicie sesión en Consola de administración de AWS y abra la consola de Amplify.

  2. En la página Todas las aplicaciones, elija Nueva aplicación y, a continuación, Alojar aplicación web en la esquina superior derecha.

  3. Elija su proveedor de repositorios: GitHub, Bitbucket, GitLab o AWS CodeCommit y, a continuación, elija Continuar.

  4. Amplify autorizará el acceso a su repositorio de git. Ahora, Amplify cuenta con la característica de aplicaciones de GitHub para autorizar el acceso de Amplify a repositorios de GitHub.

    Para obtener más información sobre la instalación y autorización de la aplicación de GitHub, consulte Configurar el acceso de Amplify a repositorios de GitHub.

  5. En la página Añadir ramificación de repositorio, siga estos pasos:

    1. En la lista de Repositorios actualizados recientemente, seleccione el nombre del repositorio que desea conectar.

    2. En la lista de Ramificaciones, seleccione el nombre de la ramificación del repositorio que desea conectar.

    3. Elija Siguiente.

  6. En la página Configurar los ajustes de compilación, elija Siguiente.

  7. En la página Revisar, elija Guardar e implementar. Una vez completada la implementación, podrá ver su aplicación en el dominio predeterminado amplifyapp.com.

nota

Para aumentar la seguridad de las aplicaciones de Amplify, el dominio amplifyapp.com se ha registrado en la lista de sufijos públicos (PSL). Para una mayor seguridad, le recomendamos que utilice cookies con un prefijo __Host- si alguna vez necesita configurar cookies confidenciales en el nombre de dominio predeterminado de las aplicaciones de Amplify. Esta práctica le ayudará a proteger su dominio de los intentos de falsificación de solicitudes entre sitios (CSRF). Para obtener más información, consulte la página de configuración de cookies en la red de desarrolladores de Mozilla.

Paso 2: crear un backend

Ahora que ha implementado una aplicación frontend en Amplify Hosting, puede crear un backend. Siga estas instrucciones para crear un backend con una base de datos simple y un punto de conexión de API GraphQL.

Para crear un backend

  1. Inicie sesión en Consola de administración de AWS y abra la consola de Amplify.

  2. En la página Todas las aplicaciones, seleccione la aplicación que ha creado en el Paso 1.

  3. En la página de inicio de la aplicación, elija la pestaña Entornos de backend y, a continuación, elija Comenzar. Se iniciará el proceso de configuración en un entorno de ensayo predeterminado.

  4. Una vez finalizada la configuración, elija Launch Studio para acceder al entorno de backend de ensayo de Amplify Studio.

Amplify Studio es una interfaz visual que le permite crear y gestionar el backend, además de acelerar el desarrollo de la interfaz de usuario de frontend. Para obtener más información acerca de Amplify Studio, consulte la documentación de Amplify Studio.

Siga estas instrucciones para crear una base de datos simple usando la interfaz del compilador visual de backend de Amplify Studio.

Crear un modelo de datos

  1. En la página de inicio del entorno de ensayo de su aplicación, elija Crear modelo de datos. Se abrirá el diseñador del modelo de datos.

  2. En la página Modelado de datos, elija Añadir modelo.

  3. Para el título, indique Todo.

  4. Elija Añadir un campo.

  5. En Nombre de campo, indique Description.

    La siguiente captura de pantalla es un ejemplo del aspecto que tendrá su modelo de datos en el diseñador.

    Interfaz de usuario de Amplify Studio para crear un modelo de datos.

  6. Elija Guardar e implementar.

  7. Regrese a la consola de Amplify Hosting. La implementación del entorno de ensayo estará ya en marcha.

Durante la implementación, Amplify Studio creará todos los recursos de AWS necesarios en el backend, como una API GraphQL de AWS AppSync para acceder a los datos y una tabla de Amazon DynamoDB para alojar los elementos de Todo. Amplify usará CloudFormation para implementar su backend, por lo que podrá almacenar su definición de backend como infraestructura como código.

Paso 3: conectar el backend al frontend

Ahora que ha implementado un frontend y ha creado un backend en la nube que contiene un modelo de datos, debe conectarlos. Siga estas instrucciones para conectar su definición de backend con su proyecto de aplicación local mediante la CLI de Amplify.

Para conectar un backend en la nube a un frontend local

  1. Abra una ventana de terminal y acceda al directorio raíz de su proyecto local.

  2. Ejecute el siguiente comando en la ventana del terminal, sustituyendo el texto rojo por el identificador único de aplicación y el nombre del entorno de backend de su proyecto.

    amplify pull --appId abcd1234 --envName staging

  3. Siga las instrucciones de la ventana del terminal para completar la configuración del proyecto.

Ahora puede configurar el proceso de compilación para añadir el backend al flujo de trabajo de implementación continua. Siga estas instrucciones para conectar una ramificación de frontend con un backend en la consola de Amplify Hosting.

Para conectar una ramificación de aplicación de frontend y un backend en la nube

  1. En la página de inicio de la aplicación, elija la pestaña Entornos de alojamiento.

  2. Localice la ramificación principal y elija Editar.

    La ubicación del enlace Editar para una ramificación en la consola de Amplify.

  3. En la ventana Editar backend de destino, en Entorno, seleccione el nombre del backend que desea conectar. En este ejemplo, elegiremos el backend de ensayo que ha creado en el Paso 2.

    El CI/CD de pila completa está habilitado de forma predeterminada. Desmarque esta opción para desactivar el CI/CD de pila completa en este backend. Al desactivar el CI/CD de pila completa, la aplicación se ejecuta en modo de solo extracción. En el momento de la compilación, Amplify generará automáticamente el archivo aws-exports.js sin modificar el entorno de backend.

  4. A continuación, deberá configurar un rol de servicio que conceda a Amplify los permisos necesarios para realizar cambios en el backend de su aplicación. Puede usar un rol de servicio existente o crear uno nuevo. Para obtener instrucciones, consulte Agregar un rol de servicio con permisos para implementar recursos de backend.

  5. Tras añadir un rol de servicio, vuelva a la ventana Editar backend de destino y elija Guardar.

  6. Para finalizar la conexión del backend de ensayo a la ramificación principal de la aplicación frontend, compile su proyecto.

    Realice una de las siguientes acciones:

    • Desde su repositorio de git, inserte un código para iniciar una compilación en la consola de Amplify.

    • En la consola de Amplify, desplácese a la página de detalles de compilación de la aplicación y elija Volver a implementar esta versión.

Pasos a seguir a continuación

Configurar implementaciones de ramificaciones de características

Siga nuestro flujo de trabajo recomendado para configurar implementaciones de ramificación de características con múltiples entornos de backend.

Cree una interfaz de usuario de frontend en Amplify Studio

Utilice Studio para crear la interfaz de usuario de frontend con un conjunto de componentes de IU listos para usar, a continuación, conéctelo al backend de su aplicación. Para obtener más información y ver tutoriales, consulte la guía del usuario de Amplify Studio en la Documentación de Amplify Framework.