# 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)](https://docs.aws.amazon.com/AmazonS3/latest/dev/Welcome.html)**: 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](private-content-restricting-access-to-s3.md) (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)](https://docs.aws.amazon.com/acm/latest/userguide/acm-overview.html) 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](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)**: esta solução usa um modelo do 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](https://github.com/aws-samples/amazon-cloudfront-secure-static-site).
**Topics**
+ [Visão geral da solução](#cloudformation-website-overview)
+ [Implante a solução](#deploy-secure-static-website-cloudformation)
## 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\]](http://docs.aws.amazon.com/pt_br/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-overview-github.png)
1. O visualizador solicita o site em www.exemplo.com.
1. Se o objeto solicitado for armazenado em cache, o CloudFront retornará o objeto de seu cache ao visualizador.
1. Se o objeto não estiver no cache do CloudFront, ele solicitará o objeto da origem (um bucket do S3).
1. O S3 retorna o objeto ao CloudFront.
1. O CloudFront armazena o objeto em cache.
1. 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 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.
**Topics**
+ [Pré-requisitos](#deploy-website-cloudformation-prerequisites)
+ [Usar o console do CloudFormation](#deploy-website-cloudformation-console)
+ [Clonar a solução localmente](#deploy-website-cloudformation-clone)
+ [Encontrar logs de acesso](#deploy-website-cloudformation-logs)
### 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](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/registrar.html). 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](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/dns-configuring.html).
+ 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 [Controlar o acesso com o AWS Identity and Access Management](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/using-iam-template.html) no *Guia 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)](https://aws.amazon.com/pricing/).
### Usar o console do CloudFormation
**Como implantar usando o console do CloudFormation**
1. [Inicie esta solução no console do CloudFormation](https://console.aws.amazon.com/cloudformation/home?region=us-east-1#/stacks/new?stackName=amazon-cloudfront-secure-static-site-templates-main&templateURL=https://s3.amazonaws.com/solution-builders-us-east-1/amazon-cloudfront-secure-static-site/latest/main.yaml). Se necessário, faça login na sua Conta da AWS.
1. 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**.
1. 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.
1. Quando terminar, escolha **Next (Próximo)**.
1. (Opcional) Na página **Configure stack options (Configurar opções de pilha)**, [adicione tags e outras opções de pilha](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/cfn-console-add-tags.html).
1. Quando terminar, escolha **Next (Próximo)**.
1. 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.
1. Selecione **Create stack**.
1. 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\$1COMPLETE**.
Quando o status for **CREATE\$1COMPLETE**, 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!”\]](http://docs.aws.amazon.com/pt_br/AmazonCloudFront/latest/DeveloperGuide/images/cloudfront-secure-static-website-content.png)
**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/](https://console.aws.amazon.com/s3/).
1. 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.
1. 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 obter mais informações, consulte [Invalidar arquivos para remover conteúdo](Invalidation.md).
### 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](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](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`.
1. Execute o seguinte comando para instalar e empacotar os artefatos da solução:
```
make package-static
```
1. Copie o conteúdo do site na pasta `www`, substituindo o conteúdo padrão do site.
1. 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
```
1. 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
```
1. 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
```
1. 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\$1COMPLETE**.
Quando o status for alterado para **CREATE\$1COMPLETE**, 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](AccessLogs.md) 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/](https://console.aws.amazon.com/s3/).
1. 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.
1. A pasta chamada **cdn** contém os logs de acesso do CloudFront.