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

As traduções são geradas por tradução automática. Em caso de conflito entre o conteúdo da tradução e da versão original em inglês, a versão em inglês prevalecerá.

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 de página única baseado em React CORS

Ambiente: produção

Tecnologias: aplicativos web e móveis; sem servidor

Workload: todas as outras workloads

AWSserviços: Amazon API Gateway; Amazon CloudFront

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. JavaScript APIs 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 de codificação e hospedagem escrita em React no Amazon Simple Storage Service (Amazon S3) e na Amazon. SPA CloudFront SPANesse padrão, usa um REST API que é configurado no Amazon API Gateway e exposto por meio de uma CloudFront distribuição da Amazon para simplificar o gerenciamento do compartilhamento de recursos (CORS) entre origens.

Pré-requisitos e limitações

Pré-requisitos

  • Um ativo Conta da AWS.

  • 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 um produto baseado em React no Amazon S3 SPA e CloudFront

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

Ferramentas

AWSserviços

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

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

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

  • AWS CloudTrailajuda você a auditar a governança, a conformidade e o risco operacional do seu Conta da AWS.

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

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

  • O Amazon Route 53 é um serviço DNS web 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 CORSúnica GitHub baseado em React.

Práticas recomendadas

Ao usar o armazenamento de objetos do Amazon S3, você pode armazenar os ativos estáticos do seu aplicativo de forma segura, altamente resiliente, eficiente e econômica. Não há necessidade de usar um contêiner dedicado ou uma instância do Amazon Elastic Compute Cloud (AmazonEC2) para essa tarefa.

Ao usar a rede de distribuição de CloudFront conteúdo da Amazon, você pode reduzir a latência que seus usuários podem experimentar ao acessar seu aplicativo. Você também pode conectar um firewall de aplicativo da web (AWS WAF) para proteger seus ativos contra ataques maliciosos.

Épicos

TarefaDescriçãoHabilidades necessárias

Clonar o repositório.

Execute o comando a seguir para clonar o repositório do aplicativo 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 a http://localhost:3000 URL para acessar o aplicativo.

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

Implante o AWS CloudFormation modelo.

  1. Faça login no e AWS Management Console, em seguida, abra o AWS CloudFormation console.

  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 Bucket nome e APIDomain o valor.

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

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

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 S3 que foi criado anteriormente pela CloudFormation pilha.

  3. Selecione Fazer upload e clique em Adicionar arquivo.

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

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

    Importante: escolha o _next diretório, 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 CloudFront distribuição (a SPADomain saída da CloudFormation pilha que você implantou anteriormente) para acessar o aplicativo.

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 AWS CloudFormation pilha.

  1. Abra o AWS CloudFormation console 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 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 completos e sem servidor com implantação contínua. O Amplify Hosting faz parte do AWS Amplify, que fornece um conjunto de ferramentas e recursos específicos que permitem que desenvolvedores front-end web e móveis criem aplicativos completos de forma rápida e fácil. AWS

Mais informações

Para lidar com URLs solicitações inválidas pelo usuário que podem gerar erros 403, uma página de erro personalizada configurada na CloudFront distribuição captura erros 403 e os redireciona para o ponto de entrada do aplicativo (). index.html

Para simplificar o gerenciamento doCORS, o REST API é exposto por meio de uma CloudFront distribuição.