Implante um aplicativo de página única baseado em React no Amazon S3 e no CloudFront - Recomendações da AWS
ResumoPré-requisitos e limitaçõesArquiteturaFerramentasPráticas recomendadasÉpicosRecursos relacionadosMais informações

Implante um aplicativo de página única baseado em React no Amazon S3 e no CloudFront

Jean-Baptiste Guillois, Amazon Web Services

Resumo

Um aplicativo de página única (SPA) é um site ou aplicativo da web que atualiza dinamicamente o conteúdo de uma página da web exibida usando APIs de JavaScript. Essa abordagem aprimora a experiência do usuário e o desempenho de um site porque atualiza apenas novos dados em vez de recarregar a página inteira do servidor.

Esse padrão fornece uma abordagem passo a passo para codificar e hospedar uma SPA escrita em React no Amazon Simple Storage Service (Amazon S3) e no Amazon CloudFront. Neste padrão, a SPA usa uma API REST configurada no Amazon API Gateway e exposta por meio de uma distribuição do Amazon CloudFront para simplificar o gerenciamento de compartilhamento de recursos entre origens (CORS).

Pré-requisitos e limitações

Pré-requisitos 

  • Uma Conta da AWS ativa.

  • Node.js e npm, instalado e configurado. Para obter mais informações, consulte a seção Fazer download da documentação de Node.js.

  • Yarn, instalado e configurado. Para obter mais informações, consulte a documentação do Yarn.

  • Git, instalado e configurado. Para obter mais informações, consulte a documentação do Git.

Arquitetura

Arquitetura para implantar uma SPA baseada em React no Amazon S3 e no CloudFront

Esta arquitetura é implantada automaticamente por meio do AWS CloudFormation (infraestrutura como código). Ela usa serviços regionais, como o Amazon S3 para armazenar os recursos estáticos e o Amazon CloudFront com o Amazon API Gateway para expor endpoints das API regionais (REST). Os logs do aplicativo são coletados usando o Amazon CloudWatch. Todas as chamadas de API da AWS são auditadas no AWS CloudTrail. Todas as configurações de segurança (por exemplo, identidades e permissões) são gerenciadas no AWS Identity and Access Management (IAM). O conteúdo estático é entregue pela rede de entrega de conteúdo (CDN) do Amazon CloudFront, e as consultas de DNS são gerenciadas pelo Amazon Route 53.

Ferramentas

Serviços da AWS

  • O Amazon API Gateway ajuda na criação, publicação, manutenção, monitoramento e proteção de REST HTTP e API de WebSocket em qualquer escala.

  • O AWS CloudFormation ajuda a configurar recursos da AWS, provisioná-los de forma rápida e consistente e gerenciá-los durante todo o ciclo de vida em todas as regiões e Contas da AWS.

  • O Amazon CloudFront acelera a distribuição do seu conteúdo web ao entregá-lo por meio de uma rede mundial de datacenters, o que reduz a latência e melhora o desempenho.

  • O AWS CloudTrail ajuda você a auditar a governança, a conformidade e os riscos operacionais da sua Conta da AWS.

  • O Amazon CloudWatch ajuda a monitorar, em tempo real, as métricas dos seus recursos da AWS e das aplicações que você executa na AWS.

  • OAWS Identity and Access Management (IAM) ajuda você a gerenciar com segurança o acesso aos seus recursos AWS controlando quem está autenticado e autorizado a usá-los.

  • O Amazon Route 53 é um serviço web de DNS altamente disponível e escalável.

  • O Amazon Simple Storage Service (Amazon S3) é um serviço de armazenamento de objetos baseado na nuvem que ajuda você a armazenar, proteger e recuperar qualquer quantidade de dados.

Código

O código de aplicativo de amostra desse padrão está disponível no repositório de aplicativos CORS de página única baseado em GitHub React.

Práticas recomendadas

Com o armazenamento de objetos do Amazon S3, você pode armazenar os ativos estáticos da sua aplicação de forma segura, altamente resiliente, eficiente em termos de performance e econômica. Não há necessidade de usar um contêiner dedicado ou uma instância do Amazon Elastic Compute Cloud (Amazon EC2) para essa tarefa.

Com o uso da rede de distribuição de conteúdo do Amazon CloudFront, é possível reduzir a latência que seus usuários podem enfrentar ao acessar sua aplicação. Você também pode anexar um firewall de aplicação web (AWS WAF) para proteger seus ativos contra ataques maliciosos.

Épicos

TarefaDescriçãoHabilidades necessárias

Clonar o repositório.

Execute o seguinte comando para clonar o repositório da aplicação de amostra:

