Creación de un backend para una aplicación - AWS Amplify Hospedaje
Cree un backend para una aplicación de segunda generaciónCree un backend para una aplicación de primera generación

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.

Creación de un backend para una aplicación

Con AWS Amplify ella, puede crear una aplicación completa con datos, autenticación, almacenamiento y alojamiento de interfaz que se despliega en ella. AWS

AWS Amplify Gen 2 presenta una experiencia de desarrollador TypeScript basada en el código para definir los backends. Para aprender a usar Amplify Gen 2 para crear y conectar un backend a tu aplicación, consulta Crear y conectar el backend en los documentos de Amplify.

Si buscas la documentación para crear un backend para una aplicación de primera generación mediante la CLI y Amplify Studio, consulta Crear y conectar el backend en los documentos de Amplify de primera generación.

Cree un backend para una aplicación de segunda generación

Para ver un tutorial que lo guía a través de los pasos para crear una aplicación completa de Amplify Gen 2 con un backend TypeScript basado, consulte Comenzar en los documentos de Amplify.

Cree un backend para una aplicación de primera generación

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.

Inscríbase en una Cuenta de AWS

Si aún no es AWS cliente, debe crear una Cuenta de AWS siguiendo las instrucciones en línea. Al registrarte, podrás acceder a Amplify y a otros AWS servicios que puedes usar con tu aplicación.

Crear un repositorio de Git

Amplify admite GitHub Bitbucket y. GitLab AWS CodeCommit Envía tu aplicación a tu repositorio de Git.

Instalación de la interfaz de 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 necesitas crear una nueva aplicación de interfaz para utilizarla en este ejemplo, puedes seguir las instrucciones para crear una aplicación de React que se encuentran en la documentación de creación de una aplicación de React.

Para implementar una aplicación frontend

  1. Inicia sesión en la consola de Amplify AWS Management Console y ábrela.

  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. Selecciona tu proveedor GitHub, Bitbucket o AWS CodeCommit repositorio y GitLab, a continuación, selecciona Continuar.

  4. Amplify autorizará el acceso a su repositorio de git. En el GitHub caso de los repositorios, Amplify ahora usa GitHub la función Aplicaciones para autorizar el acceso de Amplify.

    Para obtener más información sobre la instalación y la autorización de la GitHub aplicación, 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. Inicia sesión en la consola de Amplify AWS Management Console y ábrela.

  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 crea todos los AWS recursos necesarios en el backend, incluida una API de AWS AppSync GraphQL para acceder a los datos y una tabla de Amazon DynamoDB para alojar los elementos de Todo. Amplify utiliza AWS CloudFormation para implementar su backend, lo que le permite almacenar su definición de backend como. infrastructure-as-code

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 ver instrucciones, consulte Adición de un rol de servicio.

  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 siguientes:

    • 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.

Siguientes pasos

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

Usa Studio para crear la interfaz de usuario de la interfaz de usuario con un conjunto de componentes de la ready-to-use interfaz de usuario y, a continuación, conéctala al backend de la 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.