Como Disponibilizar um Site em GatsbyJS na Amazon Web Services

Botao voltar

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:

Como Disponibilizar um Site em GatsbyJS na Amazon Web Services - 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:

Como Disponibilizar um Site em GatsbyJS na Amazon Web Services - 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.

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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:

 Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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:

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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:

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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:

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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.

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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:

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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.

Como Disponibilizar  um site em GatsbyJS na Amazon Web Services - 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

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

BLOG

CONFIRA AS NOSSAS

NOVIDADES

Como Criar um Amazon WorkSpaces Application Manager

Viabilize o trabalho em home office de sua equipe disponibilizando aplicações legadas de forma segura, gerenciada e sob demanda.

Como Criar um Amazon Workspace

Descubra como provisionar Amazon WorkSpaces e permitir que a sua equipe remota trabalhe de forma eficiente utilizando os recursos da empresa na nuvem

Como Enviar um Aplicativo para o Application Manager

Disponibilize o sistema interno da sua empresa para seus funcionários de forma simples e segura através do Amazon WorkSpaces.

O que é AWS Personalize?

O AWS Personalize é um serviço de machine learning que oferece recomendações individualizadas aos clientes com base no comportamento do usuário em tempo real.

Criando um Workspace Bundle

Mantenha seu ambiente padronizado e realize a automação na entrega de Workspaces utilizando a criação de Imagens e Bundles.

Serviço da Amazon consegue parar o maior ataque DDoS da história

Ataque aconteceu em fevereiro deste ano e conseguiu gerar um tráfego de 2,3 Terabits por segundo. Nome da vítima não foi informado

Como Configurar um AWS Client VPN

Aprenda passo a passo como configurar uma VPN para seus usuários acessarem com segurança os recursos em nuvem da sua empresa

Introdução ao AWS CloudFormation

Aprenda a utilizar o AWS CloudFormation, um serviço fundamental para automação de fluxos de entrega contínua e ambientes padronizados.

Provas de Certificação AWS Online

Tire a sua certificação AWS sem sair de casa. Agora todos os exames de certificação da AWS poderão ser realizado online via Pearson VUE.

fale conosco

Queremos realizar os projetos da sua empresa!

Fale conosco e saiba como poderemos ajudar a sua empresa a reduzir custos na nuvem AWS

+ 55 11 97329-9834contato@clouddog.com.br
Icone de Whatsapp