Como publicar a sua SPA (Single Page Application) em Serverless na AWS com SSL
Este post é uma pequena extensão do meu tutorial sobre como publicar um Website estático com SSL (HTTPS) na AWS para explicar o ponto onde devemos alterar para podermos publicar uma SPA na mesma estrutura de maneira que as rotas sejam devidamente interpretadas pela aplicação.
O que vamos corrigir
Para exemplificar, fiz a publicação de uma SPA, em React (mas pode ser Angular, Vue.js, etc), seguindo fielmente o passo a passo do post anterior, e acessei uma página interna /contact diretamente:
Note que, obtemos um erro de permissão, pois a interpretação da rota, nesta configuração, não chega até a aplicação.
Agora, no exemplo abaixo, publiquei a mesma aplicação, com outra distribuição, apenas alterando uma configuração, conectada ao mesmo conteúdo, ou seja, é a mesma base de código para as duas distribuições. Veja que conseguimos acessar a rota diretamente, sem erro:
Possibilidades
Para isso, existem duas formas de fazer, uma é explicada neste post do @lucassabreu, a qual apliquei no meu exemplo acima, que estava com erro de permissão, e funcionou, como podemos ver:
A outra forma, que demonstro aqui, é configurar a origem do conteúdo da distribuição no CloudFront direto para a URL do Static website hosting, onde, neste caso, o CDN delega todas as tratativas ao próprio hosting do S3.
Onde vamos alterar
- A alteração é apenas no item 4.3 do tutorial original, portanto, ele deve ser seguido até este ponto, então aplica-se esta forma aqui explicada, e continua seguindo a partir do 4.4 normalmente.
- Dentro do bucket, acesse a aba Properties, e clique no bloco Static website hosting, para expandir os detalhes:
3. Então, com o bloco expandido, copie o Endpoint, sem o http://, desta forma:
4. Agora, ao criar a nossa distribuição no CloudFront, no campo Origin Domain Name, ao invés de selecionarmos o bucket na lista, vamos colar o Endpoint copiado, ficando desta forma:
5. Após colocar, e clicar fora do campo, o campo Origin ID será preenchido automaticamente, não altere este valor.
Podemos então, seguir os demais passos do tutorial, a partir do item 4.4, normalmente, e ao final teremos o resultado esperado.
Conclusão
Tenho sustentado diversas aplicações SPA desta forma, construídas em Angular e Vue.js, utilizando recursos avançados como autenticação, redirecionamentos, consumo de APIs, Google Tag Manager, Google Analytics, entre outros, comprovando que esta técnica é válida e aplicável em grandes aplicações.
Neste exemplo utilizei React seguindo este tutorial do OneBitCode, com uma simples diferença, no arquivo index.html alterei a importação das fonts de http para https, para não quebrar o nosso certificado SSL, ficando assim:
Entre as vantagens de utilizar esta estrutura podemos elencar os principais, como redução significativa da complexidade de configuração e sustentação do ambiente de produção, redução do custo, pois seremos cobrados baseado no volume de armazenamento no S3 e transferência de dados (throughput) tanto no S3 quanto no CloudFront, todos eles muito reduzidos se comparados com hospedagens comuns, e, o maior benefício é a auto-escalabilidade, de forma que não precisamos nos preocupar em momento algum em provisionar a capacidade de resposta de qualquer destes serviços, sendo algo totalmente gerenciado pela estrutura da AWS.
E, claro, aplicações globais podem usufruir dos pontos de presença de caches regionais da AWS que reduzem a latência para acessos a sua aplicação em diferentes partes do mundo.
Comentários são bem vindos!
