Projetos na AWS:

Crie um aplicativo Web sem servidor

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

Introdução

Hospedar um site estático

Gerenciar usuários

Criar um back-end sem servidor

Implantar uma API RESTful

Encerrar recursos

Módulo 1. Hospedagem de site estático

Neste módulo você vai configurar o Amazon Simple Storage Service (S3) para hospedar os recursos estáticos do aplicativo web. 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

A arquitetura para este módulo é bastante simples. Todo o conteúdo de site estático, incluindo HTML, CSS, JavaScript, imagens e outros arquivos, serão armazenados no Amazon S3. Assim, os usuários finais acessarão o site usando um URL do site público exposto pelo Amazon S3. Você não precisa executar nenhum servidor web ou usar outros serviços para disponibilizar seu site.

Para fins deste módulo, você usará o URL de endpoint do site do Amazon S3 que fornecemos. Ele assume o formato http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Para a maioria dos aplicativos 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 site estático usando um domínio personalizado na documentação do Amazon S3.

Tempo até a conclusão do módulo: 30 horas

Serviços usados: Amazon S3

Modelo do CloudFormation: se já estiver confortável trabalhando com o Amazon S3, ou se quiser apenas avançar para trabalhar com o Lambda e o API Gateway, você poderá executar um desses modelos do AWS CloudFormation na região de sua escolha ara criar automaticamente os recursos necessários.

Região Modelo do CloudFormation
Leste dos EUA (Norte da Virgínia) Executar pilha >
Leste dos EUA (Ohio) Executar pilha >
Oeste dos EUA (Oregon) Executar pilha >
UE (Frankfurt) Executar pilha >
UE (Irlanda) Executar pilha >
UE (Londres) Executar pilha >
Ásia-Pacífico (Tóquio) Executar pilha >
Ásia-Pacífico (Seul) Executar pilha >
Ásia-Pacífico (Sydney) Executar pilha >
Ásia-Pacífico (Mumbai) Executar pilha >

Instruções de execução do CloudFormation

  1. Clique no link Executar pilha acima para a região de sua escolha.

  2. Clique em Next (Próximo) na página Select Template (Selecionar modelo).

  3. Forneça um nome exclusivo globalmente para o Website Bucket Name (Nome do bucket do site), como wildrydes-yourname e clique em Next (Próximo).

  4. Na página Options (Opções), deixe todas as configurações padrão e clique em Next (Próximo).

  5. Na página Review (Revisar), marque a caixa de seleção para confirmar que o CloudFormation criará recursos do IAM e clique em Create (Criar).

    Esse modelo usa um recurso personalizado para copiar os ativos do site estático de um bucket central do S3 para seu próprio bucket dedicado. Para que um recurso personalizado grave no novo bucket da sua conta, ele deve criar uma função do IAM que possa assumir com essas permissões.

  6. Aguarde até que a pilha wildrydes-webapp-1 atinja o status de CREATE_COMPLETE.

  7. Com a pilha wildrydes-webapp-1 selecionada, clique na guia Outputs (Saídas) e clique no link WebsiteURL.

  8. Verifique se a página da Wild Rydes está carregando corretamente e passe para o próximo módulo, Gerenciamento de usuários.

Instruções de implementação

