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

Data da última atualização: 03/11/2022

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 da API REST como origem, com acesso restrito por um controle de acesso de origem (OAC) ou identidade de acesso de origem (OAI)
    Observação: é uma boa prática usar o controle de acesso de origem (OAC) para restringir o acesso. A identidade de acesso de origem (OAI) é um método legado para esse processo.
  • 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 CloudFormation para implantar um endpoint de site estático como origem 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 um OAC ou uma OAI (legado)

  1. Use o console do Amazon S3 para criar um bucket e carregar os arquivos do site.
    Observação: não é necessário ativar 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, restrinja o acesso à origem do Amazon S3 usando um dos métodos a seguir. É uma boa prática usar o OAC. O uso da OAI é uma configuração legada.

    Ao criar sua distribuição, use as seguintes configurações para restringir o acesso usando o OAC:
    Insira o nome do seu bucket do Amazon S3 no campo Origin Domain (Domínio de origem).
    Em Origin access (Acesso de origem), selecione Origin access control settings (recommended) (Configurações de controle de acesso de origem - recomendado).
    Na lista suspensa Origin access control (Controle de acesso de origem), selecione o nome do OAC e escolha Create control setting (Criar configuração de controle).
    Na caixa de diálogo, dê um nome para sua configuração de controle. É uma boa prática deixar a configuração padrão Sign requests (recommended) (Assinar solicitações - recomendado). Em seguida, escolha Create (Criar).
    O CloudFront fornece a declaração de política para dar permissão ao OAC para acessar seu bucket do Amazon S3 depois de criar a distribuição. Selecione Copy Policy (Copiar política) e cole a política na sua configuração de política de bucket do S3.

    -ou-

    Ao criar sua distribuição, use as seguintes configurações para restringir o acesso usando uma OAI:
    Insira o nome do seu bucket do Amazon S3 no campo Origin Domain (Domínio de origem).
    Em Origin access (Acesso de origem), selecione Legacy access identities (Identidades de acesso legadas).
    Na lista suspensa Origin access identity (Identidade de acesso de origem), selecione o nome da identidade de acesso de origem. Em seguida, escolha Create new OAI (Criar nova OAI).
    Na caixa de diálogo, dê um nome para sua nova identidade de acesso de origem 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. Ao criar sua distribuição, é uma prática recomendada usar SSL (HTTPS) em 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 How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution? (Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?).
  4. 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.
  5. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o período de tempo até que os valores DNS anteriores expirem depende do valor de TTL definido na sua zona hospedada. Ele também depende se o resolvedor local usa esses valores de 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 ativar 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 desativadas. Se seu caso de uso exigir que as configurações de bloqueio de acesso público estejam ativadas, use o endpoint de API REST como a origem. Em seguida, restrinja o acesso por meio de um controle de acesso de origem (OAC) ou de uma identidade de 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 da API REST do bucket do S3 que não são usados nessa configuração.
  5. Ao criar sua distribuição, é uma prática recomendada usar SSL (HTTPS) em 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 How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution? (Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?).
  6. 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.
  7. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o período de tempo até que os valores DNS anteriores expirem depende do valor de TTL definido na sua zona hospedada. Ele também depende se o resolvedor local usa esses valores de TTL.

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

Essa configuração restringe o acesso ao configurar um cabeçalho de referência personalizado na distribuição. Em seguida, ele usa uma política de bucket para permitir o acesso somente para 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 ativar 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. Ao criar sua distribuição, é uma prática recomendada usar SSL (HTTPS) em 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 How can I troubleshoot issues with using a custom SSL certificate for my CloudFront distribution? (Como posso solucionar problemas com o uso de um certificado SSL personalizado para minha distribuição do CloudFront?).
  5. 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 desativadas. O Amazon S3 considera pública uma política de bucket que concede acesso anônimo restrito por um Referer. Se seu caso de uso exigir que as configurações de bloqueio de acesso público estejam ativadas, use o endpoint de API REST como a origem. Em seguida, restrinja o acesso com um controle de acesso de origem (OAC) ou de uma identidade de 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.
  6. 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.
  7. Aguarde até que as alterações no DNS se propaguem e que as entradas DNS anteriores expirem.
    Observação: o período de tempo até que os valores DNS anteriores expirem depende do valor de TTL definido na sua zona hospedada. Ele também depende se o resolvedor local usa esses valores de TTL.

Usar o CloudFormation para implantar um endpoint de site estático como origem 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 políticas de cabeçalho de resposta do CloudFront 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.