Conceitos básicos da AWS

Crie uma aplicação React

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

Módulo 1: Implantar e hospedar um aplicativo 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.

Introdução

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 de trabalho do front-end e todos os recursos de back-end sem servidor configurados com a CLI do Amplify e implanta automaticamente atualizações a cada confirmação de código.

Neste módulo, você começará com a criação de uma 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á

  • Crie uma aplicação React
  • Inicializar um repositório do GitHub
  • Implantar aplicativo com o AWS Amplify
  • Implementar alterações de código e reimplantar o aplicativo

Principais conceitos

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

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

  • Criar uma nova aplicação React

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

    npx create-react-app amplifyapp
    cd amplifyapp
    npm start
  • Inicialize o repositório do GitHub

    Nesta etapa, você criará um repositório do GitHub e alocará 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 o seu aplicativo (link)

    Front End GitHub Repository Module 1

    b. Inicialize o git e envie a aplicação ao novo repositório do GitHub executando os seguintes comandos na interface da linha de comandos:

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master
  • Login no Console de Gerenciamento da AWS

    Abra o Console de Gerenciamento da AWS em uma nova janela do navegador para que possa manter este guia detalhado aberto. Quando a tela carregar, digite 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.

    Front End AWS Console Find Amplify Module 1
  • Implantar aplicativo com o AWS Amplify

    Nesta etapa, você conectará o repositório GitHub que você 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 "Get Started" (Comece a usar) em Deploy (Implantar).

    Front End Amplify Deploy Module 1

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

    Front End Amplify GitHub Module 1.png

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

    Front End GitHub Add Repository Module 1.png

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

    Front End GitHub Add Repository2 Module 1.png

    e. Revise os detalhes finais e selecione Save and Deploy (Salvar e implantar).

    Front End GitHub Add Repository3 Module 1.png

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

    Front End Amplify Deploy Source Module 1

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

    Front End Initial App Module 1
  • Implantar automaticamente alterações de código

    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 do seu aplicativo.

    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 master

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

    Front End HelloV2 App Module 1

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 do aplicativo para continuar o desenvolvimento e adicionar novos recursos.

Este módulo foi útil?

Agradecemos a sua atenção
Gostaríamos de saber do que você gostou.
Desculpe por ter desapontado
Encontrou algo desatualizado, confuso ou incorreto? Envie seus comentários para nos ajudar a melhorar este tutorial.

Iniciar o aplicativo local