Las traducciones son generadas a través de traducción automática. En caso de conflicto entre la traducción y la version original de inglés, prevalecerá la version en inglés. # Implemente una aplicación de una sola página basada en React en Amazon S3 y CloudFront *Jean-Baptiste Guillois, Amazon Web Services* ## Resumen Una aplicación de una sola página (SPA) es un sitio web o una aplicación web que actualiza dinámicamente el contenido de una página web mostrada mediante el uso de. JavaScript APIs Este enfoque mejora la experiencia del usuario y el rendimiento de un sitio web porque solo actualiza los datos nuevos en lugar de volver a cargar toda la página web desde el servidor. Este patrón proporciona un step-by-step enfoque para codificar y alojar un SPA escrito en React en Amazon Simple Storage Service (Amazon S3) y Amazon. CloudFront El SPA de este patrón usa una API REST que está configurada en Amazon API Gateway y expuesta a través de una CloudFront distribución de Amazon para simplificar la administración del [intercambio de recursos entre orígenes (CORS).](https://docs.aws.amazon.com/AmazonS3/latest/userguide/cors.html) ## Requisitos previos y limitaciones **Requisitos previos ** + Un activo. Cuenta de AWS + Node.js y `npm`, instalados y configurados. Para obtener más información, consulte la sección [Descargas](https://nodejs.org/en/download/) de la documentación de Node.js. + Yarm, instalado y configurado. Para obtener más información, consulte la [documentación de Yarn](https://classic.yarnpkg.com/lang/en/docs/install/#windows-stable). + Git, instalado y configurado. Para obtener más información, consulte la [documentation de Git](https://github.com/git-guides/install-git). ## Arquitectura ![\[Arquitectura para implementar un SPA basado en React en Amazon S3 y CloudFront\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/images/pattern-img/970a9d13-e8a2-44ac-aca5-a066e4be60e8/images/96061e05-8ac8-446e-b1da-baa6fc1cc7b6.png) Esta arquitectura se implementa automáticamente mediante el uso de AWS CloudFormation (infraestructura como código). Utiliza servicios regionales como Amazon S3 para almacenar los activos estáticos y Amazon CloudFront con Amazon API Gateway para exponer los puntos de enlace de la API regional (REST). Los registros de la aplicación se recopilan a través de Amazon CloudWatch. Todas las llamadas a la AWS API se auditan. AWS CloudTrail Toda la configuración de seguridad (por ejemplo, las identidades y los permisos) se gestiona en AWS Identity and Access Management (IAM). El contenido estático se entrega a través de la red de entrega de CloudFront contenido (CDN) de Amazon y Amazon Route 53 gestiona las consultas de DNS. ## Tools (Herramientas) **Servicios de AWS** + [Amazon API Gateway](https://docs.aws.amazon.com/apigateway/latest/developerguide/welcome.html) le ayuda a crear, publicar, mantener, supervisar y proteger REST, HTTP y WebSocket APIs a cualquier escala. + [AWS CloudFormation](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/Welcome.html)le ayuda a configurar AWS los recursos, aprovisionarlos de forma rápida y coherente y gestionarlos durante todo su ciclo de vida en todas Cuentas de AWS las regiones. + [Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Introduction.html) acelera la distribución de tu contenido web al distribuirlo a través de una red mundial de centros de datos, lo que reduce la latencia y mejora el rendimiento. + [AWS CloudTrail](https://docs.aws.amazon.com/awscloudtrail/latest/userguide/cloudtrail-user-guide.html)le ayuda a auditar la gobernanza, el cumplimiento y el riesgo operativo de su empresa Cuenta de AWS. + [Amazon](https://docs.aws.amazon.com/AmazonCloudWatch/latest/monitoring/WhatIsCloudWatch.html) le CloudWatch ayuda a supervisar las métricas de sus AWS recursos y las aplicaciones en las que se ejecuta AWS en tiempo real. + [AWS Identity and Access Management (IAM)](https://docs.aws.amazon.com/IAM/latest/UserGuide/introduction.html) le ayuda a administrar de forma segura el acceso a sus AWS recursos al controlar quién está autenticado y autorizado a usarlos. + [Amazon Route 53](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/) es un servicio web de sistema de nombres de dominio (DNS) escalable y de alta disponibilidad. + [Amazon Simple Storage Service (Amazon S3)](https://docs.aws.amazon.com/AmazonS3/latest/userguide/) es un servicio de almacenamiento de objetos basado en la nube que lo ayuda a almacenar, proteger y recuperar cualquier cantidad de datos. **Código** El código de aplicación de muestra de este patrón está disponible en el repositorio de aplicaciones de una sola página GitHub [CORS basado en React](https://github.com/aws-samples/react-cors-spa). ## Prácticas recomendadas Al utilizar el almacenamiento de objetos Amazon S3, puede almacenar los activos estáticos de su aplicación de forma segura, altamente resiliente, eficaz y rentable. No es necesario utilizar un contenedor dedicado ni una instancia de Amazon Elastic Compute Cloud (Amazon EC2) para esta tarea. Al utilizar la red de entrega de CloudFront contenido de Amazon, puedes reducir la latencia que pueden experimentar los usuarios cuando acceden a tu aplicación. También puede conectar un firewall de aplicaciones web ([AWS WAF](https://docs.aws.amazon.com/waf/latest/developerguide/cloudfront-features.html)) para proteger sus activos de ataques malintencionados. ## Epics ### Cree e implemente la aplicación de forma local | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Clonar el repositorio. | Ejecute el siguiente comando para clonar el repositorio de la aplicación de ejemplo:
git clone https://github.com/aws-samples/react-cors-spa react-cors-spa && cd react-cors-spa
| Desarrollador de aplicaciones, AWS DevOps | | Implemente la aplicación de forma local. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desarrollador de aplicaciones, AWS DevOps | | Acceda a la aplicación de forma local. | Abra una ventana del navegador e introduzca la URL `http://localhost:3000` para acceder a la aplicación. | Desarrollador de aplicaciones, AWS DevOps | ### Implemente de la aplicación | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Implemente la AWS CloudFormation plantilla. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desarrollador de aplicaciones, AWS DevOps | | Personalice los archivos de origen de su aplicación. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desarrollador de aplicaciones | | Cree el paquete de aplicación. | En el directorio del proyecto, ejecute el comando `yarn build` para crear el paquete de aplicación. | Desarrollador de aplicaciones | | Implemente el paquete de aplicación. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | Desarrollador de aplicaciones, AWS DevOps | ### Pruebe la aplicación | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Acceda y pruebe la aplicación. | Abra una ventana del navegador y, a continuación, pegue el dominio de CloudFront distribución (el `SPADomain` resultado de la CloudFormation pila que implementó anteriormente) para acceder a la aplicación. | Desarrollador de aplicaciones, AWS DevOps | ### Limpie los recursos | Tarea | Descripción | Habilidades requeridas | | --- | --- | --- | | Elimine el contenido del bucket de S3. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, desarrollador de aplicaciones | | Elimine la CloudFormation pila. | [\[See the AWS documentation website for more details\]](http://docs.aws.amazon.com/es_es/prescriptive-guidance/latest/patterns/deploy-a-react-based-single-page-application-to-amazon-s3-and-cloudfront.html) | AWS DevOps, desarrollador de aplicaciones | ## Recursos relacionados Para implementar y alojar su aplicación web, también puede utilizar [AWS Amplify Hosting](https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html), que proporciona un flujo de trabajo basado en Git para alojar aplicaciones web sin servidor y full stack con implementación continua. Amplify Hosting forma parte de [AWS Amplify](https://docs.aws.amazon.com/amplify/latest/userguide/welcome.html), que proporciona un conjunto de herramientas y funciones especialmente diseñadas que permiten a los desarrolladores frontend, web y móvil crear aplicaciones completas de forma rápida y sencilla. AWS ## Información adicional Para gestionar las solicitudes URLs no válidas del usuario que puedan generar 403 errores, una página de errores personalizada configurada en la CloudFront distribución detecta 403 errores y los redirige al punto de entrada de la aplicación (). `index.html` Para simplificar la administración de CORS, la API REST se expone a través de una CloudFront distribución.