Como realizar a Integração AWS CloudFront

Primeiramente, é importante que você compreenda que a solução de integração AWS CloudFront é específica de orientação técnica para projetos Criação .cc que não se enquadrem com o uso da Cloudflare como solução.

Certificado público AWS Certificate Manager

Conforme documentação na AWS:

Um certificado público é necessário para suas distribuições do Amazon CloudFront para configurar o CloudFront para exigir que os visualizadores usem HTTPS, para que as conexões sejam criptografadas quando o CloudFront se comunicar com os visualizadores.

Siga os seguintes passos para gerar o certificado:

Acesse console.aws.amazon.com/acm, certifique de emitir o certificado na região Norte da Virgínia;
Clique no botão Solicitar;
Na etapa Tipo de certificado, selecione a opção Solicitar um certificado público;
Na etapa Tipo de certificado certificado público, siga com as seguintes informações:
- Nomes de domínio: preencher com o domínio e subdomínio www do seu site. (ex, hostgator.criacao.cc e www.hostgator.criacao.cc)
- Método de validação: Validação de DNS
- Algoritmo da chave: RSA 2048
Clique no botão Solicitar.

Assim o próximo passo é fazer a validação do certificado. Clique no link da coluna ID do certificado referente ao certificado criado para abrir os detalhes do certificado.

O valor do status do certificado estará como Validação pendente. E as informações para validar o certificado estão na seção Domínios. Caso o domínio esteja na AWS Route 53, clique no botão Criar registros no Route 53. E na tela seguinte clique em Criar registros. Caso a tabela de DNS esteja em outro provedor, crie o registro CNAME na tabela do registro manualmente. A validação pode levar alguns minutos.

Depois que o status do certificado mudar para Emitido, os registros na tabela de DNS utilizados para a verificação não são mais necessário e podem ser excluídos.

Políticas de cache

O CloudFront é uma CDN (content delivery network) poderosa e garante que seu site seja entregue com maior segurança e performance para os usuários. Para isso devem ser configuradas políticas de cache, que permitem você especificar cabeçalhos HTTP, cookies e strings de consulta que o CloudFront inclui na chave de cache dos objetos que são armazenados em locais de borda do CloudFront. Abaixo você irá configurar três políticas de cache essenciais para o funcionamento do WordPress, tanto para a entrega correta de arquivos estáticos quanto para o bom funcionamento das funcionalidades administrativas.

Política de Cache do Admin

Acesse as Políticas no console do CloudFront em https://console.aws.amazon.com/cloudfront/v4/home?#/policies.
Clique no botão Create cache policy.
Na seção Details, preencha com as seguintes informações:
- Name: Criacaocc-DynamicAdmin
- Description: Deixe o campo vazio
Na seção TTL settings: Mantenha os valores pré-definidos
Na seção Cache key settings, selecione os seguintes valores:
- Headers: Host
- Query strings: All
- Cookies: All
Na seção Compression support: Mantenha os valores pré-definidos
Clique no botão Create

Política de Cache Dinâmico

Acesse as Políticas no console do CloudFront em https://console.aws.amazon.com/cloudfront/v4/home?#/policies.
Clique no botão Create cache policy.
Na seção Details, preencha com as seguintes informações:
- Name: Criacaocc-DynamicFrontEnd
- Description: Deixe o campo vazio
Na seção TTL settings: Mantenha os valores pré-definidos
Na seção Cache key settings, selecione os seguintes valores:
- Headers: CloudFront-Is-Tablet-Viewer, CloudFront-Forwarded-Proto, CloudFront-Is-Mobile-Viewer, Host, CloudFront-Is-Desktop-Viewer
- Query strings: All
- Cookies: comment_*, wordpress_*, wp-settings-*
Na seção Compression support: Mantenha os valores pré-definidos
Clique no botão Create

Política de Cache Estático

