Conceitos básicos da AWS

Crie uma aplicação Web sem servidor

com o AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB e Amazon Cognito

Módulo 1: Hospedagem Web estática com implantação contínua

Para começar, você vai configurar o AWS Amplify para hospedar os recursos estáticos de sua aplicação Web com implantação contínua integrada.

Visão geral

Neste módulo você vai configurar o AWS Amplify para hospedar os recursos estáticos de sua aplicação Web com implantação contínua integrada. O console do Amplify fornece um fluxo de trabalho baseado em git para implantação e hospedagem contínuas de aplicações Web completas. Nos módulos subsequentes, você adicionará uma funcionalidade dinâmica a essas páginas usando o JavaScript para chamar APIs RESTful remotas criadas com o AWS Lambda e o Amazon API Gateway.

Visão geral da arquitetura

Visão geral da arquitetura

A arquitetura deste módulo é simples. Todo o conteúdo Web estático, incluindo HTML, CSS, JavaScript, imagens e outros arquivos, será gerenciado pelo console do AWS Amplify. Assim, os usuários finais acessarão o site usando um URL do site público exposto pelo console do AWS Amplify. Você não precisa executar nenhum servidor Web ou usar outros serviços para disponibilizar seu site.

Para a maioria das aplicações reais, é usado um domínio personalizado para hospedar seu site. Se você estiver interessado em usar seu próprio domínio, siga as instruções para configurar um domínio personalizado no Amplify.

 Tempo para a conclusão

15 minutos

 Serviços usados

