Como Disponibilizar um Site em GatsbyJS na Amazon Web Services
Por Alessandro Oliveira, Criado em 09/07/2020
O que é GatsbyJS
Gatsby é um framework gratuito e de código aberto baseado no React que ajuda os desenvolvedores a criar aplicativos e sites de alta performance.
Na prática os desenvolvedores criam templates de paginas fixas ou páginas gerenciadas por ferramentas de gerenciamento de conteúdo como WordPress ou Contentful e após a execução de um processo de build o conteúdo é aplicado nos templates e as páginas são geradas.
As principais vantagens que identificamos nos sites que desenvolvemos utilizando o GatsbyJS são:
- performance inicial excelente, utilizando Gatsby Image, todas as imagens já são otimizadas, gerando tamanhos diversos codificação em JPEG e WEBP.
- alta indexabilidade, já que são geradas páginas "index.html" para todas as urls do site com conteúdo pronto para indexação.
- carregamento progressivo das páginas subsequentes, após o carregamento de qualquer "index.html" do site, as demais páginas são geradas através de javascript de forma dinâmica, criando uma percepção de performance incomparável.
- alta segurança, diferentemente de sites em WordPress que são alvos contínuos de ataques hacker, sites estáticos são naturalmente imunes a esse tipo de vulnerabilidade.
- custo operacional é baixíssimo, porque possibilita a utilização de uma combinação de serviços da Amazon Web Services sem custo fixo mensal.
- flexibilidade nas fontes de dados, podendo utilizar um WordPress local para gerenciar o conteúdo, Contentful ou até mesmo arquivos markdown em repositórios git.
Como Criar um Website Básico em Gatsby
Para criar um website utilizando o GatsbyJS é muito simples, basta realizar a instalação do gatsby-cli, ferramenta de build do gatsby, utilizando o npm, conforme abaixo:
npm install -g gatsby-cli
Na sequência pode criar o projeto utilizando:
gatsby new gatsby-site
Esse comando criará um clone de um projeto gatsby a partir do modelo disponibilizado em https://github.com/gatsbyjs/gatsby-starter-default.git, depois execute o seguinte:
cd gatsby-site gatsby develop
Após a execução do gatsby develop o motor de build do gatsby no modo desenvolvimento será ativado e já poderá visualizar um site em gatsby básico acessando a url http://localhost:8000 verá uma imagem como abaixo:
Para realizar a disponibilização desse projeto na AWS, é necessário cumprir os seguintes requisitos:
- Ter uma conta na AWS (Amazon Web Services)
- Configurar um domínio usando o Amazon Route53
- Criar um certificado https gratuito usando AWS Certificate Manager
Após a realização desses passos, você poderá criar a solução da CloudDog para o gatsby, que irá provisionar toda a infraestrutura necessária para a execução do site.
Arquitetura GatsbyJS Básica
Ao criar uma instância da solução CloudDog, você estará criando um Stack do CloudFormation com os seguintes recursos:
- Distribuição do Amazon CloudFront configurada para resolver o /index.html de todas as urls do site, utilizando o Certificado HTTPS.
- Criação de um bucket para o conteúdo estático com uma policy para permitir a leitura apenas pela distribuição do Amazon CloudFront.
- Irá criar o registro de hostname no Route53 para apontar para a distribuição do Amazon CloudFront.
- Criação de Role e Lambda Edge utilizado na configuração da Distribuição.
No final o desenho da arquitetura fica conforme o desenho abaixo:
Provisionar a Solução com Stack do CloudFormation
Para provisionar a solução com Stack do CloudFormation você tem 2 opções:
Opção 1: provisionar clicando no link rápido
Pode iniciar a criação da solução acessando o link rápido Criar Gatsby Website, que irá direcionar para a página de criação, as informações deverão ser preenchidas de forma semelhante a Opção 2, logo a seguir, com a diferença é que todas informações estarão disponibilizadas na mesma tela.
Opção:2: provisionar o stack passo a passo
Para provisionar o stack, primeiro deve certificar-se de estar logado na conta da aws e com a região us-east-1 (Norte da Virgínia) selecionada. Depois busque pelo serviço CloudFormation no menu Serviços e selecionar a opção para criar o stack usando um template a partir do Amazon S3 Url, com o caminho https://s3.amazonaws.com/clouddog-solutions-us-east-1/infra/static-website/gatsbyjs/simple-template.yml, em seguida selecione Next.
Na sequência configure o Stack Name e os demais parâmetros com as informações:
- Stack Name: gatsby-site (ou qualquer outro nome desde que não tenha caracteres especiais)
- Hosted Zone Name: Id da sua hosted zone no Route53, no nosso exemplo consta o Id da Hosted Zone do domínio labs.clouddog.com.br (adapte para o seu).
- Website Host Name: nome completo do host em que a solução será disponibilizada, nesse caso deverá pertencer ao domínio, no exemplo gastby-website.labs.clouddog.com.br (adapte para o seu).
- CertificateArn: é o código ARN do certificado criado para o seu domínio.
Conforme abaixo:
Na sequência selecione a opção Next e na última tela certifique-se que ativou o checkbox do IAM conforme abaixo:
Em seguida irá aparecer a tela de criação do stack:
Ao final da criação do Stack será possível conferir todos os recursos provisionados pela solução:
Também será possível conferir algumas saídas desse Stack. Esses valores são importantes para que seja possível realizar a carga do site gatsby e acessar o site publicado.
Copie o StaticBucketName para que seja utilizado dentro do projeto no processo de deploy.
Carregar o Site no Bucket do S3
De volta no projeto execute o comando:
npm i gatsby-plugin-s3 --save-dev
Em seguida adicione a seguinte configuração no arquivo gatsby-config.js
Para facilitar os procedimentos de deployment, também poderá incluir o script no package.json conforme abaixo:
"scripts": { "build": "gatsby build", "develop": "gatsby develop", "format": "prettier --write "**/*.{js,jsx,ts,tsx,json,md}"", "start": "npm run develop", "serve": "gatsby serve", "clean": "gatsby clean", "test": "echo "Write tests! -> https://gatsby.dev/unit-testing" && exit 1", "deploy": "gatsby-plugin-s3 deploy --yes" },
Execute o comando para realizar o build do site já otimizando para ambiente de produção:
npm run build
Deverá ver uma saída parecida com abaixo:
Configure as credenciais de acesso da Amazon Web Services no seu terminal com seus dados:
AWS_ACCESS_KEY_ID=xxxx AWS_SECRET_ACCESS_KEY=xxxx
Em seguida execute o deploy:
npm run deploy
Validação da Solução
Após o deploy já poderá conferir o site na url disponibilizada após a criação do Stack no parâmetro AppHostUrl, que no nosso exemplo é o https://gatsby-site.labs.clouddog.com.br/.
Para certificar-se que deu tudo certo e a performance está dentro do esperado, pode abrir a ferramenta lighthouse dentro do Google Chrome e realizar a análise da página.
Resumo
Nesse post mostramos passo a passo como criar um projeto simples usando o GatsbyJS e como realizar a disponibilização do site em um Bucket do S3 e Amazon CloudFront, utilizando um template de AWS CloudFormation com todos os recursos pré-configurados.
