Deploy de uma aplicação React no AWS Amplify
Tags: aws, react, javascript, cloud
Published: 2022-08-31 05:34:53

Neste tutorial iremos aprender como fazer o deploy de uma aplicação React no AWS Amplify. Mas antes de por a mão na massa, vamos entender melhor alguns conceitos básicos sobre o React e o AWS Amplify, os pré requisitos do tutorial e os custos.

**Pré Requisitos**

- Conta da [AWS](https://aws.amazon.com/pt/) com acesso de administrador*
- Node.js: [Node.js](nodejs.org/en/download/) versão 10.x ou posterior
- Conta no [GitHub](https://github.com/)
- Git: Usuários do Windows precisarão instalar o [Git](https://git-scm.com/downloads)
- Editor de texto de sua escolha. Neste tutorial iremos usar o [Visual Studio Code](https://code.visualstudio.com/download)

**O que é React?**

React é uma biblioteca JavaScript para construir interfaces de usuário interativas. Por interfaces de usuário, queremos dizer os elementos que os usuários veem e interagem na tela. Por biblioteca, queremos dizer que o React fornece funções úteis para construir a interface do usuário, mas deixa para o desenvolvedor onde usar essas funções em seu aplicativo.

O React possui as seguintes características:

- Declarativo: React faz com que a criação de UIs interativas seja uma tarefa fácil. Crie views simples para cada estado na sua aplicação, e o React irá atualizar e renderizar de forma eficiente apenas os componentes necessários na medida em que os dados mudam.
- Baseado em Componentes: Crie componentes encapsulados que gerenciam seu próprio estado e então, combine-os para criar UIs complexas.
- Aprenda uma vez, use em qualquer lugar: Você pode desenvolver novos recursos com React sem reescrever o código existente.

![React Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kzjqccjzpuje6ipnsse.png)

**O que é AWS Amplify**

O AWS Amplify fornece um fluxo de trabalho CI/CD baseado em Git para criar, implantar e hospedar aplicações Webs. Ao conectar-se a um repositório Git, o Amplify determina automaticamente as configurações de compilação para a estrutura de trabalho do front-end e implanta automaticamente atualizações a cada commit de código. Ou seja, ao atualizar o nosso código no repositório Git, as atualização serão automaticamente implantadas na nossa aplicação Web. 

![Amplify Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4xtxrw0rv3ka3pgb7562.png)

**Criar uma aplicação React**

A maneira mais fácil de criar uma aplicatição React é utlizando o comando create-react-app. Instale este pacote usando os seguintes comandos em seu prompt de comando ou terminal:

```
npx create-react-app amplify-app
cd amplifyapp
npm start
``` 

Em seguida, abra http://localhost:3000/ para ver seu aplicativo.

![React App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ql22k3qf876cy1trii45.png)

**Criar Repositório no GitHub**

Nesta etapa, vamos criar um repositório GitHub e enviar nosso código para o repositório. Lembre-se que você precisa de uma conta do GitHub para concluir esta etapa – se você não tiver uma conta, inscreva-se [aqui](https://github.com/).

Crie um novo repositório GitHub para seu aplicativo neste [link](https://github.com/new)

![Novo Repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zd7kaid5u6gq3pb731s.png)

Inicialize o git e faça um push do aplicativo para o novo repositório GitHub executando os seguintes comandos no seu terminal (não esquece de substituir o username e o reponame pelo seu usuário e nome do repositório):

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

Após concluir todos os comandos, atualiza a página do seu repositório no gitHub e veja que o código da sua aplicação React já se encontra por lá. 


![Github updated](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xa4jtl083k0pqsxyelai.png)
 
**Entre no Console do AWS Amplify**

Abra o [Console de gerenciamento da AWS](https://aws.amazon.com/pt/) em uma nova janela do navegador. Quando a página carregar, digite suas credenciais para começar. Em seguida, digite "Amplify" na barra de pesquisa e selecione AWS Amplify para abrir o console de serviço.

![Get Started](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kc3268yb08c7awte7q6u.png)

**Deploy da aplicação com AWS Amplify**

Finalmente chegamos na parte do deply de nossa aplicação. Nesta etapa, vamos conectar o repositório GitHub que acabamos de criar ao serviço AWS Amplify. Isso permitirá que você crie, implante e hospede seu aplicativo na AWS.

No console de serviço do AWS Amplify, selecione "Get Started" abaixo de Deploy.

![Amplify Hosting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1clth68n28h93hlbifd0.png)

Selecione GitHub como o serviço de repositório e clique em Continue.

![GitHub Select](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4o1dz3kff23zczxsjy34.png)

Faça a autenticação com o GitHub e retorne ao console do Amplify. Escolha o repositório e a branch master que criamos anteriormente e clique em Next.

![Repositório](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lto1jvlgn7ylgz5zmchr.png)

Aceite as configurações de build padrão e selecione Next.

![configurações de build padrão](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9nc52txfugde0usncyj8.png)

Revise os detalhes finais e selecione Save and deploy.

![Save and Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qe5ckha29s30u5srtqwh.png)

O AWS Amplify irá fazer o build de seu código-fonte e deployar seu aplicativo em https://...amplifyapp.com.

![App Deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s1rda0rp2tgr1xmb84li.png)

Depois que o buid for concluído, clique no link para ver sua aplicação Web funcionando.

![App funcionando](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lzamln7rqvmog747whdr.png)

**Deploy de alterações de código automaticas
**

Estamos quase no fim do tutorial. Nesta etapa, faremos algumas alterações no código usando seu editor de texto e enviaremos as alterações para o branch master da nossa aplicação.

Edite o arquivo src/App.js com o código abaixo e salve esta alteração.

```
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 AWS Amplify</h1>
      </header>
    </div>
  );
}

export default App;
```

Envie as alterações para o GitHub utilizando o Terminal para iniciar automaticamente um novo build:

```
git add .
git commit -m “novas alteracoes”
git push origin master
```
Depois que o buid for concluído, clique no link para ver sua aplicação Web alterada funcionando.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukmaj60efd03g75t6yzn.png)

**Excluir Recurso**

Para evitar qualquer dor de cabeça, não esquece de deletar a aplicação. Para isto, entre no painel da aplicação que criamos, clique em action e em seguida selecine Delete App.

**Conclusão**

Neste tutorial implantamos uma aplicação React na Nuvem AWS integrando-se ao GitHub e usando o AWS Amplify. Com o AWS Amplify, podemos implantar continuamente um aplicativo na nuvem e hospedá-lo em uma CDN disponível globalmente.

Espero que tenham gostado, até a próxima!