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

Criado por Jean-Baptiste Guillois (AWS)

Repositório de código: aplicativo CORS de página única baseado em React	Ambiente: produção	Tecnologias: sites e aplicativos da web; nativos de nuvem; tecnologia sem servidor
Workload: todas as outras workloads	Serviços da AWS: Amazon CloudFront; Amazon S3; Amazon API Gateway

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. 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 step-by-step abordagem para codificar e hospedar um SPA escrito em React no Amazon Simple Storage Service (Amazon S3) e na Amazon. CloudFront A SPA nesse padrão usa uma API REST que é exposta pelo Amazon API Gateway e também demonstra as melhores práticas para compartilhamento de recursos de origem cruzada (CORS).

Pré-requisitos e limitações

Pré-requisitos

• Uma conta AWS ativa

• Um ambiente de desenvolvimento integrado (IDE), como o AWS Cloud9.

• 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

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

Pilha de tecnologia

• Amazon API Gateway

• Amazon CloudFront

• Amazon Route 53

• Amazon S3

• IAM

• Amazon CloudWatch

• AWS CloudTrail

• AWS CloudFormation

Ferramentas

Serviços da AWS

• O Amazon API Gateway ajuda você a criar, publicar, manter, monitorar e proteger REST, HTTP e WebSocket APIs em qualquer escala.

• O AWS Cloud9 é um IDE que ajuda você a codificar, criar, executar, testar e depurar software. Ele também ajuda você a lançar software na nuvem AWS.

• CloudFormationA AWS ajuda você 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 contas e regiões da AWS.

• A Amazon CloudFront acelera a distribuição do seu conteúdo da web entregando-o por meio de uma rede mundial de data centers, o que reduz a latência e melhora o desempenho.

• CloudTrailA AWS ajuda você a auditar a governança, a conformidade e o risco operacional da sua conta da AWS.

• CloudWatchA Amazon ajuda você a monitorar as métricas dos seus recursos da AWS e dos aplicativos que você executa na AWS em tempo real.

• O AWS Identity and Access Management (IAM) ajuda você a gerenciar com segurança o acesso aos seus recursos da 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 de página única GitHub CORS baseado em React.

Épicos

Criar e implantar localmente o código do aplicativo

Tarefa	Descrição	Habilidades necessárias
Clonar o repositório.	Recomendamos usar o AWS Cloud9 como IDE para esse padrão, mas você também pode usar outro IDE (por exemplo, Visual Studio Code ou IntelliJ IDEA).  Execute o seguinte comando para clonar o repositório do aplicativo de amostra em seu IDE: 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.	No diretório do projeto, execute o comando npm install para iniciar as dependências do aplicativo.  Execute o comando yarn start 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

Implantar a aplicação

Tarefa	Descrição	Habilidades necessárias
Implante o CloudFormation modelo da AWS.	Faça login no Console de Gerenciamento da AWS e, em seguida, abra o CloudFormation console da AWS. Selecione Criar pilha e Com novos recursos (padrão). Selecione Carregar um arquivo de modelo. Escolha Escolher arquivo, escolha o arquivo react-cors-spa-stack.yaml do repositório clonado e escolha Avançar. Insira um nome para a pilha e escolha Avançar. Mantenha as opções padrão, escolha Avançar. 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.	Depois que sua pilha for implementada, abra a guia Saída e identifique o URL APIEndpoint, o nome Bucket e CFDistributionURL. Copie o URL do endpoint da API. Navegue até <project_root>/src/App.js e cole o URL no valor da variável APIEndPoint na linha 26 do arquivo App.js.	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.	Abra o console Amazon S3. Identifique e escolha o bucket do S3 criado anteriormente. Selecione Fazer upload e clique em Adicionar arquivo. Escolha o conteúdo da sua pasta de compilação. Escolha Adicionar pasta e depois escolha o diretório estático. Importante: não escolha o conteúdo; escolha o diretório. Escolha Fazer o upload para carregar os arquivos e o diretório em seu bucket do S3.	Desenvolvedor de aplicativos, AWS DevOps

Teste o aplicativo

Tarefa	Descrição	Habilidades necessárias
Acessar e testar o aplicativo.	Abra uma janela do navegador e cole a URL (a CFDistributionURL saída da CloudFormation pilha que você implantou anteriormente) para acessar o aplicativo.	Desenvolvedor de aplicativos, AWS DevOps

Limpe os recursos

Tarefa	Descrição	Habilidades necessárias
Exclua os conteúdos do bucket do S3.	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-).  Escolha Esvaziar para excluir o conteúdo do bucket. 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). Escolha Esvaziar para excluir o conteúdo do bucket.	AWS DevOps, desenvolvedor de aplicativos
Exclua a CloudFormation pilha da AWS.	Abra o CloudFormation console da AWS e escolha a pilha que você criou anteriormente. Escolha Excluir para excluir a pilha e todos os recursos relacionados.	AWS DevOps, desenvolvedor de aplicativos

Mais informações

Para implementar e hospedar seu aplicativo web, você também pode usar o AWS Amplify Hosting, que fornece um fluxo de trabalho baseado em Git para hospedar aplicativos web de pilha completa de tecnologia sem servidor com implantação contínua. O Amplify Hosting faz parte do AWS Amplify e é um conjunto de ferramentas e atributos desenvolvidos para fins específicos que permitem aos desenvolvedores web e móveis de frontend criarem aplicativos de pilha completa de forma rápida e fácil na AWS.