Implantar uma aplicação Web no Amazon Amplify

GUIA DE CONCEITOS BÁSICOS

INTRODUÇÃO
CRIAR O PROJETO DO AMPLIFY
CONECTAR A API
AUTOMATIZAR A IMPLEMENTAÇÃO
LIMPAR OS RECURSOS

Módulo 1: Criar um projeto do Amplify

Neste módulo, você criará uma aplicação Web e configurará o Amplify

Introdução

Neste módulo, você criará uma aplicação Web usando o React, uma biblioteca JavaScript para criar interfaces do usuário, e aprenderá a configurar o AWS Amplify para o seu primeiro projeto.

O que você aprenderá

  • Criar uma aplicação Web
  • Configurar o Amplify no seu projeto

 Tempo para a conclusão

5 minutos

 Pré-requisitos do módulo

  • Conta da AWS com acesso de administrador**
  • Navegador recomendado: versão mais recente do Chrome ou Firefox

[**]Talvez as contas criadas nas últimas 24 horas ainda não tenham acesso aos serviços necessários para este tutorial.

Implementação

Conferir o ambiente

Execute node -v e npm -v em uma janela do terminal/da console para verificar se você está usando a versão 12.x do Node.js e a versão 6.x ou posterior do npm. Caso não esteja, acesse os sites do nodejs e do npm para obter mais informações.

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

A interface da linha de comando (CLI) do Amplify é um conjunto de ferramentas unificado para criar serviços de nuvem da AWS para sua aplicação. Primeiro, vamos instalar a CLI do Amplify.

npm install -g @aws-amplify/cli

Observação: como instalaremos a CLI do Amplify globalmente, talvez seja necessário executar o comando acima com sudo, dependendo das políticas do sistema.

Após a conclusão da instalação, execute o seguinte comando para configurar o Amplify:

amplify configure

amplify configure abrirá um navegador e pedirá que você faça login na Console AWS.

Após o login, a CLI do Amplify pedirá que você crie um usuário do 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

Crie um usuário com AdministratorAccess na sua conta para provisionar recursos da AWS, como o AppSync, o Cognito etc.

Após a criação do usuário, a CLI do Amplify pedirá que você forneça o accessKeyId e a secretAccessKey para conectar a CLI do Amplify ao usuário do IAM recém-criado.

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.

Criar a aplicação React

Para criar uma aplicação React, use create-react-app, um conjunto de ferramentas que facilita o processo, pois não exige nenhuma configuração.

Crie uma aplicação chamada amplify-app e inicialize-a com amplify init:

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

Quando você executar o comando amplify init, ele pedirá informações sobre a aplicação. Use os valores indicados abaixo:

? 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

Depois que você responder à última solicitação, ele criará a infraestrutura necessária, e a saída deverá ser a seguinte:

⠼ 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

O que você criou?

Quando você executar amplify init para inicializar um novo projeto, o Amplify:

  • Analisará o projeto e confirmará as configurações acima, inclusive o perfil da AWS usado para provisionar os recursos da nuvem necessários para a aplicação.
  • Criará uma pasta chamada amplify no diretório do projeto. Essa pasta contém a configuração de backend da aplicação.
  • Criará um arquivo chamado src/aws-exports.js no diretório do projeto. Esse arquivo contém a configuração dos serviços que o Amplify provisiona com a adição de funcionalidade à aplicação.
  • Criará um projeto na nuvem para a aplicação na console do AWS Amplify, em que você poderá ver e gerenciar os projetos do Amplify.

Conclusão

Neste módulo, você aprendeu a criar uma aplicação frontend React e a inicializá-la com o Amplify para implantá-la na sua conta da AWS. No próximo módulo, você aprenderá a usar a GraphQL para adicionar uma API à aplicação frontend.

A seguir: Conectar a API

Ir para o próximo módulo

Envie seus comentários.

 Feedback