Como usar o CloudFront para servir um site estático hospedado no Amazon S3?

Última atualização: 14-09-2021

Quero hospedar um site estático em um bucket do Amazon Simple Storage Service (Amazon S3). Em seguida, quero servir meu site usando uma distribuição do Amazon CloudFront. Como posso fazer isso?

Breve descrição

Para servir um site estático hospedado no Amazon S3, é possível implantar uma distribuição do CloudFront usando uma destas configurações:

  • Usar um endpoint de API REST como origem, com acesso restrito por uma identidade do acesso de origem (OAI)
  • Usar um endpoint de site como origem, com acesso anônimo (público) permitido
  • Usar um endpoint de site como origem, com acesso restrito por um cabeçalho Referer
  • Usar o AWS CloudFormation para implantar um endpoint de API REST como origem, com acesso restrito por uma OAI e um domínio personalizado apontando para o CloudFront

Para obter mais informações sobre os dois tipos de endpoint, consulte Principais diferenças entre um endpoint de site e um endpoint de API REST.

Resolução

Siga estas etapas para configurar uma distribuição do CloudFront com o tipo de endpoint do S3 que deseja usar como origem:

Usar um endpoint de API REST como origem, com acesso restrito por uma OAI

  1. Use o console do Amazon S3 para criar um bucket e carregar os arquivos do site.
    Observação: não é necessário habilitar a hospedagem estática de sites no bucket para essa configuração. Essa configuração usa o endpoint de API REST do bucket em vez do endpoint do site do recurso de hospedagem do site estático.
  2. Criar uma distribuição de web do CloudFront. Além das configurações de distribuição necessárias para seu caso de uso, insira o seguinte:
    Para Origin domain (domínio de origem), selecione o bucket criado.
    Para S3 bucket access (acesso ao bucket do S3), selecione Yes use OAI (bucket can restrict access to only CloudFront) (Sim, usar OAI [o bucket pode restringir o acesso somente ao CloudFront]).
    Para Origin access identity (Identidade do acesso de origem), selecione Create new OAI (Criar nova OAI). Em seguida, insira o nome da OAI e escolha Create (Criar).
    Para Bucket policy (Política de bucket), selecione Yes, update the bucket policy (Sim, atualizar a política de bucket).
  3. É uma melhor prática usar SSL (HTTPS) para seu site. Para usar um domínio personalizado com HTTPS, selecione Custom SSL certificate (Certificado SSL personalizado). É possível escolher Request certificate (Solicitar certificado) para solicitar um novo certificado. Caso não esteja usando um domínio personalizado, ainda é possível usar HTTPS com o nome de domínio cloudfront.net para sua distribuição.
    Importante: se você inseriu Nomes de domínio alternativos (CNAMEs) para sua distribuição, os CNAMEs deverão corresponder ao certificado SSL selecionado. Para solucionar problemas com o certificado SSL, consulte Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?
  4. Escolha Create distribution (Criar distribuição).
  5. Atualize os registros DNS do domínio para apontar o CNAME do site para o nome de domínio da distribuição do CloudFront. É possível encontrar o nome de domínio da distribuição no console do CloudFront em um formato semelhante a d1234abcd.cloudfront.net.
  6. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o tempo para a expiração dos valores DNS anteriores depende do valor TTL definido na zona hospedada e se o resolvedor local usa esses valores TTL.

Usar um endpoint de site como origem, com acesso anônimo (público) permitido

Esta configuração permite acesso público de leitura ao bucket do site. Para obter mais informações, consulte Configuração de permissões para acesso ao site.

Observação: ao usar o endpoint de site estático do Amazon S3, as conexões entre o CloudFront e o Amazon S3 estão disponíveis somente por HTTP. Para usar HTTPS para conexões entre o CloudFront e o Amazon S3, configure um endpoint de API REST do S3 para sua origem.

  1. Use o console do Amazon S3 para criar um bucket e habilitar a hospedagem de sites estáticos no bucket.
  2. Na caixa de diálogo Static website hosting (Hospedagem de sites estáticos), copie o Endpoint do bucket sem o http:// inicial. O formato é semelhante a DOC-EXEMPLO-BUCKET.s3-site-região.amazonaws.com. O endpoint nesse formato é necessário para uma etapa posterior.
  3. Adicione uma política de bucket que permita acesso público de leitura ao bucket criado.
    Observação: para essa configuração, as configurações de bloqueio de acesso público do bucket do S3 devem ser desabilitadas. Se o caso de uso exigir que as configurações de bloqueio de acesso público sejam habilitadas, use o endpoint de API REST como a origem e restrinja o acesso por uma identidade do acesso de origem (OAI).
  4. Criar uma distribuição de web do CloudFront. Além das configurações de distribuição necessárias para seu caso de uso, insira o seguinte:
    Para Origin domain (domínio de origem), insira o endpoint copiado na etapa 2.
    Observação: não selecione o bucket na lista suspensa. A lista suspensa inclui apenas os endpoints de API REST do bucket do S3 que não são usados nessa configuração.
  5. É uma melhor prática usar SSL (HTTPS) para seu site. Para usar um domínio personalizado com HTTPS, selecione Custom SSL certificate (Certificado SSL personalizado). É possível escolher Request certificate (Solicitar certificado) para solicitar um novo certificado. Caso não esteja usando um domínio personalizado, ainda é possível usar HTTPS com o nome de domínio cloudfront.net para sua distribuição.
    Importante: se você inseriu Nomes de domínio alternativos (CNAMEs) para sua distribuição, os CNAMEs deverão corresponder ao certificado SSL selecionado. Para solucionar problemas com o certificado SSL, consulte Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?
  6. Escolha Create distribution (Criar distribuição).
  7. Atualize os registros DNS do domínio para apontar o CNAME do site para o nome de domínio da distribuição do CloudFront. É possível encontrar o nome de domínio da distribuição no console do CloudFront em um formato semelhante a d1234abcd.cloudfront.net.
  8. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o tempo para a expiração dos valores DNS anteriores depende do valor TTL definido na zona hospedada e se o resolvedor local usa esses valores TTL.