Implementação

  • Esta aplicação Web pode ser implantada em qualquer região da AWS que ofereça suporte a todos os serviços usados nesta aplicação, o que inclui o AWS Amplify, o AWS CodeCommit, o Amazon Cognito, o AWS Lambda, o Amazon API Gateway e o Amazon DynamoDB.

    Você pode consultar a Lista de serviços regionais da AWS para ver em quais regiões há suporte para os serviços. Entre as regiões compatíveis que você pode escolher estão:

    • Leste dos EUA (Norte da Virgínia)
    • Leste dos EUA (Ohio)
    • Oeste dos EUA (Oregon)
    • UE (Frankfurt)
    • UE (Irlanda)
    • UE (Londres)
    • Ásia-Pacífico (Tóquio)
    • Ásia-Pacífico (Seul)
    • Ásia-Pacífico (Sydney)
    • Ásia-Pacífico (Mumbai)

    Selecione a região no menu vertical no canto superior direito do Console de Gerenciamento da AWS.

    Console de Gerenciamento da AWS
  • Você tem duas opções para gerenciar o código-fonte deste módulo: o AWS CodeCommit (incluído no nível gratuito da AWS) ou o GitHub. Neste tutorial, usaremos o CodeCommit para armazenar o código da nossa aplicação, mas você pode fazer o mesmo criando um repositório no GitHub.

    1. Se você nunca configurou a AWS CLI em sua máquina local, abra uma janela de terminal para instalar a AWS CLI. As instruções de instalação variam de acordo com o sistema operacional que você está usando. Se você já tiver a AWS CLI instalada e configurada, vá para a Etapa 2.
    2. Abra o console do AWS CodeCommit.
    3. Escolha Criar repositório.
    4. Digite wildrydes-site como nome do repositório.
    5. Escolha Criar.
    6. Depois que o repositório for criado, configure um usuário do IAM com credenciais do Git no console do IAM. Siga as instruções da Etapa 1 à Etapa 3 na página Setup for HTTPS users using Git credentials do Guia do usuário do AWS CodeCommit
      Observação importante: ao configurar seu usuário no console do IAM, você precisará configurar e salvar dois conjuntos de credenciais para consultar novamente.
      1. Você deve criar Chaves de acesso na guia IAM > Credenciais de segurança. Baixe os IDs da Chave de acesso e da Chave de acesso secreta ou copie e salve-as em um local seguro.
      2. Você também deve gerar credenciais HTTPS Git para o AWS CodeCommit. Baixe ou salve também essas credenciais geradas.
    7. Na janela do terminal que você usou para instalar a AWS CLI, digite o comando: aws configure
    8. Insira o ID da chave de acesso da AWS e a Chave de acesso secreta que você criou na etapa 6. 
    9. Em Nome da região padrão, insira a região que você selecionou inicialmente para criar seu repositório do CodeCommit.
    10. Deixe Formato de saída padrão em branco e pressione Enter. 

    O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal.

    % aws configure
    AWS Access Key ID [****************]: #####################
    AWS Secret Access Key [****************]: ###################
    Default region name [us-east-1]: us-east-1
    Default output format [None]: 

        11. Configure o assistente de credenciais git config na janela do terminal.

    git config --global credential.helper '!aws codecommit credential-helper $@'
    git config --global credential.UseHttpPath true

        12. Volte para o console do AWS CodeCommit e selecione o repositório wildrydes-site.

        13. Selecione Clonar HTTPS na lista suspensa URL do clone para copiar o URL HTTPS. 

    Selecione Clonar HTTPS

        14. Na janela do seu terminal, execute git clone e cole o URL HTTPS do repositório. 

    O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal:

    $ git clone https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    Cloning into ‘wildrydes-site’...
    Username for ‘https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit username you generated in Step 6
    Password for ‘https://username@git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site’: Enter the HTTPS Git credentials for AWS CodeCommit password you generated in Step 6
    warning: You appear to have cloned an empty repository.

    Haverá um aviso de que você parece ter clonado um repositório vazio, isso é esperado. 

    Para obter correções comuns para erros gerados ao clonar o repositório, consulte Troubleshooting the credential helper and HTTPS connections to AWS CodeCommit

  • Depois de usar o AWS CodeCommit ou o GitHub.com para criar seu repositório git e cloná-lo localmente, você precisará copiar o conteúdo do site de um bucket do S3 existente e acessível publicamente associado a este tutorial e incluir o conteúdo em seu repositório.

    1. Mude o diretório para o seu repositório e copie os arquivos estáticos do S3 usando os seguintes comandos (certifique-se de alterar a região no comando a seguir para copiar os arquivos do bucket do S3 para a região selecionada no início deste tutorial):
      cd wildrydes-site
      aws s3 cp s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website ./ --recursive
    2. Adicione, confirme e envie os arquivos git. 

    O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal:

    $ git add .
    $ git commit -m "new files"
    $ git push
    
    Counting objects: 95, done.
    Compressing objects: 100% (94/94), done.
    Writing objects: 100% (95/95), 9.44 MiB | 14.87 MiB/s, done.
    Total 95 (delta 2), reused 0 (delta 0)
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
    * [new branch] master -> master
  • A seguir você usará o console do AWS Amplify para implantar o site que você acabou de confirmar no git. O console do Amplify cuida do trabalho de configurar um lugar para armazenar o código estático de sua aplicação Web e fornece vários recursos úteis para simplificar o ciclo de vida dessa aplicação e também habilitar as melhores práticas.

    1. Abra o console do AWS Amplify
    2. Escolha Comece a usar
    3. No cabeçalho Amplify Hosting hospeda sua aplicação Web, escolha Comece a usar
    4. Na página Comece a usar o Amplify Hosting, selecione AWS CodeCommit e escolha Continuar.
    5. Na etapa Adicionar ramificação do repositório, selecione wildrydes-site no menu suspenso Selecionar um repositório.
    6. Se você usou o GitHub, precisará autorizar o AWS Amplify em sua conta do GitHub.
    7. No menu suspenso Ramificação, selecione master e escolha Avançar. 
    Adicionar ramificação do repositório

        8. Na página Configurações de compilação, deixe todos os padrões, selecione Permitir que o AWS Amplify implante automaticamente todos os arquivos hospedados no diretório raiz do seu projeto e escolha Avançar.

        9. Na página Revisar, selecione Salvar e implementar.

        10. O console do Amplify leva alguns minutos para criar os recursos necessários e implantar seu código.

    Depois de concluído, selecione a imagem do site ou o link abaixo da miniatura para iniciar seu site Wild Rydes. Se você selecionar o link para master, verá os detalhes de construção e implantação relacionados à sua ramificação. 

    Console do Amplify
    Site Wild Rydes
  • O console do AWS Amplify recompilará e reimplantará a aplicação quando detectar alterações no repositório conectado. Faça uma alteração na página principal para testar esse processo.

    1. Em sua máquina local, navegue até a pasta wildrydes-site e abra o arquivo index.html em um editor de texto de sua escolha. 
    2. Modifique a linha de título com o seguinte texto: <title>Wild Rydes - Rydes of the Future!</title>
    3. Salve o arquivo. 
    4. Na janela do terminal, adicione, confirme sua alteração e envie a alteração para o repositório git novamente. O console do Amplify começará a criar o site novamente assim que detectar a atualização no repositório. Isso acontecerá muito rápido! Volte para o console do AWS Amplify para observar o processo.

    O bloco de código a seguir é um exemplo do que você verá na janela do seu terminal: 

    $ git add index.html 
    $ git commit -m "updated title"
    [master dfec2e5] updated title
     1 file changed, 1 insertion(+), 1 deletion(-)
    
    $ git push
    Counting objects: 3, done.
    Compressing objects: 100% (3/3), done.
    Writing objects: 100% (3/3), 315 bytes | 315.00 KiB/s, done.
    Total 3 (delta 2), reused 0 (delta 0)
    remote: processing 
    To https://git-codecommit.us-east-1.amazonaws.com/v1/repos/wildrydes-site
       2e9f540..dfec2e5  master -> master

        5. Depois que o Amplify concluir a reimplantação, reabra o site Wild Rydes e observe a mudança no título da guia.

     

    Altera&ccedil;&atilde;o do t&iacute;tulo do site Wild Rydes
  • Neste módulo, você criou um site estático que será a base de sua empresa Wild Rydes. O console do AWS Amplify pode implantar sites estáticos seguindo um modelo de integração e entrega contínuas. Ele tem meios para compilar aplicações mais complexas baseadas na estrutura de trabalho do Javascript e recursos como implantações de ramificações de atributos, fácil configuração de domínio personalizado, implantações instantâneas e proteção por senha.

Esta página foi útil para você?

Gerenciar usuários