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 *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. 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 para codificar e hospedar um SPA escrito em React no Amazon Simple Storage Service (Amazon S3) e na Amazon. CloudFront O SPA nesse padrão usa uma API REST que é configurada no Amazon API Gateway e exposta por meio de uma CloudFront distribuição da Amazon para simplificar o gerenciamento do [compartilhamento de recursos de origem cruzada (CORS).](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) ## 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](https://nodejs.org/en/download/) da documentação de Node.js. + Yarn, instalado e configurado. Para obter mais informações, consulte a [documentação do Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable). + Git, instalado e configurado. Para obter mais informações, consulte a [documentação do Git](https://github.com/git-guides/install-git). ## Arquitetura ![\[Arquitetura para implantar um SPA baseado em React no Amazon S3 e CloudFront\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/images/pattern-img/970a9d13-e8a2-44ac-aca5-a066e4be60e8/images/96061e05-8ac8-446e-b1da-baa6fc1cc7b6.png) 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 CloudFront com 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 AWS API são auditadas em 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 CloudFront conteúdo (CDN) da Amazon, e as consultas de DNS são tratadas pelo Amazon Route 53. ## Ferramentas **Serviços da AWS** + [O Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) ajuda você a criar, publicar, manter, monitorar e proteger REST, HTTP e WebSocket APIs em qualquer escala. + [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)ajuda 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](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) 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 CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)ajuda você a auditar a governança, a conformidade e o risco operacional do seu Conta da AWS. + CloudWatchA [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) 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)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) 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](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) é um serviço web de DNS altamente disponível e escalável. + O [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) é 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](https://github.com/aws-samples/react-cors-spa). ## 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. 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 anexar um firewall de aplicação web ([AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) para proteger seus ativos contra ataques maliciosos. ## Épicos ### Criar e implantar localmente o código do aplicativo | Tarefa | Description | Habilidades 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. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | 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 | Description | Habilidades necessárias | | --- | --- | --- | | Implante o AWS CloudFormation modelo. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desenvolvedor de aplicativos, AWS DevOps | | Personalize os arquivos de origem do seu aplicativo. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | 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. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desenvolvedor de aplicativos, AWS DevOps | ### Teste a aplicação | Tarefa | Description | Habilidades 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 | ### Limpe os recursos | Tarefa | Description | Habilidades necessárias | | --- | --- | --- | | Exclua os conteúdos do bucket do S3. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, desenvolvedor de aplicativos | | Exclua a CloudFormation pilha. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/pt_br/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, desenvolvedor de aplicativos | ## Recursos relacionados Para implantar e hospedar sua aplicação web, você também pode usar o [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html), 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](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html), 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 do CORS, a API REST é exposta por meio de uma CloudFront distribuição.