Como Disponibilizar um Site em GatsbyJS na Amazon Web Services

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:

1. Ter uma conta na AWS (Amazon Web Services)

2. Configurar um domínio usando o Amazon Route53

3. 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:

1. Distribuição do Amazon CloudFront configurada para resolver o /index.html de todas as urls do site, utilizando o Certificado HTTPS.

2. 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.

3. Irá criar o registro de hostname no Route53 para apontar para a distribuição do Amazon CloudFront.

4. 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.