Esse material é uma continuação do post Deploy de uma aplicação Vue.js no S3 da AWS, no meu caso trata-se de uma SPA em Vue.js, mas poderia ser uma SPA feita em qualquer outro framework/lib. O importante aqui é que estamos Configurando HTTPS na AWS via CloudFront para seu projeto.
Para começar você precisará ter seu projeto já hospedado e funcionando no S3 da AWS, se não sabe como fazer isso veja a primeira parte desse tutorial clicando AQUI. Um site estático no S3 não possui o recurso SSL, então é ai que entra o CloudFront, este é um serviço web que acelera a distribuição do conteúdo estático e dinâmico pela web, como arquivos .html, .css, .js e arquivos de imagem para os usuários.
Criando uma distribuição no Cloud Front
Agora abra seu console da AWS e vá até o servico CloudFront e clique em “Create Distribution”.
Em “Select a delivery method for your content” escolha a opcão Web.
Agora no formulário preencha o seguinte:
Origin Domain Name: URL de acesso do seu bucket S3
Origin ID: Ele deve preencher automático, mas se não acontecer pense em um ID único separado por traços.
Em “Default Cache Behavior Settings”, marque: Redirect HTTP to HTTPS
Agora em “Distribution Settings” no campo “Price Class” escolha a opção “Use Only U.S., Canada and Europe” se quiser economizar um pouco com o serviço (menor desempenho).
Em “SSL Certificate” marque a opcão “Default CloudFront Certificate (*.cloudfront.net)” para usar o Certificado padrão do CloudFront.
No campo “Default Root Object” digite o arquivo index da aplicacao, no meu caso é index.html
Deixe o restante das opções padrão como estão. Clique em “Create Distribution”, esse processo deve demorar no máximo 5 minutos.
Quando a distribuição estiver pronta seu status ficará como “Enabled”, clicando nela você verá os dados da configuração e no campo “Domain Name” o link que dará acesso a sua pagina.
Problemas possíveis
Acessando o link caso você receba uma mensagem com um XML de AccessDenied será preciso habilitar a leitura de objetos para o acesso publico em seu bucket do S3 (aconteceu isso comigo), para fazer isso vá até seu bucket e na guia “Permissions” clique em “Access Control List”.
Na linha “Public access” marque a opcao “Everyone” e na caixa que irá aparecer marque “Read bucket permissions”
Outro problema que tive durante esse processo foi que quando acessava a url da minha aplicação ela era exibida corretamente mas se eu recarregasse a pagina no F5 o serviço tentava acessar exatamente o endereço da url e não meu index.html, resolvi este problema com uma solução que encontrei no StackOverflow, veja:
No CloudFront clique na distribuição que acabamos de fazer, e então na guia “Error Pages”.
Aqui vamos personalizar duas respostas de erro, um 403 e outro 404, para isso clique em “Create Custom Error Response”.
Aqui você deve escolher o error response 403 e marcar a caixa “Customize Error Response” com Yes, então preencha o “Response Page Path” com /index.html e escolha também no campo “HTTP Response Code” o código 200.
Feito isso clique em Create e repita esse passo para o código 404.
Isso fará com que o serviço do CloudFront sempre chame esse arquivo index em caso de response 403/404, e tudo bem já que as rotas são gerenciadas pela própria SPA.
Configurando um domínio customizado
Nesse ponto você já tem a sua pagina disponível com SSL mas não com um domínio customizado, então vamos configurar um.
Agora para estarmos configurando HTTPS na AWS, volte para o console da AWS e procure pelo serviço “Certificate Manager“.
ATENÇÃO, ao entrar no serviço “Certificate Manager” você deve alterar a região para US East (N. Virginia) us-east-1, caso contrario seu certificado não aparecerá como uma opção quando for configurar seu CloudFront mais a frente.
Clique na opção “Request a certificate”.
Marque a opção “Request a public certificate” e depois em “Request a certificate”.
Agora digite o nome do seu domínio (ex. site.example.com) e clique em “Next”.
Em “Select validation method” escolha a opção “DNS validation” e clique em “Next”, não será preciso adicionar nenhuma tag então avance novamente.
Verifique se os dados estão corretos e clique em “Confirm and request”.
Aqui sua validação por DNS deve estar com o status como “Pending validation”, então será exibida uma caixa com os dados de entrada do CNAME que você deverá adicionar no seu DNS para que a validação aconteça.
Então para fazer a validação por DNS e ativar seu SSL, a entrada deve ficar alguma coisa parecido com isso:
NAME: _07260da3d107d5g4d22258729ed39709.example.com.
VALUE: _6001e427a3111f2aad93420f0ab5ae31.jfrzfjrpai.acm-validations.aws.
Você também deve fazer a configuração do seu domínio para o CloudFront, no meu caso é o subdomínio site.example.com, então ficaria assim:
NAME: site
VALUE: d6hj52arhrn5.cloudfront.net
Feito tudo isso agora é só aguardar a verificação por DNS, isso pode levar alguns minutos ou horas, se preferir pode verificar o status dessa propagação com essa ferramenta mxtoolbox. Quando o certificado estiver pronto, deve aparecer o status como issued.
Após a ativação do certificado nós já podemos estar configurando HTTPS na AWS via CloudFront, então volte para lá, abra sua distribuição e clique em “Edit”.
Em “Alternate Domain Names” preencha com o nome do domínio (site.example.com) e marque a opção “Custom SSL Certificate”, e no campo abaixo escolha o certificado que acabamos de criar.
Clique em “Yes, Edit”
Aguarde alguns minutos até sua distribuição e DNS terminar de propagar e já será possivel acessar sua aplicação com SSL através do seu domínio customizado.
Pronto, se você tem alguma sugestão de algo que possa melhorar deixe um comentário ou me escreve um e-mail.
Espero ter ajudado.
Fontes.
https://docs.aws.amazon.com/pt_br/AmazonCloudFront/latest/DeveloperGuide/Introduction.html
https://levelup.gitconnected.com/deploying-vue-js-to-aws-with-https-and-a-custom-domain-name-3ae1f79fe188