AWS: S3 StaticPage + CloudFront

S3 buckets são uma ótima forma de armazenar páginas estáticas. Em poucos cliques você consegue criar um bucket e ter seu website acessível publicamente.

Além disso, podemos utilizar o Cloudfront como CDN do site estático, permitindo entregar um conteúdo mais próximo ao usuário, reduzindo latência, além de oferecer recursos adicionais de segurança, como: controle de acesso por geolocalização e integração com AWS WAF.

Clique nesse link para ver a página que vamos implementar com esse artigo. É um simples HTML contendo campos para autenticação.

1. Criação do S3

O primeiro passo é criar um bucket S3 para servir como site estático. Para isso, acesse o menu do S3 e vá em Create bucket.

Dê um nome para seu bucket, lembrando que os nomes de bucket são únicos. Caso você não for utilizar o Cloudfront como CDN, o nome do seu bucket será utilizado como url do seu site. Como iremos utilizar Cloudfront, você pode definir qualquer nome.

Mantenha as ACLs como disabled e a opção Block all public access habilitada. Como utilizaremos o Cloudfront, não é necessário expor o bucket publicamente. Iremos falar disso mais adiante.

Deixa as demais opções padrões e clique em Create bucket.

Após criado, entre no seu bucket, vá até a aba Properties, opção Static website hosting e clique em Edit.

Defina opção Static website hosting como Enable e selecione o Hosting type como Host a static website. Informe o nome do arquivo de index e clique em Save Changes.

Com isso, será possível ver a URL de acesso a sua webpage.

Entretanto, se você tentar acessar irá receber um erro 403. Isso ocorre pois o bucket não está público e não tem uma policy permitindo o acesso. Vamos utilizar o Cloudfront para fornecer esse acesso.

2. Upload dos arquivos para S3

O próximo passo é fazer o upload dos arquivos do site para o S3.

Nesse link você encontra um exemplo de uma webpage, pode copiar todos os arquivos, incluindo subdiretórios.

3. Criação do Cloudfront

Antes de criarmos a distribuição, será necessário criar um Origin Access Control (OAC), que será utilizado para permitir que o Cloudfront acesse o bucket S3. Isso não é mandatório, mas é recomendado para evitar que seus usuários acessem o website através do link do S3. Com o uso do OAC, a única forma de acessar a página é via Cloudfront.

Acesse o serviço do Cloudfront e no menu lateral vá em Security > Origin access. Clique em Create control setting, dê um nome para o seu OAC e clique em Create.

Com o OAC criado, vá em Distribution > Create distribution. Em Origin domain, selecione o bucket S3 que você criou, deixe marcada a opção Origin access control settings (recommended) e selecione o OAC criado no passo anterior.

Na opção WAF, deixe marcada a opção Do not enable security protections. Habilitar o uso do WAF irá envolver custos adicionais.

Deixe todos os demais valores padrões e clique em Create distribution.

4. Habilitando o S3 para ser acessado pelo Cloudfront

Agora precisamos voltar no bucket S3 e inserir uma policy permitindo que o Cloudfront possa acessar o conteúdo do S3. Para isso, entre no seu bucket, vá na aba Permissions e na opção Bucket Policy clique em Edit.

Substitua os valores 111111111111 pelo número da sua conta AWS, XXXXXXXXXXXXX pelo ID da sua distribuição do Cloudfront e nome-do-bucket pelo nome do seu bucket.

{
 "Version": "2008-10-17",
 "Id": "PolicyForCloudFrontPrivateContent",
 "Statement": [
  {
   "Sid": "AllowCloudFrontServicePrincipal",
   "Effect": "Allow",
   "Principal": {
    "Service": "cloudfront.amazonaws.com"
   },
   "Action": "s3:GetObject",
   "Resource": "arn:aws:s3:::nome-do-bucket/*",
   "Condition": {
    "StringEquals": {
     "AWS:SourceArn": "arn:aws:cloudfront::111111111111:distribution/XXXXXXXXXXXXX"
    }
   }
  }
 ]
}

Ao salvar, a Bucket policy ficará confome abaixo.

5. Acessando o site

Após todos estes passos, seu site já está disponível para acesso. Para saber a URL, acesse a sua distribuição no Cloudfront e na aba General copie o endereço que se encontra no campo Distribution domain name. Será um link com o domínio .cloudfront.net.

Implementando novas features nesse projeto

Agora que temos nosso site criado e público, podemos implementar o uso de autenticação utilizando Cognito, utilizar um domínio personalizado e implementar funcionalidades no site utilizando demais serviços AWS, como API Gateway, Lambda, DynamoDB, entre outros.

Deseja implementar autenticação e registro de usuários no seu site estático? Veja o artigo abaixo para implementar o uso do Cognito nesse mesmo projeto.

Implementando Autenticação e Registro de usuários com AWS Cognito.