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

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

Conceitos básicos de um site estático seguro

Você pode começar a usar a Amazon CloudFront usando 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 somente arquivos estáticos, como HTML, CSS, imagens e vídeos JavaScript, e não precisa de servidores ou processamento do 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 CloudFront conteúdo da Amazon — Essa solução cria uma CloudFront distribuição para servir seu site aos espectadores com baixa latência. A distribuição é configurada com uma identidade de acesso de origem para garantir que o site seja acessível somente por meio do S3 CloudFront, e não diretamente.

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

    Essa solução também usa o Lambda@Edge para adicionar cabeçalhos de segurança a cada resposta do servidor. Os cabeçalhos de segurança são um grupo de cabeçalhos na resposta do servidor web que dizem aos navegadores da web para tomarem precauções de segurança extras. Para obter mais informações, consulte esta postagem do blog: Adicionando cabeçalhos de segurança HTTP usando o Lambda @Edge e a Amazon. CloudFront

  • É 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 ativada 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 CloudFront

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

  2. Se o objeto solicitado estiver armazenado em cache, CloudFront retornará o objeto do cache para o visualizador.

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

  4. O S3 retorna o objeto para CloudFront, o que aciona o evento de resposta de origem do Lambda @Edge.

  5. O objeto, incluindo os cabeçalhos de segurança adicionados pela função Lambda @Edge, é adicionado CloudFront ao cache do.

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

Implantar 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 CloudFormation modelo.

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 deve estar na mesma em Conta da AWS que você implanta essa solução. 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.

  • AWS Identity and Access Management(IAM) permissões para lançar CloudFormation modelos que criam funções do IAM e permissões para criar todos os AWS recursos na solução.

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

Usar o console de AWS CloudFormation

Para implantar usando o CloudFormation console

  1. Escolha AWSLaunch on para abrir essa solução no AWS CloudFormation console. Se necessário, faça login no seuConta da AWS.

    Launch on AWS button

  2. O assistente de criação de pilha é aberto no CloudFormation console, com campos pré-preenchidos que especificam o modelo dessa solução. CloudFormation

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

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

    • SubDomain— Insira o subdomínio a ser usado em seu 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 seu nome de domínio, como exemplo.com. Esse domínio deve estar apontado para uma zona hospedada do Route 53.

    • HostedZoneId— O ID da zona hospedada do Route 53 do seu nome de domínio.

    Quando terminar, escolha Next (Próximo).

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

    Quando terminar, escolha Next (Próximo).

  5. 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 AWS CloudFormation crie uma função do IAM que permita o acesso aos recursos da pilha e nomeie-os dinamicamente.

  6. Selecione Create stack.

  7. 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 cujo nome começa 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 dessa solução, é provável que parte do conteúdo padrão esteja armazenado em cache em um ponto de CloudFront presença. Para garantir que os espectadores vejam o conteúdo atualizado do seu site, invalide os arquivos para remover as cópias em cache dos pontos de CloudFront presença. Para ter mais informações, consulte Invalidar arquivos.

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. example-bucket-for-artifactsSubstitua pelo nome do seu próprio bucket.

    aws s3 mb s3://example-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 AWS CloudFormation. example-bucket-for-artifactsSubstitua pelo nome do bucket que você criou na etapa anterior.

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

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

    • your- CloudFormation -stack-name — Substitua por um nome para a pilha. AWS 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.

    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

  7. Aguarde até que a criação da pilha do AWS CloudFormation 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 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 cujo nome começa 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 registros de CloudFront acesso.