Conceitos básicos da AWS

Criar uma aplicação React de pilha completa

Criar uma aplicação Web simples usando o AWS Amplify

Módulo 1: Implantar e hospedar uma aplicação React

Neste módulo, você criará uma aplicação React e a implantará na nuvem usando o serviço de hospedagem na Web do AWS Amplify

Visão geral

O AWS Amplify fornece um fluxo de trabalho CI/CD baseado em Git para criar, implantar e hospedar aplicações Web de página única ou sites estáticos com back-ends sem servidor. Ao conectar-se 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 sem servidor configurados com o Amplify CLI e implanta automaticamente atualizações a cada confirmação de código.

Neste módulo, você começará com a criação de uma nova aplicação React e a enviará a um repositório GitHub. Em seguida, você vai conectar o repositório à hospedagem Web do AWS Amplify e implantá-lo em uma rede de entrega de conteúdo (CDN) disponível globalmente hospedada em um domínio amplifyapp.com. Depois, nós mostraremos as capacidades de implantação contínua fazendo mudanças na aplicação React e enviando uma nova versão da ramificação principal que iniciará automaticamente a nova implantação.

O que você aprenderá

Neste módulo, você irá:
  • Criar uma aplicação React
  • Inicializar um repositório do GitHub
  • Implantar aplicativo com o AWS Amplify
  • Implementar alterações de código e reimplantar a aplicação

Conceitos principais

Aplicação React – O React é uma biblioteca de aplicações Web JavaScript que permite aos desenvolvedores criar rapidamente aplicações eficazes de uma única página.

Git – Um sistema de controle de versão que permite aos desenvolvedores armazenar arquivos, bem como manter e atualizar relacionamentos entre arquivos e diretórios, versões e alterações nos arquivos.

 Tempo para a conclusão

10 minutos

 Serviços usados

Implementação

  • A maneira mais fácil de criar uma aplicação React é usando o comando create-react-app. Instale este pacote usando o comando a seguir no prompt de comando ou terminal:

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • Nesta etapa, você criará um repositório do GitHub e confirmará o seu código no repositório. Você precisará de uma conta no GitHub para concluir esta etapa. Se você não tiver uma conta, inscreva-se aqui.

    a. Crie um novo repositório GitHub para sua aplicação.

    b. Abra um novo terminal e volte para a pasta raiz da aplicação, por exemplo, amplifyapp.

    c. O uso do create-react-app inicializará automaticamente o repositório git e fará uma confirmação inicial. Se você estiver tentando implantar uma aplicação React existente em que o git não tenha sido inicializado, insira os seguintes comandos antes de continuar:

    git init
    git add .
    git commit -m "initial commit"

    d. Se você nunca usou o GitHub em seu computador, siga estas etapas antes de continuar a permitir a conexão com sua conta.

    Envie a aplicação ao novo repositório do GitHub executando os seguintes comandos na interface da linha de comandos:

    git remote add origin [email protected]:username/reponame.git
    git branch -M main
    git push -u origin main
  • Abra o Console de Gerenciamento da AWS em uma nova janela do navegador para manter aberto este guia detalhado. Quando a tela carregar, insira seu nome de usuário e senha para começar. Em seguida, digite Amplify na barra de pesquisa e selecione AWS Amplify para abrir o console de serviço.

  • Nesta etapa, você conectará o repositório do GitHub que acabou de criar ao serviço do AWS Amplify. Isso permitirá que você crie, implante e hospede seu aplicativo na AWS.

    a. No console de serviço do AWS Amplify, selecione Comece a usar em Amplify Hosting

    b. Selecione o GitHub como o repositório de serviço e Continue (Continuar).

    c. Autentique no GitHub e retorne ao console do Amplify. Escolha o repositório e a ramificação principal que você criou anteriormente e selecione Avançar.

    d. Aceite as configurações de compilação padrão e selecione Next (Avançar).

    e. Revise os detalhes finais e selecione Salvar e implantar.

    f. O AWS Amplify agora criará seu código-fonte e implantará seu aplicativo em https://...amplifyapp.com.

    g. Depois que a compilação for concluída, selecione a miniatura para ver seu aplicativo Web em funcionamento. 

  • Nesta etapa, você fará algumas alterações no código usando o editor de texto e enviará as alterações para a ramificação principal da sua aplicação.

    a. Edite 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;

    b. Envie as alterações para GitHub no prompt de comando (Windows) ou terminal (macOS) para iniciar automaticamente uma nova compilação: 

    git add .
    git commit -m “changes for v2”
    git push origin main

    c. Depois que a compilação for concluída, selecione a miniatura no console do AWS Amplify para visualizar a aplicação atualizada.

Conclusão

Você implantou uma aplicação React na Nuvem AWS, integrando-se ao GitHub e usando o AWS Amplify. Com o AWS Amplify, você pode implantar continuamente sua aplicação na nuvem e hospedá-la em uma CDN disponível globalmente.

A seguir, criaremos uma versão local da aplicação para continuar o desenvolvimento e adicionar novos atributos.

Esta página foi útil para você?

Iniciar o aplicativo local