Implementar una aplicación web en Amazon Amplify

GUÍA DE INTRODUCCIÓN

Módulo 1: Crear un nuevo proyecto de Amplify

En este módulo, aprenderá a crear una nueva aplicación web y configurar Amplify

Introducción

En este módulo, creará una nueva aplicación web mediante React, una biblioteca de JavaScript para crear interfaces de usuarios, y aprenderá cómo configurar AWS Amplify para su primer proyecto.

Lo que aprenderá

  • Crear una nueva aplicación web
  • Configurar Amplify en su proyecto

 Tiempo de realización

5 minutos

 Requisitos previos del módulo

  • Una cuenta de AWS con acceso de nivel de administrador**
  • Navegador recomendado: la última versión de Chrome o Firefox

[**] Es posible que las cuentas creadas en las últimas 24 horas aún no tengan acceso a los servicios necesarios para este tutorial.

Implementación

Comprobar el entorno

Verifique está ejecutando como mínimo la versión 12.x de Node.js y la versión 6.x de npm ejecutando node -v y npm -v en una ventana de la consola/terminal. De lo contrario, visite los sitios web de nodejs npm para obtener más información.

node -v

# Your output may differ based on the version installed.
12.1.1

npm -v

# Your output may differ based on the version installed.
6.14.6

La interfaz de línea de comandos (CLI) de Amplify es una cadena de herramientas unificada para crear servicios en la nube de AWS para su aplicación. Continuemos e instalemos la CLI de Amplify.

npm install -g @aws-amplify/cli

Nota: Dado que estamos instalando la CLI de Amplify a nivel global, quizá necesite ejecutar el comando anterior con sudo según sus políticas de sistema.

Una vez completada la instalación, configure Amplify mediante la ejecución del siguiente comando:

amplify configure

amplify configure abrirá un navegador y le pedirá que inicie sesión en la consola de AWS.

Una vez que haya iniciado sesión, la CLI de Amplify solicitará la creación de un usuario de IAM.

Specify the AWS Region
? region:  # Your preferred region
Specify the username of the new IAM user:
? user name:  # User name for Amplify IAM user
Complete the user creation using the AWS console

Cree un usuario con AdministratorAccess para su cuenta con el objetivo de aprovisionar recursos de AWS para usted, como AppSync, Cognito, etc.

gsg-build-amplify-4

Una vez que se ha creado el usuario, la CLI de Amplify le pedirá que brinda el accesskeyId y el secretAccessKey para conectarla con su usuario de IAM recién creado.

Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

Crear aplicación de React

Para crear una nueva aplicación de React, utilizará create-react-app, una cadena de herramientas que le ayuda a comenzar sin necesidad de configuración.

Cree una aplicación llamada amplify-app, y luego iníciela con amplify init:

# note npx is installed with npm
npx create-react-app amplify-app
cd amplify-app
amplify init

Cuando ejecute amplify init, le pedirá información sobre la aplicación; utilice los valores que se brindan a continuación:

? Enter a name for the project amplifyapp

? Enter a name for the environment dev

? Choose your default editor: None

? Choose the type of app that you're building javascript

Please tell us about your project
? What javascript framework are you using react

? Source Directory Path:  src

? Distribution Directory Path: build

? Build Command:  npm run-script build

? Start Command: npm run-script start

Using default provider  awscloudformation

? Select the authentication method you want to use: AWS profile

? Please choose the profile you want to use amplify

Una vez que responda al último mensaje emergente, se creará la infraestructura que necesita. El resultado será parecido a lo que se muestra a continuación:

⠼ Initializing project in the cloud...

CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:24 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time) Resource creation Initiated
CREATE_IN_PROGRESS DeploymentBucket              AWS::S3::Bucket            Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS AuthRole                      AWS::IAM::Role             Fri Sep 17 2021 08:48:23 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS UnauthRole                    AWS::IAM::Role             Fri Sep 17 2021 08:48:22 GMT+0200 (South Africa Standard Time)                            
CREATE_IN_PROGRESS amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:19 GMT+0200 (South Africa Standard Time) User Initiated             
⠼ Initializing project in the cloud...

CREATE_COMPLETE AuthRole   AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
CREATE_COMPLETE UnauthRole AWS::IAM::Role Fri Sep 17 2021 08:48:38 GMT+0200 (South Africa Standard Time) 
⠸ Initializing project in the cloud...

CREATE_COMPLETE DeploymentBucket AWS::S3::Bucket Fri Sep 17 2021 08:48:45 GMT+0200 (South Africa Standard Time) 
⠴ Initializing project in the cloud...

CREATE_COMPLETE amplify-amplifyapp-dev-144814 AWS::CloudFormation::Stack Fri Sep 17 2021 08:48:47 GMT+0200 (South Africa Standard Time) 
✔ Successfully created initial AWS cloud resources for deployments.
✔ Initialized provider successfully.
Initialized your environment successfully.

Your project has been successfully initialized and connected to the cloud!

Some next steps:
"amplify status" will show you what you've added already and if it's locally configured or deployed
"amplify add <category>" will allow you to add features like user login or a backend API
"amplify push" will build all your local backend resources and provision it in the cloud
"amplify console" to open the Amplify Console and view your project status
"amplify publish" will build all your local backend and frontend resources (if you have hosting category added) and provision it in the cloud

Pro tip:
Try "amplify add api" to create a backend API and then "amplify publish" to deploy everything

¿Qué acaba de crear?

Cuando ejecute amplify init para inicializar un nuevo proyecto, Amplify realizará las siguientes acciones:

  • Analizará su proyecto y confirmará los ajustes del proyectos mencionados anteriormente, incluido el perfil de AWS que se utilizará para aprovisionar los recursos de nube necesarios para la aplicación.
  • Creará una carpeta llamada amplify dentro del directorio de su proyecto. Esta carpeta contiene la configuración de backend de su aplicación.
  • Creará un archivo llamado src/aws-exports.js dentro del directorio de su proyecto. Este archivo contiene la configuración para los servicios que Amplify aprovisiona a medida que agrega más funcionalidad a su aplicación.
  • Creará un proyecto de nube para su aplicación en la consola de AWS Amplify, donde podrá ver y administrar sus proyectos de Amplify.
gsg-build-amplify-1

Conclusión

En este módulo, ha aprendido cómo crear una aplicación frontend de React, y cómo inicializarla con Amplify como preparación para implementarla en su cuenta de AWS. En el siguiente módulo, aprenderá cómo agregar una API a su aplicación front-end mediante GraphQL.

Siguiente: Conectar la API

Háganos saber su opinión.

Agradecemos sus comentarios
Nos alegra que esta página le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar
Agradecemos sus comentarios
Lamentamos que esta página no le haya ayudado. ¿Le gustaría compartir detalles adicionales para ayudarnos a seguir mejorando?
Cerrar