Conceitos básicos de um site estático seguro - Amazon CloudFront
Visão geral da soluçãoImplante a solução

Conceitos básicos de um site estático seguro

É possível começar a usar o Amazon CloudFront com a solução descrita neste tópico para criar um site estático seguro para seu nome de domínio. Um site estático usa apenas arquivos estáticos, como HTML, CSS, JavaScript, imagens e vídeos, e não precisa de servidores nem de processamento no lado do servidor. Com essa solução, seu site obtém os seguintes benefícios:

  • Usa o armazenamento durável do Amazon Simple Storage Service (Amazon S3): essa solução cria um bucket do Amazon S3 para hospedar o conteúdo estático do site. Para atualizar seu site, basta carregar os novos arquivos no bucket do S3.

  • É acelerado pela rede de entrega de conteúdo do Amazon CloudFront: essa solução cria uma distribuição do CloudFront que o site forneça baixa latência aos visualizadores. A distribuição é configurada com um controle de acesso à origem (OAC) para garantir que o site seja acessível somente pelo CloudFront, não diretamente pelo S3.

  • É protegido por HTTPS e cabeçalhos de segurança: essa solução cria um certificado SSL/TLS no AWS Certificate Manager (ACM) e o anexa à distribuição do CloudFront. Esse certificado permite que a distribuição veicule o site do seu domínio de forma segura com HTTPS.

  • É configurado e implantado com o AWS CloudFormation: esta solução usa um modelo do AWS CloudFormation para configurar todos os componentes para que você possa se concentrar mais no conteúdo do seu site e menos na configuração de componentes.

Essa solução é de código aberto no GitHub. Para visualizar o código, enviar uma solicitação pull ou abrir um problema, acesse https://github.com/aws-samples/amazon-cloudfront-secure-static-site.

Visão geral da solução

O diagrama a seguir mostra uma visão geral de como essa solução de site estático funciona:

Diagrama de visão geral de um site estático seguro com o CloudFront

  1. O visualizador solicita o site em www.exemplo.com.

  2. Se o objeto solicitado for armazenado em cache, o CloudFront retornará o objeto de seu cache ao visualizador.

  3. Se o objeto não estiver no cache do CloudFront, ele solicitará o objeto da origem (um bucket do S3).

  4. O S3 retorna o objeto ao CloudFront.

  5. O CloudFront armazena o objeto em cache.

  6. Os objetos são retornados ao visualizador. As solicitações subsequentes do objeto que chegam ao mesmo ponto de presença do CloudFront são atendidas com o cache do CloudFront.

Implante a solução

Para implantar a solução de site estático seguro, é possível escolher uma das seguintes opções:

  • Use o console do AWS CloudFormation para implantar a solução com conteúdo padrão e faça upload do conteúdo do seu site no Amazon S3.

  • Clone a solução em seu computador para adicionar o conteúdo do site. Depois, implante a solução com a AWS Command Line Interface (AWS CLI).

nota

Você deve usar a região Leste dos EUA (Norte da Virgínia) para implantar o modelo do CloudFormation.

Pré-requisitos

Para usar essa solução, são necessários os seguintes pré-requisitos:

  • Um nome de domínio registrado, como example.com, apontado para uma zona hospedada do Amazon Route 53. A zona hospedada deverá estar na mesma Conta da AWS na qual você a solução é implantada. Quando não houver um nome de domínio registrado, é possível registrar um com o Route 53. Quando houver um nome de domínio registrado, mas que não apontado para uma zona hospedada do Route 53, configure o Route 53 como seu serviço DNS.

  • Permissões do AWS Identity and Access Management (IAM) para executar modelos do CloudFormation que criam funções do IAM e permissões para criar todos os recursos da AWS na solução. Para obter mais informações, consulte Controlling access with AWS Identity and Access Management no Manual do usuário do AWS CloudFormation.

Você é responsável pelos custos incorridos durante a utilização da solução. Para ter mais informações sobre custos, consulte as páginas de preços para cada AWS service (Serviço da AWS).

Usar o console do AWS CloudFormation

Como implantar usando o console do CloudFormation

  1. Inicie esta solução no console do AWS CloudFormation. Se necessário, faça login na sua Conta da AWS.

  2. O assistente Create Stack (Criar pilha) será aberto no console do CloudFormation, com campos pré-preenchidos que especificam o modelo do CloudFormation dessa solução.

    Na parte inferior da página, selecione Próximo.

  3. Na página Especificar detalhes da pilha, insira valores para os seguintes campos:

    • SubDomain (Subdomínio): insira o subdomínio a ser usado para o site. Por exemplo, se o subdomínio for www, o site estará disponível em www.example.com. (Substitua exemplo.com pelo seu nome de domínio, conforme explicado no marcador a seguir.)

    • DomainName: insira o nome do domínio, como example.com. Esse domínio deve estar apontado para uma zona hospedada do Route 53.

    • HostedZoneID: o ID da zona hospedada no Route 53 no seu nome de domínio.

    • CreateApex: (opcional) crie um alias para o apex do domínio (exemplo.com) na configuração do CloudFront.

  4. Quando terminar, escolha Next (Próximo).

  5. (Opcional) Na página Configure stack options (Configurar opções de pilha), adicione tags e outras opções de pilha.

  6. Quando terminar, escolha Next (Próximo).

  7. Na página Revisar, role até a parte inferior da página e marque as duas caixas na seção Recursos. Esses recursos permitem que o CloudFormation crie um perfil do IAM que permita acesso aos recursos da pilha e nomeie-os dinamicamente.

  8. Selecione Create stack.

  9. Aguarde até que a criação da pilha seja concluída. A pilha criará algumas pilhas aninhadas e poderá levar vários minutos ser concluída. Após a conclusão, o Status mudará para CREATE_COMPLETE.

    Quando o status for CREATE_COMPLETE, acesse https://www.exemplo.com para visualizar seu site (substitua www.exemplo.com pelo subdomínio e nome de domínio especificado na etapa 3). Será exibido o conteúdo padrão do site:

    Conteúdo padrão do site estático da solução. Ele diz: “Sou um site estático!”
