Como Disponibilizar um Site em GatsbyJS na Amazon Web Services
Por Alessandro Oliveira, Criado em 09/07/2020 03:00
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.
Tags
#alta-performance #aws #arquitetura #gatsby #cloudfront #s3 #desenvolvimento #pwa #cloudformation #amazon web servicesSobre o autor
Comentários
Outros Posts
Confira os últimos posts do nosso blog.
Entre em Contato
Fale conosco e saiba como poderemos ajudar a sua empresa.