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 downloadda 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 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
Tarefa | Descrição | Habilidades necessárias |
---|---|---|
Clonar o repositório. | Execute o comando a seguir para clonar o repositório do aplicativo de amostra:
| Desenvolvedor de aplicativos, AWS DevOps |
Implante o aplicativo localmente. |
| Desenvolvedor de aplicativos, AWS DevOps |
Acesse o aplicativo localmente. | Abra uma janela do navegador e insira a | Desenvolvedor de aplicativos, AWS DevOps |
Tarefa | Descrição | Habilidades necessárias |
---|---|---|
Implante o AWS CloudFormation modelo. |
| Desenvolvedor de aplicativos, AWS DevOps |
Personalize os arquivos de origem do seu aplicativo. |
| Desenvolvedor de aplicativos |
Crie o pacote do aplicativo. | No diretório do projeto, execute o comando | Desenvolvedor de aplicativos |
Implemente o pacote do aplicativo. |
| Desenvolvedor de aplicativos, AWS DevOps |
Tarefa | Descrição | Habilidades necessárias |
---|---|---|
Acessar e testar o aplicativo. | Abra uma janela do navegador e cole o domínio de CloudFront distribuição (a | Desenvolvedor de aplicativos, AWS DevOps |
Tarefa | Descrição | Habilidades necessárias |
---|---|---|
Exclua os conteúdos do bucket do S3. |
| AWS DevOps, Desenvolvedor de aplicativos |
Exclua a AWS CloudFormation pilha. |
| 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.