Acesse as Políticas no console do CloudFront em https://console.aws.amazon.com/cloudfront/v4/home?#/policies.
Clique no botão Create cache policy.
Na seção Details, preencha com as seguintes informações:
- Name: Criacaocc-StaticCache
- Description: Deixe o campo vazio
Na seção TTL settings: Mantenha os valores pré-definidos
Na seção Cache key settings, selecione os seguintes valores:
- Headers: None
- Query strings: All
- Cookies: None
Na seção Compression support: Mantenha os valores pré-definidos
Clique no botão Create

Após criados as políticas de cache, você pode anexá-los a um comportamento de cache da distribuição CloudFront nos próximos passos.

Abaixo, incluímos uma captura de tela mostrando como as configurações devem ficar no painel das políticas do CloudFront. Isso ajudará a visualizar as opções corretas e evitar possíveis erros na configuração.

Distribuição na CloudFront

A distribuição será responsável pela segurança e performance da aplicação.

Siga os seguintes passos para configurar a distribuição:

Acesse console.aws.amazon.com/cloudfront;
Clique no botão Create distribution;
Na seção Origin, preencha as seguintes informações:
- Origin domain: noproxy.hostgator.criacao.cc
  - Protocol: HTTPS only
  - Minimum origin SSL protocol: TLSv1.2
- Origin path: deixe o campo vazio
- Name: Criação .cc
- Add custom header: não adicione nenhum header
- Enable Origin Shield: No
- Additional settings: Mantenha os valores pré-definidos
Na seção Default cache behavior, preencha as seguintes informações:
- Path pattern: Default (*)
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache key and origin requests
  - Selecione Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-DynamicFrontEnd
  - Origin request policy – optional: AllViewer (recommended for custom origins)
  - Response headers policy – optional: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Na seção Web Application Firewall (WAF) escolha: Do not enable security protections
Na seção Settings, preencha as seguintes informações:
- Price class: Use all edge locations (best performance)
- AWS WAF web ACL: deixe o campo vazio
- Alternate domain name (CNAME):
  - domínio principal do seu site (ex, hostgator.criacao.cc);
  - subdomínios www do seu site (ex, www.hostgator.criacao.cc);
- Custom SSL certificate: Selecione o certificado público gerado na AWS Certificate Manager
  - Legacy clients support: não marque
  - Security policy: TLSv1.2_2021 (recommended)
- Supported HTTP versions: marque apenas HTTP/2
- Default root object: deixe o campo vazio
- Standard logging: Off
- IPv6: On
- Description: Site Criação .cc

Configurar Comportamentos Personalizados Na Distribuição do CloudFront

Adicionar comportamentos de cache personalizados para URLs específicas é essencial para garantir o bom desempenho e funcionamento do seu site WordPress. A falta de configuração adequada dessa seção pode resultar em problemas. Neste guia, vamos abordar como configurar corretamente os comportamentos de cache para várias URLs importantes, garantindo que seu site funcione de forma eficiente e sem interrupções.

Acesse console.aws.amazon.com/cloudfront;
Clique na distribuição criado na etapa anterior
Vá para a aba Behaviors

