Conceitos básicos da AWS

Criar uma aplicação Web básica

Implantar uma aplicação Web e adicionar interatividade com uma API e um banco de dados

Introdução
Criar um aplicativo Web
Criar uma função sem servidor
Criar uma tabela de dados
adicionar interatividade ao aplicativo Web

Módulo 1: Criar um aplicativo Web

Neste módulo, você implantará recursos estáticos para a aplicação Web usando o console do AWS Amplify.

Introdução

Neste módulo, usaremos o console do AWS Amplify para implantar recursos estáticos para a aplicação Web. Nos módulos subsequentes, você adicionará uma funcionalidade dinâmica a essas páginas usando o AWS Lambda e o Amazon API Gateway para chamar APIs RESTful remotas. REST significa “Representational State Transfer” (Transferência de estado representativo) e é um padrão arquitetônico de criação de serviços Web. API significa “application program interface” (Interface de programa de aplicação). Assim, a API RESTful é uma API que implementa esse padrão arquitetônico.

Todo o conteúdo Web estático, incluindo HTML, CSS, JavaScript, imagens e outros arquivos, serão hospedados pelo AWS Amplify. Selecionamos o serviço Amplify, pois ele facilita a hospedagem e a implantação de sites estáticos. Assim, os usuários finais acessarão o site usando o URL exposto pelo Amplify.

Se você sentir insegurança para trabalhar com tantas coisas novas, não se preocupe! Você não usará outros serviços da AWS agora e também não precisará executar servidores Web! Um "servidor" é um software ou dispositivo de hardware que aceita e responde a solicitações feitas em uma rede para disponibilizar o seu site.

O site será uma página “Hello World” extremamente simples e adicionaremos mais funcionalidades em módulos posteriores.

Para a maioria das aplicações reais, é usado um domínio personalizado para hospedar seu site. Um “domínio personalizado” é um nome exclusivo que identifica um site, como www.amazon.com. Se for de seu interesse, o Amplify também oferece suporte para domínios personalizados.

O que você aprenderá

  • Como criar um aplicativo Amplify
  • Como fazer upload de arquivos para um site diretamente do Amplify
  • Como implantar novas versões de páginas da Web com o Amplify

Principais conceitos

Site estático Um site estático tem conteúdo fixo, diferente de sites dinâmicos. Os sites estáticos são o tipo mais básico de site e os mais fáceis de criar. Basta criar algumas páginas HTML e publicá-las em um servidor Web!

Hospedagem Web Fornece as tecnologias e os serviços necessários para que seu site seja visto na Internet..

Regiões da AWS Áreas geográficas separadas que a AWS usa para armazenar a infraestrutura. São espalhadas pelo mundo para que os clientes possam selecionar a região mais próxima onde hospedar sua infraestrutura de nuvem.

 Tempo para a conclusão

5 minutos

 Serviços usados

Console do AWS Amplify

 Pré-requisitos do módulo

Implementação

    1. Abra seu editor de texto favorito no seu computador. Crie um novo arquivo e cole nele o seguinte texto HTML:
    <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
</head>

<body>
    Hello World
</body>
</html>

    2. Salve o arquivo como index.html.

    3. ZIP (compacte) somente o arquivo HTML.

    4. Em uma nova janela do navegador, faça login no console do Amplify. OBSERVAÇÃO: neste tutorial, usaremos a região Oregon (us-west-2).

    5. Em Deploy (Implantar), clique no botão laranja Get Started (Comece a usar).

    6. Selecione Deploy without Git provider (Implantar sem provedor Git). Você deverá ver isto na tela:

    7. Clique no botão laranja Continue (Continuar).

    8. No campo App Name (Nome do aplicativo), digite GettingStarted.

    9. Para o nome do Environment (Ambiente), digite dev.

    10. Selecione o método Drag and drop (Arrastar e soltar). Você deverá ver isto na sua tela:

    11. Clique no botão Choose files (Escolher arquivos).

    12. Selecione o arquivo ZIP criado na etapa 3.

    13. Clique no botão laranja Save and deploy (Salvar e implantar).

    14. Após alguns segundos, você verá a mensagem Deployment successfully completed (Implantação concluída com êxito).

    1. Clique link abaixo de Domain (Domínio).
    2. O seu aplicativo Web carregará em uma nova guia do navegador e renderizará "Hello World". Parabéns!

Arquitetura da aplicação

No momento, nossa arquitetura está assim:

Ela é bem minimalista por enquanto, porque só estamos usando o console do AWS Amplify. Agora, temos aplicativos da Web ao vivo com os quais os usuários podem interagir. A seguir, vamos criar uma função do Lambda.

Este módulo foi útil?

 Feedback
Iniciar o Módulo 2

Criar uma função sem servidor