Como hospedar um aplicativo de página única com o AWS CloudFront e o Lambda @ Edge

Configurando o CloudFront para suportar URLs de estado de envio

Este parece ser fácil, mas estou chocado com a quantidade de tempo que pode ser desperdiçado configurando a AWS para hospedagem estática do site e deve haver uma maneira melhor:

serverless : nós estaremos hospedando ativos estáticos, então não mexer com servidores para isso
barato e de alto desempenho : aproveitando o AWS CDN, obteremos uma distribuição global de classe mundial e armazenamento em cache por centavos
automatizado : este não é um tutorial do console da AWS. Algumas das agências de marketing às quais consultei normalmente implantam novas páginas de destino ou sites estáticos toda semana. Se isso é algo que você faz regularmente também, vale a pena investir uma hora para automatizar isso em um procedimento de botão de pressão, não é?

Sobre a automação

Há algo muito poderoso em automatizar até mesmo as pequenas coisas. Os benefícios são muito mais do que a soma das economias de tempo ao longo do tempo, reduzem os erros humanos, melhoram a confiabilidade do serviço, mantêm seus funcionários ocupados com trabalhos de maior valor e aumentam o moral dos funcionários, eliminando tarefas chatas de baixo valor. Melhora o seu negócio globalmente.

Um fator de mudança: com o Lambda @ Edge, agora podemos configurar o CloudFront para suportar URLs de estado de envio

O problema até agora com a hospedagem de um SPA no CloudFront é que não pudemos oferecer suporte a URLs de estado de envio porque o CloudFront não oferece uma configuração "abrangente", ou seja, não poderíamos fornecer o mesmo arquivo index.html para qualquer solicitação o domínio. A solução foi usar urls “feios” de estado de hash que era um turn-off para a maioria.

Em 2017, a AWS lançou o Lambda @ Edge, um serviço que executa suas funções do Lambda “na borda” da nuvem, ou seja, imediatamente antes / depois que o CDN consulta seu cache:

  • solicitação de visualizador : após o CloudFront receber uma solicitação de um visualizador
  • solicitação de origem : antes do CloudFront encaminha a solicitação para a origem
  • resposta de origem: depois que o CloudFront recebe a resposta da origem
  • resposta do visualizador : antes do CloudFront encaminhar a resposta para o visualizador

Isso nos permitirá reescrever os pedidos de solicitação de origem, para que possamos sempre exibir index.html para todas as solicitações de rotas de estado de envio. Dias felizes!

A nossa função de pedido de origem Lambda @ Edge

O que eu preciso?

  • um nome de domínio existente registrado como zona hospedada na sua conta da AWS
  • um certificado SSL curinga para todos os subdomínios
  • terraform e aws CLI instalados e configurados em sua máquina
  • um aplicativo React ou Vue fictício para implantar

Mostre-me o módulo Terraform!

Eu lancei um módulo Terraform que faz todo o trabalho pesado para você:

li0nel / terraform-aws-aplicativo de página única
terraform-aws-single-page-application – módulo terraform que permite implantar SPAs na AWS usando Git Push github.com

Copie os arquivos de exemplo para sua pasta raiz do SPA:
wget https://raw.githubusercontent.com/li0nel/terraform-aws-single-page-application/master/examples/main.tf
wget https://raw.githubusercontent.com/li0nel/terraform-aws-single-page-application/master/examples/outputs.tf
wget https://raw.githubusercontent.com/li0nel/terraform-aws-single-page-application/master/examples/terraform.tfvars

wget https://raw.githubusercontent.com/li0nel/terraform-aws-single-page-application/master/examples/variables.tf

Isso irá puxar o módulo Terraform do registro Terraform

Substitua os valores em terraform.tfvars pelo seu nome de perfil de CLI aws , o nome do seu aplicativo e o nome do seu domínio. Verifique se você possui um certificado existente para *.cdn.mydomain.com na região us-east-1 .

Execute terraform init e terraform apply e espere que o bucket S3, a função Lambda e a distribuição do CloudFront sejam criados:

Agora você pode compilar seus ativos de front-end localmente e enviá-los diretamente para o bucket do S3 para implantar seu aplicativo:

yarn build && aws s3 cp --recursive --acl=public-read build/ s3://$(terraform output s3_bucket)

Uma alternativa é usar o repositório CodeCommit Git e o pipeline CodePipeline que foi criado pelo módulo Terraform para permitir que a AWS construa seu aplicativo, execute seus testes e implante no S3.

De qualquer forma, seu aplicativo está sendo executado no CloudFront!

O URL de estado de envio funcionando corretamente ao atualizar a página