AWS Amplify + React: Criando e hospedando a aplicação
Tags: react, aws, braziliandevs, webdev
Published: 2021-05-15 04:41:27

A ideia dessa série de tutoriais é dar uma visão geral sobre a [AWS Amplify](https://docs.amplify.aws/), que é um conjunto de ferramentas e serviços que inclui um serviço de hospedagem na Web da Amazon. Para isso vamos criar uma simples aplicação em React para armazenar notas mentais, que terá autenticação, uma API GraphQL e com banco de dados e armazenamento de imagens.

Nesse tutorial vamos começar com a criação de uma aplicação React que será hospedado na AWS Amplify e ficará disponivel no domínio amplifyapp.com. Para isso, temos alguns pré-requisitos.

## Pré-requisitos
* Conta da AWS com acesso de administrador;
* Node.js: Node.js v10.x ou posterior;
* Yarn
* Conta no GitHub 
* Git: os usuários do Windows precisarão instalar o Git;
* Um editor de texto. Eu utilizarei o Visual Studio Code;

## Criando a aplicação
Dando uma visão geral, o [React](https://pt-br.reactjs.org/) é uma framework Web que permite aos desenvolvedores criar rapidamente aplicações de uma única página de desempenho usando JavaScript.

O caminho mais simples para criar uma aplicação React é usando o [create-react-app](https://create-react-app.dev/). Para isso vamos rodar os seguintes comandos:

```bash
yarn create react-app amplifyapp
cd amplifyapp
yarn start
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s9c0o59nsc7mtn5edtq.png)

## Criando repositório no GitHub
Agora vamos criar um repositório para armazenar o código da nossa aplicação. Você precisará de uma conta no GitHub para concluir esta etapa. Se você não tiver uma conta, [inscreva-se aqui](https://github.com/).

1. Crie um novo repositório nesse [link](https://github.com/new)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u64gzqr9huauavfh5qyi.png)

2. Inicialize o git e envie a aplicação para o repositório, com os comandos:

```bash
git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m “initial commit”
git push origin master
```

## Hospedando a aplicação na AWS Amplify
O AWS Amplify oferece um fluxo CI/CD baseado em Git para criar, implantar e hospedar aplicações SPA Web ou sites estáticos com serveless back-ends. Quando conectado a um repositório Git, o Amplify determina automaticamente as configurações de compilação para a estrutura do front-end e todos os recursos de back-end serveless configurados com a CLI do Amplify e implanta automaticamente as atualizações a cada deploy.

> Muitos dos recursos do Amplify não estão disponíveis em todas as regiões, esse é a lista de regiões que oferecemos suporte na CLI hoje, 15/05/2021:
'us-east-1': 'US East (N. Virginia)',
'us-east-2': 'US East (Ohio)',
'us-west-2': 'US West (Oregon)',
'eu-west-1': 'EU (Ireland)',
'eu-west-2': 'EU (London)',
'eu-central-1': 'EU (Frankfurt)',
'ap-northeast-1': 'Asia Pacific (Tokyo)',
'ap-northeast-2': 'Asia Pacific (Seoul)',
'ap-southeast-1': 'Asia Pacific (Singapore)',
'ap-southeast-2': 'Asia Pacific (Sydney)',
'ap-south-1': 'Asia Pacific (Mumbai)',
'ca-central-1': 'Canada (Central)',

Para isso vamos abrir o [Console de Gerenciamento da AWS](https://console.aws.amazon.com/), use suas credenciais para acessar. Quando estiver logado, digite “Amplify” na barra de pesquisa e selecione **AWS Amplify** para abrir o console de serviço.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bm2tswb2g24wd8p2ogqs.png)

Agora vamos conectar nosso repositório a AWS Amplify, isso vai permitir que a gente crie, implante e hospede nosso aplicativo na AWS.

1. No console selecione "Get Started" em "Deliver".

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u9vm0voiaic3hqmhlnij.png)

2. Selecione o GitHub e clique em Continue.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zkjwmvv2n94wlxhogo4n.png)

3. Faça a autenticação no GitHub e retorne ao Console do Amplify. Escolha o repositório e a branch `master` ou `main` e clique em Next.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/waey5yno1v1yar9ve56i.png)

4. Aceite as configurações de compilação padrão e clique em Next.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pjqq4dpjcqj9cmmmxmej.png)

5. Revise os detalhes finais e selecione Save and Deploy.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5vsqwofv5vwpc04vfbbg.png)

Agora é só esperar o processo da esteira de deploy, e o Amplify vai gerar o link da nossa aplicação em produção.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jmra66ej7idgj7kjsrs6.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1s9c0o59nsc7mtn5edtq.png)

## Testando a esteira de CI/CD
Para testar a nossa esteira, vamos modificar a aplicação e subir para nosso repositório as mudanças.

Edite o arquivo src/App.js com o código abaixo e salve.

```js
import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello from V2</h1>
      </header>
    </div>
  );
}

export default App;
```

Agora vamos commitar e subir as mudanças para o github.

```bash
git add .
git commit -m “changes for v2”
git push origin master
```

Depois que a compilação for concluída no console do AWS Amplify, vamos entrar na url gerada para visualizar o aplicativo atualizado.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dizzcai0zjjtq2l8ch3w.png)

## Saideira
Conseguimos concluir nossa configuração inicial e subir nossa aplicação React com alguns cliques no AWS Amplify. No proximo artigos vamos instalar o CLI do Amplify localmente e iniciar nosso backend serveless. Até lá!