Neste módulo, você configurará o Amazon Simple Storage Service (S3) para hospedar os recursos estáticos para seu aplicativo web. Em módulos subsequentes, você adicionará funcionalidade dinâmica a essas páginas usando o JavaScript para chamar as RESTful APIs remotas criadas com o AWS Lambda e o Amazon API Gateway.

Serverless_Web_App_LP_assets-02

A arquitetura para este módulo é muito objetiva. Todo o conteúdo estático da web, incluindo HTML, CSS, JavaScript, imagens e outros arquivos, serão armazenados no Amazon S3. Os usuários finais, em seguida, acessarão seu site usando o URL do site público exposto pelo Amazon S3. Você não precisa executar nenhum servidor web ou usar outros serviços para tornar seu site disponível.

Para os fins deste módulo, você usará o URL do endpoint do site do Amazon S3 que fornecemos. Ele tem a seguinte estrutura http://{your-bucket-name}.s3-website.{region}.amazonaws.com. Para a maioria dos aplicativos reais, você precisará usar 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 para conclusão do módulo: 30 minutos

Serviços usados: Amazon S3

Modelo do CloudFormation: se você já está familiarizado com o Amazon S3, ou se apenas quer passar a frente para o trabalho com o Lambda e o API Gateway, você pode executar um desses modelos do AWS CloudFormation na região de sua escolha para criar os recursos necessários automaticamente.

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

