AWS Amplify + React: Criando e hospedando a aplicação

#react #aws #braziliandevs #webdev

A ideia dessa série de tutoriais é dar uma visão geral sobre a AWS Amplify, 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 é 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. Para isso vamos rodar os seguintes comandos:

yarn create react-app amplifyapp
cd amplifyapp
yarn start

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.

Crie um novo repositório nesse link
Inicialize o git e envie a aplicação para o repositório, com os comandos:

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

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

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

Selecione o GitHub e clique em Continue.

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.

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

Revise os detalhes finais e selecione Save and Deploy.

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

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.

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.

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.

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á!