git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
Desenvolvedor de aplicativos, AWS DevOps

Implante o aplicativo localmente.

  1. No diretório do projeto, execute o comando npm install para iniciar as dependências do aplicativo. 

  2. Execute o comando yarn dev para iniciar o aplicativo localmente. 

Desenvolvedor de aplicativos, AWS DevOps

Acesse o aplicativo localmente.

Abra uma janela do navegador e insira o URL http://localhost:3000 para acessar o aplicativo.

Desenvolvedor de aplicativos, AWS DevOps
TarefaDescriçãoHabilidades necessárias

Implante o modelo AWS CloudFormation.

  1. Faça login no Console de gerenciamento da AWS e, em seguida, abra o console do AWS CloudFormation.

  2. Selecione Criar pilha e Com novos recursos (padrão).

  3. Selecione Carregar um arquivo de modelo.

  4. Escolha Escolher arquivo, escolha o arquivo react-cors-spa-stack.yaml do repositório clonado e escolha Avançar.

  5. Insira um nome para a pilha e escolha Avançar.

  6. Mantenha as opções padrão, escolha Avançar.

  7. Verifique as configurações finais da pilha e, em seguida, selecione Criar pilha.

Desenvolvedor de aplicativos, AWS DevOps

Personalize os arquivos de origem do seu aplicativo.

  1. Depois que sua pilha for implantada, abra a guia Saída e identifique o nome do Bucket e o valor de APIDomain.

  2. Copie o domínio de distribuição do CloudFront para a API REST.

  3. Acesse <project_root>/src/pages/index.tsx e, em seguida, insira ou cole este domínio no valor da variável APIEndPoint na linha 13 do arquivo index.tsx.

Desenvolvedor de aplicativos

Crie o pacote do aplicativo.

No diretório do projeto, execute o comando yarn build para criar o pacote do aplicativo.

Desenvolvedor de aplicativos

Implemente o pacote do aplicativo.

  1. Abra o console Amazon S3.

  2. Identifique e escolha o bucket do S3 criado anteriormente pela pilha do CloudFormation.

  3. Selecione Fazer upload e clique em Adicionar arquivo.

  4. Selecione o conteúdo da sua pasta out.

  5. Escolha Adicionar pasta e, em seguida, selecione o diretório _next.

    Importante

    Selecione o diretório _next, e não o conteúdo.

  6. Escolha Fazer o upload para carregar os arquivos e o diretório em seu bucket do S3.

Desenvolvedor de aplicativos, AWS DevOps
TarefaDescriçãoHabilidades necessárias

Acessar e testar o aplicativo.

Abra uma janela do navegador e cole o domínio de distribuição do CloudFront (a saída SPADomain da pilha do CloudFormation que você implantou anteriormente) para acessar a aplicação.

Desenvolvedor de aplicativos, AWS DevOps
TarefaDescriçãoHabilidades necessárias

Exclua os conteúdos do bucket do S3.

  1. Abra o console do Amazon S3 e escolha o bucket que foi criado anteriormente pela pilha (o primeiro bucket cujo nome começa com react-cors-spa-). 

  2. Escolha Esvaziar para excluir o conteúdo do bucket.

  3. Escolha o segundo bucket que foi criado anteriormente pela pilha (o segundo bucket cujo nome começa com react-cors-spa- e termina com -logs).

  4. Escolha Esvaziar para excluir o conteúdo do bucket.

AWS DevOps, desenvolvedor de aplicativos

Exclua a pilha CloudFormation.

  1. Abra o console do CloudFormation e escolha a pilha que você criou anteriormente.

  2. Escolha Excluir para excluir a pilha e todos os recursos relacionados.

AWS DevOps, desenvolvedor de aplicativos

Recursos relacionados

Para implantar e hospedar sua aplicação web, você também pode usar o AWS Amplify Hosting, que fornece um fluxo de trabalho baseado em Git para hospedar aplicações web full-stack e com tecnologia sem servidor usando a implantação contínua. O Amplify Hosting faz parte do AWS Amplify, que disponibiliza um conjunto de ferramentas e recursos desenvolvidos especialmente para possibilitar que desenvolvedores de frontend para web e dispositivos móveis desenvolvam aplicações full-stack de forma rápida e fácil na AWS.

Mais informações

Para lidar com URLs inválidos que foram solicitados pelo usuário e podem gerar erros 403, uma página de erro personalizada configurada na distribuição do CloudFront captura esses erros 403 e os redireciona para o ponto de entrada da aplicação (index.html).

Com o objetivo de simplificar o gerenciamento de CORS, a API REST é disponibilizada por meio de uma distribuição do CloudFront.