Adicionar comportamento para wp/wp-admin/*

Clique em Create Behavior
Na seção Settings, preencha as seguintes informações:
- Path pattern: wp/wp-admin/*
- Origin and origin groups: noproxy.hostgator.criacao.cc
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-DynamicAdmin
  - Origin request policy: AllViewer
- Response headers policy: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Clique em Save changes.

Adicionar comportamento para wp-login.php

Clique em Create Behavior
Na seção Settings, preencha as seguintes informações:
- Path pattern: wp-login.php
- Origin and origin groups: noproxy.hostgator.criacao.cc
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-DynamicAdmin
  - Origin request policy: AllViewer
- Response headers policy: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Clique em Save changes.

Adicionar comportamento para packages/*

Clique em Create Behavior
Na seção Settings, preencha as seguintes informações:
- Path pattern: packages/*
- Origin and origin groups: noproxy.hostgator.criacao.cc
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-StaticCache
  - Origin request policy: AllViewer
- Response headers policy: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Clique em Save changes.

Adicionar comportamento para wp/wp-includes/*

Clique em Create Behavior
Na seção Settings, preencha as seguintes informações:
- Path pattern: wp/wp-includes/*
- Origin and origin groups: noproxy.hostgator.criacao.cc
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-StaticCache
  - Origin request policy: AllViewer
- Response headers policy: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Clique em Save changes.

Adicionar comportamento para wp-json/*

Clique em Create Behavior
Na seção Settings, preencha as seguintes informações:
- Path pattern: wp-json/*
- Origin and origin groups: noproxy.hostgator.criacao.cc
- Compress objects automatically: Yes
- Viewer:
  - Viewer protocol policy: Redirect HTTP to HTTPS
  - Allowed HTTP methods: GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE
    - Não marque a opção para cachear o método OPTIONS
  - Restrict viewer access: No
- Cache policy and origin request policy (recommended)
  - Cache policy: Criacaocc-DynamicFrontEnd
  - Origin request policy: AllViewer
- Response headers policy: deixe o campo vazio
Não faça nenhuma alteração na seção Function associations
Clique em Save changes.

Abaixo, incluímos uma captura de tela mostrando como as configurações devem ficar no painel do CloudFront. Isso ajudará a visualizar as opções corretas e evitar possíveis erros na configuração.

Certificado para servidor de origem

É necessária a instalação de um certificado SSL válido dentro do servidor da Criação .cc para a realização uma conexão segura com a CloudFront.

Certificados públicos criados na AWS ACM podem ser utilizados apenas em serviços da AWS. Portanto é necessária a geração de um certificado por uma autoridade de certificação reconhecida. O CloudFront utiliza a lista de autoridades reconhecidas da Mozilla para certificar que a conexão entre a CloudFront e o servidor da Criação .cc é segura.

IMPORTANTE: A Criação .cc não faz a gestão de certificados. Essa é uma responsabilidade do nosso cliente. Recomendamos a Let’s Encrypt como solução gratuita para a geração dos certificados.

Assim, tendo os arquivos do certificado em mãos, eles devem ser enviados para suporte@hostgator.criacao.cc.

Cadastro de registro na tabela de DNS

ATENÇÃO: Essa etapa é crítica e deve ser feita no momento em que o site vai para o ar e com acompanhamento do suporte técnico da Criação .cc. Qualquer configuração errada, pode causar indisponibilidade do site.

Para que a distribuição seja acessível pelo endereço do site, é necessário o cadastro do endereço na tabela de DNS.

O registro é um CNAME e o valor dele é a Distribution domain name. Você encontra essa informação na seção Details na aba General da distribuição CloudFront.

Então caso utilize o serviço Route 53, basta acessar a zona hospedada do domínio e criar (ou editar) a entrada que vai responder pelo site.

Nome do registro: nome do subdomínio do site. Se o site ficará no site principal, deixar em branco.
Tipo de registro: A
Marque a opção Alias
Rotear tráfego para:Alias para distribuição do CloudFront
- No campo de busca, escolha a distribuição referente ao endereço.
Política de roteamento: Roteamento Simples
Clique em Criar registros se estiver criando o registro ou em Salvar caso esteja editando

Agora você terá realizado junto com o time da Criação .cc a integração AWS CloudFront.

Importante: Configure o Plugin de Cache

Para garantir que as políticas de cache que você configurou no CloudFront funcionem corretamente, é essencial que o cache do seu site WordPress seja limpo e gerenciado adequadamente. Clique aqui para seguir nosso tutorial sobre como configurar e limpar o cache do WordPress e assegurar que seu site esteja funcionando de maneira otimizada e livre de problemas relacionados ao cache.

Por fim, te convidamos a conferir outros tutorias da categoria Configurações de domínio.