Como substituir o conteúdo padrão do site por seu próprio conteúdo

  1. Abra o console do Amazon S3 em https://console.aws.amazon.com/s3/.

  2. Escolha o bucket que tenha o nome que comece com amazon-cloudfront-secure-static-site-s3bucketroot-.

    nota

    Certifique-se de escolher o bucket com s3bucketroot no nome, não s3bucketlogs. O bucket com s3bucketroot no nome contém o conteúdo do site. Aquele com s3bucketlogs contém somente arquivos de log.

  3. Exclua o conteúdo padrão do site e carregue o seu.

    nota

    Se você visualizou seu site com o conteúdo padrão da solução, é provável que parte do conteúdo padrão esteja armazenada em cache em um ponto de presença do CloudFront. Para garantir que os visualizadores vejam o conteúdo atualizado do site, invalide os arquivos para remover as cópias armazenadas em cache dos pontos de presença do CloudFront. Para ter mais informações, consulte Invalidar arquivos para remover conteúdo.

Clonar a solução localmente

Pré-requisitos

Para adicionar o conteúdo do site antes de implantar essa solução, é necessário empacotar os artefatos da solução localmente, o que requer Node.js e npm. Para obter mais informações, consulte https://www.npmjs.com/get-npm.

Como adicionar o conteúdo do site e implantar a solução

  1. Clone ou faça download da solução em https://github.com/aws-samples/amazon-cloudfront-secure-static-site. Depois que clonar ou fazer download, abra um prompt de comando ou terminal e navegue até a pasta amazon-cloudfront-secure-static-site.

  2. Execute o seguinte comando para instalar e empacotar os artefatos da solução:

    make package-static

  3. Copie o conteúdo do site na pasta www, substituindo o conteúdo padrão do site.

  4. Execute o seguinte comando da AWS CLI para criar um bucket do Amazon S3 para armazenar os artefatos da solução. Substitua amzn-s3-demo-bucket-for-artifacts pelo nome do bucket.

    aws s3 mb s3://amzn-s3-demo-bucket-for-artifacts --region us-east-1

  5. Execute o comando da AWS CLI a seguir a fim de empacotar os artefatos da solução como um modelo do CloudFormation. Substitua amzn-s3-demo-bucket-for-artifacts pelo nome do bucket que você criou na etapa anterior.

    aws cloudformation package \
    --region us-east-1 \ 
    --template-file templates/main.yaml \
    --s3-bucket amzn-s3-demo-bucket-for-artifacts \
    --output-template-file packaged.template

  6. Execute o seguinte comando para implantar a solução com o CloudFormation, substituindo os seguintes valores:

    • your-CloudFormation-stack-name: substitua por um nome para a pilha do CloudFormation.

    • example.com: substitua pelo nome de seu domínio. Esse domínio deve estar apontado para uma zona hospedada do Route 53 na mesma Conta da AWS.

    • www: substitua pelo subdomínio a ser usado para o site. Por exemplo, se o subdomínio for www, o site estará disponível em www.example.com.

    • hosted-zone-ID: substitua pelo ID da zona hospedada do Route 53 do nome de domínio.

    aws cloudformation deploy \
    --region us-east-1 \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID

    1. (Opcional) Para implantar a pilha com um apex de domínio, execute o comando a seguir.

      aws --region us-east-1 cloudformation deploy \
    --stack-name your-CloudFormation-stack-name \
    --template-file packaged.template \
    --capabilities CAPABILITY_NAMED_IAM CAPABILITY_AUTO_EXPAND \
    --parameter-overrides  DomainName=example.com SubDomain=www HostedZoneId=hosted-zone-ID CreateApex=yes

  7. Aguarde até que a pilha do CloudFormation conclua a criação. A pilha criará algumas pilhas aninhadas e poderá levar vários minutos ser concluída. Após a conclusão, o Status mudará para CREATE_COMPLETE.

    Quando o status for alterado para CREATE_COMPLETE, acesse https://www.exemplo.com para visualizar o site (substitua www.exemplo.com pelo subdomínio e nome de domínio especificado na etapa anterior). Será exibido o conteúdo do site.

Encontrar logs de acesso

Essa solução habilita os logs de acesso para a distribuição do CloudFront. Conclua as etapas a seguir para localizar os logs de acesso da distribuição.

Como localizar os logs de acesso da distribuição

  1. Abra o console do Amazon S3 em https://console.aws.amazon.com/s3/.

  2. Escolha o bucket que tenha o nome que comece com amazon-cloudfront-secure-static-site-s3bucketlogs-.

    nota

    Certifique-se de escolher o bucket com s3bucketlogs no nome, não s3bucketroot. O bucket com s3bucketlogs no nome contém arquivos de log. Aquele com s3bucketroot contém o conteúdo do site.

  3. A pasta chamada cdn contém os logs de acesso do CloudFront.