Usar um endpoint de site como origem, com acesso restrito por um cabeçalho Referer

Essa configuração restringe o acesso configurando um cabeçalho Referer personalizado na distribuição e, em seguida, usa uma política de bucket para permitir o acesso somente a solicitações com o cabeçalho Referer personalizado.

Importante: certifique-se de avaliar se o acesso permitido por essa configuração atende aos requisitos do caso de uso.

Observação: ao usar o endpoint de site estático do Amazon S3, as conexões entre o CloudFront e o Amazon S3 estão disponíveis somente por HTTP. Para usar HTTPS para conexões entre o CloudFront e o Amazon S3, configure um endpoint de API REST do S3 para sua origem.

  1. Use o console do Amazon S3 para criar um bucket e habilitar a hospedagem de sites estáticos no bucket.
  2. Na caixa de diálogo Static website hosting (Hospedagem de sites estáticos), copie o Endpoint do bucket sem o http:// inicial. O formato é semelhante a DOC-EXEMPLO-BUCKET.s3-site-região.amazonaws.com. O endpoint nesse formato é necessário para uma etapa posterior.
  3. Criar uma distribuição de web do CloudFront. Além das configurações de distribuição necessárias para seu caso de uso, insira o seguinte:
    Para Origin domain (domínio de origem), insira o endpoint copiado na etapa 2. Observação: não selecione o bucket na lista suspensa. A lista suspensa inclui apenas os endpoints de API REST do bucket do S3 que não são usados nessa configuração.
    Em Add custom header (Adicionar cabeçalho personalizado), escolha Add header (Adicionar cabeçalho).
    Em Header name (Nome do cabeçalho), insira Referer.
    Em Value (Valor), insira um valor de cabeçalho personalizado que deseja encaminhar à origem (bucket do S3). Para restringir o acesso à origem, insira um valor aleatório ou secreto que só você saiba.
  4. É uma melhor prática usar SSL (HTTPS) para seu site. Para usar um domínio personalizado com HTTPS, selecione Custom SSL certificate (Certificado SSL personalizado). É possível escolher Request certificate (Solicitar certificado) para solicitar um novo certificado. Caso não esteja usando um domínio personalizado, ainda é possível usar HTTPS com o nome de domínio cloudfront.net para sua distribuição.
    Importante: se você inseriu Nomes de domínio alternativos (CNAMEs) para sua distribuição, os CNAMEs deverão corresponder ao certificado SSL selecionado. Para solucionar problemas com o certificado SSL, consulte Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?
  5. Escolha Create distribution (Criar distribuição).
  6. Abra o bucket do site no console do Amazon S3. Em seguida, adicione uma política de bucket que permita s3:GetObject com a condição de que a solicitação inclua o cabeçalho Referer personalizado especificado na etapa 3. Para essa configuração, as configurações de bloqueio de acesso público do bucket do S3 devem ser desabilitadas. (O Amazon S3 considera pública uma política de bucket que concede acesso anônimo restrito por um Referer). Se o caso de uso exigir que as configurações de bloqueio de acesso público sejam habilitadas, use o endpoint de API REST como a origem com o acesso restrito por uma identidade do acesso de origem (OAI)
    Observação: para bloquear o acesso a qualquer solicitação que não inclua o cabeçalho Referer personalizado, use uma declaração de negação explícita na política de bucket.
  7. Atualize os registros DNS do domínio para apontar o CNAME do site para o nome de domínio da distribuição do CloudFront. É possível encontrar o nome de domínio da distribuição no console do CloudFront em um formato semelhante a d1234abcd.cloudfront.net.
  8. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o tempo para a expiração dos valores DNS anteriores depende do valor TTL definido na zona hospedada e se o resolvedor local usa esses valores TTL.

Usar o CloudFormation para implantar um endpoint de API REST como origem, com acesso restrito por uma OAI e um domínio personalizado apontando para o CloudFront

Com esta solução, seu site:

  • É implantado com o CloudFormation
  • É hospedado no Amazon S3
  • É distribuído pelo CloudFront
  • Usa um certificado SSL/TLS do AWS Certificate Manager (ACM)
  • Usa o Lambda@Edge para adicionar cabeçalhos de segurança a cada resposta do servidor

Para obter instruções sobre como implantar essa solução, consulte Site estático seguro do Amazon CloudFront no site do GitHub.