Instruções para a execução do CloudFormation

  1. Clique no link acima Launch Stack para a região de sua escolha.

  2. Clique em Próximo na página selecionar modelo.

  3. Forneça um nome exclusivo para o Website Bucket Name como wildrydes-yourname e clique em Próximo.

  4. Na página Opções, mantenha todos os padrões e clique em Próximo.

  5. Na página Review, marque a caixa para confirmar que o CloudFormation irá criar recursos do IAM e clique em Criar.

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

  6. Aguarde que a pilha wildrydes-webapp-1 alcance o status de CREATE_COMPLETE.

  7. Com a pilha wildrydes-webapp-1 selecionada, clique na guia Outputs e clique no link WebsiteURL.

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


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

  • Etapa 1. Selecionar 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, que incluem o Amazon Cognito, o AWS Lambda, o Amazon API Gateway, o Amazon S3 e o Amazon DynamoDB.

    Você pode consultar a tabela de região para ver quais regiões têm os serviços suportados. Entre as regiões suportadas 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 na lista suspensa no canto superior direito do Console de Gerenciamento da AWS

    region

    (Clique para aumentar)

    region
  • Etapa 2. Criar um bucket do S3

    O Amazon S3 pode ser usado para hospedar sites estáticos, sem a necessidade de configurar ou gerenciar quaisquer servidores web. Nesta etapa, você criará um novo bucket do S3 que será usado para hospedar todos os ativos estáticos (por exemplo, HTML, CSS, JavaScript e arquivos de imagem) para seu aplicativo web. 

    Nesta etapa, você usará o console ou a ILC da AWS para criar um bucket do Amazon S3. Lembre-se de que o nome do seu bucket deve ser exclusivo. Recomendamos o uso de um nome como wildrydes-nome-sobrenome. Se você receber um erro dizendo que seu nome de bucket já existe, tente acrescentar números adicionais ou caracteres até você encontrar um nome não utilizado.


    1. No Console de Gerenciamento da AWS, selecione Services e, em seguida, selecione S3 em Storage.
    2. Escolha +Create Bucket
    3. Forneça um nome exclusivo para seu bucket, como wildrydes-nome-sobrenome. Se você receber um erro dizendo que seu nome de bucket já existe, tente acrescentar números adicionais ou caracteres até você encontrar um nome não utilizado.
    4. Selecione a região que escolheu para usar neste workshop no menu suspenso.
    5. Escolha Create na parte inferior esquerda da caixa de diálogo sem selecionar um bucket para copiar as configurações.
  • Etapa 3. Fazer upload de conteúdo

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

    Instruções passo a passo do console

    Para fazer o 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 web Chrome. Se você não pode usar o Chrome, siga as instruções para usar a ILC da AWS CLI ou o modelo do CloudFormation fornecido.

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

    2. Descompacte o arquivo que você baixou em sua máquina local.

    3. Abra o Console de Gerenciamento da AWS no Chrome. Escolha Services e, em seguida, selecione S3 em Storage.

    4. Selecione o bucket que você criou na etapa anterior e certifique-se de que esteja visualizando a guia Objects.

    5. Abra o Windows File Explorer ou macOS Finder e explore os conteúdos expandidos do arquivo zip que você baixou 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 sob o diretório do site. Certifique-se de que o próprio diretório do site não está selecionado.

    8. Arraste e solte os arquivos selecionados do seu sistema de arquivos local para o conteúdo na guia Objects no console do S3.

    9. Escolha Upload na parte inferior esquerda da caixa de diálogo que aparece.

    10. Aguarde que o upload esteja concluído e certifique-se de que visualiza os conteúdos do diretório do site listados no console do S3. Se você visualiza apenas um único diretório do site, você deverá excluí-lo de seu bucket e seguir estas instruções novamente garantindo que você selecione somente o conteúdo do diretório antes de arrastar e soltar no console do S3.

    Instruções passo a passo da ILC

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

    1. Execute o seguinte comando, certificando-se de substituir YOUR_BUCKET_NAME pelo nome que você usou na seção anterior e YOUR_BUCKET_REGION pelo código da região (p.ex., us-east-2) em que você criou seu bucket.

      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, você deve ver uma lista de objetos que foram copiados para o seu bucket.

     

    Instruções passo a passo do CloudFormation

    Se você não conseguir usar nenhum dos métodos anteriores, você pode executar o modelo do CloudFormation fornecido para copiar os ativos necessários para seu bucket do S3. Execute um modelo do CloudFormation selecionando uma região e clicando no link Launch stack na seção de modelos do CloudFormation deste módulo. 

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

    Você pode definir quem pode acessar o conteúdo em seus buckets do S3 usando uma política de bucket. As políticas de bucket são documentos JSON que especificam quais princípios são permitidos para executar várias ações em objetos no seu bucket.

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

    Veja este exemplo de uma política que irá conceder acesso somente de leitura para usuários anônimos. Este exemplo de política 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, em seguida, selecione Bucket Policy.


    1. No console do S3, selecione o nome do bucket que você criou na seção 1.
    2. Escolha a guia Permissions e depois Bucket Policy.
    3. Insira o seguinte documento de política no editor de política de bucket substituindo [YOUR_BUCKET_NAME] pelo nome do bucket que você criou na seção 1:
    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow", 
                "Principal": "*", 
                "Action": "s3:GetObject", 
                "Resource": "arn:aws:s3:::[YOUR_BUCKET_NAME]/*" 
            } 
        ] 
    }
    
    1. Escolha Save para aplicar a nova política.
  • Etapa 5. Ativar a hospedagem do site

    Por padrão, objetos em um bucket do S3 estão disponíveis por meio de URLs com a estrutura http://.amazonaws.com//. A fim de atender os ativos da raiz URL (por exemplo,/index.html), você precisará ativar a hospedagem do site no bucket. Isso fará com que seus objetos fiquem disponíveis no endpoint do site específico da Região AWS: .s3-website-.amazonaws.com.

    Você também pode 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 é coberta 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ê pode fazer isso na guia Propriedades depois de ter selecionado o bucket. Defina index.html como o índice de documento, e deixe o documento de erro em branco. Para mais detalhes, consulte a documentação sobre configurar um bucket para hospedagem de site estático.


    1. Na página de detalhes do bucket no console do S3, selecione a guia Properties.
    2. Escolha o cartão Static website hosting.
    3. Selecione Use this bucket to host a website e insira index.html para o documento de índice. Deixe os outros campos em branco.
    4. Observe o URL do endpoint na parte superior da caixa de diálogo antes de escolher Save. Você usará esse URL em todo o resto do workshop para visualizar seu aplicativo web. Daqui para frente, esse URL será chamado de URL base de seu site.
    5. Clique em Save para salvar as configurações.
  • Etapa 6. Validar sua implementação

    Depois de concluir essas etapas de implementação, você deve ser capaz de acessar o seu site estático acessando o endpoint URL do site para o seu bucket do S3.

    Acesse o seu URL base do site (este é o URL observado na seção anterior) no navegador de sua escolha. Você deve ver a página inicial Rydes Wild exibida. Se você precisa pesquisar o URL de base, acesse o console do S3, selecione o seu bucket e, em seguida, clique no Static Web Hosting na guia Properties.

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

    wildrydes-homepage