Como Disponibilizar um Site em GatsbyJS na Amazon Web Services

Botao voltar
Banner da página de Blog.
Banner da página de Blog.

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:

Passo 1: Visualização do Site em Gatsby
Passo 1: Visualização do Site em Gatsby

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:

Diagrama: Arquitetura de Solução para o GatsbyJS na AWS
Diagrama: Arquitetura de Solução para o GatsbyJS na AWS

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.

Passo 1: Criação do Stack Usando o Template do S3
Passo 1: Criação do Stack Usando o Template do S3

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:

Passo 2: Configure os Parâmetros
Passo 2: Configure os Parâmetros

Na sequência selecione a opção Next e na última tela certifique-se que ativou o checkbox do IAM conforme abaixo:

Passo 3: Permitir criação de recursos no IAM
Passo 3: Permitir criação de recursos no IAM

Em seguida irá aparecer a tela de criação do stack:

Passo 4: Aguardar a criação do Stack
Passo 4: Aguardar a criação do Stack

Ao final da criação do Stack será possível conferir todos os recursos provisionados pela solução:

Passo 5: Visualização dos Recursos Criados
Passo 5: Visualização dos Recursos Criados

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.

Passo 6: Outputs do Stack do Gatsby
Passo 6: Outputs do Stack do Gatsby

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:

Passo 1: Build do Projeto para Produção
Passo 1: Build do Projeto para Produção

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

Passo 2: Realização do Deploy
Passo 2: Realização do 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.

Análise de Performance: Google Lighthouse
Análise de Performance: Google Lighthouse

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 services

Sobre o autor

Foto Do Autor.
Foto Do Autor.

Alessandro Oliveira

É fundador da CloudDog, entusiasta na adoção de nuvem desde 2010, AWS Certified Solutions Architect ha mais de 7 anos, realiza projetos com características desafiadoras há mais de 20 anos em diversos segmentos, como varejo, indústria, saúde e serviços.

Comentários

Confira nossas novidades