Implementando seu próprio link tree

Os tempos mudaram. Antigamente, bastava ter um perfil atualizado no LinkedIn para receber várias propostas de emprego como desenvolvedor de software. Nosso mercado mudou da água pro vinho pós colapso da pandemia. As empresas estão muito mais exigentes com relação aos seus candidatos e a concorrência está cada vez mais intensa.

Não quero assustar ninguém, mas sim ressaltar a importância da presença online, não só como “marketing” pessoal, mas também como portfólio mesmo. Ter algo para mostrar, como um blog, um site próprio, repositórios profissionais, é quase que requerimento, não um diferencial.

Com isso em mente, decidi criar uma página pessoal no formato link tree para aprender um pouco sobre serviços de CDN, deploy contínuo (CI/CD) e também permissionamento cross plataforma (OAuth, OIDC), e é sobre esse projetinho que quero conversar um pouco.

Arquitetura e stack

O projeto em si é simples, pois o foco era aprender mais sobre certas tecnologias, mas mesmo assim vale destacar um pouco cada caixinha do diagrama acima.

Componentes

• Hospedagem de arquivos estáticos no AWS S3
• Repositório público no Github (https://github.com/erick-tmr/link-in-bio-self-profile)
• Github Actions como pipeline de deploy
• Cloudflare para CDN / Proxy Reverso
• Autenticação via OIDC com tokens short lived para uso no AWS CLI
• Gravatar como CMS

Sobre o código

Utilizei como base este template, que é open source e já possui uma integração interessante de CMS (Gravatar). Do template, acabei não mudando muitas coisas, a mudança mais notável foi na utilização de modules e import maps, uma funcionalidade nativa de navegadores modernos, que acabou englobando uma fatia dos bundlers como Webpack, praticamente tornando dispensável sua utilização em projetos mais simples, como este.

Quem der uma olhada no repositório deste projeto vai ver que utilizei uma lib externa para fazer o MD5 de uma string, tudo com import maps, direto do CDN da NPM.

Pra quem ainda não experimentou, diria que é uma inovação bem legal e que vale a pena dar uma olhada, link para as docs da MDN.

CI / CD e automação de deploy

Para o CI / CD, optei pelo Github Actions, por ser gratuito para projetos open source e ser bem prático.

O pipeline é simples, utilizando uma action da própria AWS para fazer a autenticação, é gerado um token de curta duração para assumir uma Role do IAM já pré configurada com as permissões necessárias para poder fazer o sync com um bucket do S3.

Trabalho no time de segurança da empresa onde estou atualmente, lidando diariamente com mTLS, OAuth, OpenID Connect, etc. Acabei testando essa solução mais por questões de benchmark, mas foi um aprendizado bem interessante, particularmente acho bem legal poder trabalhar num business context que, de certa forma, é agnóstico da empresa que você está no momento.

Hospedagem S3

Como o site é simples e consiste somente de alguns arquivos estáticos, optei pelo S3 para armazenar e distribuir os arquivos. Para quem não conhece, o S3 possui uma funcionalidade nativa para transformar determinado bucket em um site estático, expondo assim uma URL pública para que as pessoas tenham acesso ao bucket, tendo também um free tier bem legal.

Um adendo aqui foi a parte de permissionamento, sofri um pouco para conseguir configurar as policies necessárias para que o bucket se tornasse publico de fato, devido a querer restringir o acesso ao S3 somente a Cloudflare, que foi o serviço de CDN escolhido, mas depois de bater a cabeça um pouco acabou dando certo.

CDN / Proxy Reverso

Aqui eu utilizei a Cloudflare mais por conta de querer experimentar algumas features que eu iria utilizar no meu trampo mesmo, mas talvez se não tivesse esse requisito, eu teria utilizado o próprio CloudFront da AWS.

Poderia simplesmente não utilizar nenhum CDN e apontar meu DNS diretamente para a URL pública do meu bucket, porém, existe uma restrição do S3 em que não é possível utilizar TLS / HTTPS, sendo assim, pra ter uma proteção mais legal, o uso de algum CDN na frente se torna indispensável.

A Cloudflare proporciona não só o serviço de CDN como proteção a ataques DDoS, certificados SSL, cache inteligente e mais, tudo no plano gratuito, o que é algo bem legal. A feature que eu gostaria de testar mesmo, o mTLS, acabou não rolando, o avoado que vôs fala não verificou antes que esta feature está presente somente em planos enterprise.

Concluindo

Sobre o projeto, é isso! No futuro, pretendo escrever um post mais detalhado, com cara de tutorial, ensinando passo a passo cada etapa desse processo. Se você ficou interessado e quer ver essa parte dois, deixe um comentário ou mande um sinal de fumaça haha.