Siga as instruções passo a passo abaixo para hospedar um site estático. Clique no número de cada etapa para expandir a seção.

  • Etapa 1. Selecione uma região

    Selecione uma região

    Este aplicativo web pode ser implantado em qualquer região da AWS que ofereça suporte a todos os serviços usados neste aplicativo, o que inclui o Amazon Cognito, AWS Lambda, Amazon API Gateway, Amazon S3 e Amazon DynamoDB.

    Você pode consultar a tabela de regiões para ver quais regiões têm os serviços compatíveis. 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.

    (clique para aumentar)

  • Etapa 2. Crie um bucket do S3

    Crie um bucket do S3

    O Amazon S3 pode ser usado para hospedar sites estáticos sem precisar configurar ou gerenciar nenhum servidor web. Nesta etapa, você criará um bucket do S3 que será usado para hospedar todos os ativos estáticos (como arquivos de imagem, HTML, CSS e JavaScript). para o aplicativo web. 

    Nesta etapa, você usará o console ou a CLI da AWS para criar um bucket do Amazon S3. Lembre-se de que o nome do bucket deve ser exclusivo globalmente. Recomendamos usar um nome como wildrydes-firstname-lastname. Se você obter um erro informando que o nome do bucket já existe, tente adicionar outros números ou caracteres até encontrar um nome que não esteja em uso.

    1. No Console de Gerenciamento da AWS, selecione Services (Serviços) e S3 em Storage (Armazenamento).
    2. Selecione +Create Bucket (+Criar bucket)
    3. Forneça um nome exclusivo globalmente para o bucket, como wildrydes-firstname-lastname. Se você obter um erro informando que o nome do bucket já existe, tente adicionar outros números ou caracteres até encontrar um nome que não esteja em uso.
    4. Selecione a região que escolheu usar para este workshop no menu vertical.
    5. Selecione Create (Criar) no canto inferior esquerdo da caixa de diálogo sem selecionar um bucket do qual copiar as configurações.

  • Etapa 3. Fazer upload de conteúdo

    Fazer upload de conteúdo

    Nesta etapa, você fará upload de ativos do site para este módulo para o bucket do S3. Você pode usar o Console de Gerenciamento da AWS (exige o navegador Google Chrome), a CLI da AWS ou o modelo fornecido do CloudFormation para concluir esta etapa. Se você já tiver a CLI da AWS instalada e configurada em sua máquina local, recomendamos usar esse método. Caso contrário, use o console se tiver a versão mais recente do Google Chrome instalada. 

    Instruções passo a passo para o console

    Para fazer upload de todos os arquivos e subdiretórios em um diretório local por meio do Console de Gerenciamento da AWS, você deve usar a versão mais recente do navegador da web Chrome. Se você não puder usar o Chrome, siga as instruções para usar a CLI da AWS ou o modelo fornecido do CloudFormation.

    1. Faça download de um arquivo deste repositório usando este link.

    2. Descompacte o arquivo obtido por download em sua máquina local.

    3. Abra o Console de Gerenciamento da AWS no Chrome. Selecione Services (Serviços) e S3 em Storage (Armazenamento).

    4. Selecione o bucket criado na etapa anterior e verifique se está visualizando a guia Overview (Visão geral).

    5. Abra o Explorador de Arquivos do Windows o Finder do macOS e navegue até o conteúdo expandido do arquivo zip obtido por download na primeira etapa.

    6. Navegue até o diretório WebApplication/1_StaticWebHosting/website em sua máquina local.

    7. Selecione todos os arquivos e subdiretórios no diretório "website". Certifique-se de que o próprio diretório do site não esteja selecionado.

    8. Arraste e solte os arquivos selecionados do sistema de arquivos local para o conteúdo na guia Overview (Visão geral) no console do S3.

    9. Selecione Upload (Fazer upload) no canto inferior esquerdo da caixa de diálogo exibida.

    10. Aguarde até que o upload seja concluído e certifique-se de que você esteja vendo o conteúdo do diretório "website" listado no console do S3. Se estiver vendo somente um único diretório "website", exclua-o do bucket e siga essas instruções novamente, certificando-se de selecionar somente o conteúdo do diretório antes de arrastá-lo e soltá-lo no console do S3.

    Instruções passo a passo para a CLI

    Se você já tiver a CLI instalada e configurada, poderá usá-la para copiar os ativos da web necessários de s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website para o bucket.

    1. Execute o comando a seguir, certificando-se de substituir YOUR_BUCKET_NAME pelo nome usado na seção anterior e YOUR_BUCKET_REGION pelo código da região (como us-east-2) onde o bucket foi criado.

      aws s3 sync s3://wildrydes-us-east-1/WebApplication/1_StaticWebHosting/website s3://YOUR_BUCKET_NAME --region YOUR_BUCKET_REGION

    2. Se o comando foi bem-sucedido, deve aparecer uma lista de objetos que foram copiados para o bucket.

     

    Instruções passo a passo para o CloudFormation

    Se não for possível usar nenhum dos métodos anteriores, você poderá executar o modelo fornecido do CloudFormation para copiar os ativos necessários para o bucket do S3. Execute um modelo do CloudFormation selecionando uma região e clicando no link Executar pilha na seção Modelo do CloudFormation deste módulo. 

  • Etapa 4. Adicionar uma política de bucket para permitir leituras públicas

    Adicionar uma política de bucket para permitir leituras públicas

    É possível definir quem pode acessar o conteúdo dos seus buckets do S3 usando uma política de bucket. As políticas de bucket são documentos JSON que especificam quais principais têm permissão para executar várias ações nos objetos do bucket.

    Nesta etapa, você adicionará uma política de bucket ao seu novo bucket do Amazon S3 para permitir que usuários anônimos visualizem seu site. Por padrão, seu bucket será acessível somente por usuários autenticados com acesso à sua conta da AWS.

    Veja este exemplo de uma política que concederá acesso somente leitura para usuários anônimos. Esta política de exemplo permite que qualquer pessoa na Internet visualize seu conteúdo. A maneira mais fácil de atualizar uma política de bucket é usar o console. Selecione o bucket, escolha a guia de permissões e selecione Bucket Policy (Política de bucket).

    1. No console do S3, selecione o nome do bucket criado na seção 1.
    2. Selecione a guia Permissions (Permissões) e, então, selecione Bucket Policy (Política de bucket).
      1. No console do S3, selecione o nome do bucket criado na seção 1.
      2. Selecione a guia Permissions (Permissões)e verifique se as configurações de acesso público estão selecionadas.
      3. Clique em Edit (Editar) e desmarque:
        • "Bloquear novas políticas públicas de bucket"
        • "Bloquear o acesso público e entre contas se o bucket tiver políticas públicas"
      4. Clique em Save (Salvar).
      5. No modal de confirmação que aparecer, digite 'confirmar' e clique em Confirm (Confirmar). 
      6. Ainda na guia Permissions (Permissões), selecione Bucket Policy (Política de bucket).  
    3. Insira o seguinte documento de política no editor da política de bucket substituindo [YOUR_BUCKET_NAME] pelo nome do bucket criado na seção 1:
    {
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow", 
            "Principal": "*", 
            "Action": "s3:GetObject", 
            "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
        } 
    ] 
}
    1. Selecione Save (Salvar) para aplicar a nova política.

  • Etapa 5. Habilitar a hospedagem de sites

    Habilitar a hospedagem de sites

    Por padrão, os objetos em um bucket do S3 estão disponíveis por URLs com a estrutura http://.amazonaws.com//. Para servir ativos do URL raiz (como /index.html), você precisará habilitar a hospedagem de sites no bucket. Isso tornará seus objetos disponíveis no endpoint do site da região da AWS específica do bucket: .s3-website-.amazonaws.com.

    Também é possível usar um domínio personalizado para o seu site. Por exemplo, http://www.wildrydes.com está hospedado no S3. A configuração de um domínio personalizado não é abordada neste workshop, mas você pode encontrar instruções detalhadas em nossa documentação.

    Nesta etapa, você usará o console para habilitar a hospedagem de site estático. Você poderá fazer isso na guia Properties (Propriedades) depois de selecionar o bucket. Defina index.html como o documento de índice e deixe o documento de erro em branco. Consulte a documentação sobre como configurar um bucket para a hospedagem de site estático para obter mais detalhes.

    1. Na página de detalhes do bucket na página do console do S3, selecione a guia Properties (Propriedades).
    2. Selecione o cartão Static website hosting (Hospedagem de site estático).
    3. Selecione Use this bucket to host a website (Usar este bucket para hospedar um site) e insira index.html para o documento de índice. Deixe os outros campos em branco.
    4. Anote o URL do Endpoint na parte superior da caixa de diálogo antes de selecionar Save (Salvar). Você usará esse URL por todo o restante do workshop para visualizar o aplicativo web. A partir daqui, vamos nos referir a esse URL como o URL base do seu site.
    5. Clique em Save (Salvar) para salvar suas alterações.

  • Etapa 6. Validar sua implementação

    Validar sua implementação

    Após concluir essas etapas de implementação, você deverá ser capaz de acessar o site estático acessando o URL de endpoint do site do seu bucket do S3.

    Acesse o URL de base do seu site (esse é o URL que você anotou na seção anterior) no navegador de sua escolha. A página inicial da Wild Rydes deve ser exibida. Se você precisar pesquisar o URL base, acesse o console do S3, selecione o seu bucket e clique em Static Web Hosting (Hospedagem de site estático) na guia Properties (Propriedades).

    Se a página for renderizada corretamente (veja abaixo uma captura de tela de exemplo), você poderá passar para o próximo módulo, Gerenciamento de usuários.

Próximo: gerenciar usuários