Implemente una aplicación de una sola página basada en React en Amazon S3 y CloudFront - Recomendaciones de AWS
ResumenRequisitos previos y limitacionesArquitecturaHerramientasPrácticas recomendadasEpicsRecursos relacionadosInformación adicional

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

Creado por Jean-Baptiste Guillois () AWS

Repositorio de código: aplicación de una sola página basada en React CORS

Entorno: producción

Tecnologías: aplicaciones web y móviles; sin servidor

Carga de trabajo: todas las demás cargas de trabajo

AWSservicios: Amazon API Gateway; Amazon CloudFront

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 JavaScript APIs el uso de. 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 de codificación y alojamiento SPA que está escrito en React en Amazon (Simple Storage Service (Amazon S3) y Amazon. CloudFront SPAEn este patrón, se utiliza una REST API 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 (CORS) entre orígenes.

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 de la documentación de Node.js.

  • Yarm, instalado y configurado. Para obtener más información, consulte la documentación de Yarn.

  • Git, instalado y configurado. Para obtener más información, consulte la documentation de Git.

Arquitectura

Arquitectura para implementar un sistema basado en React en Amazon SPA S3 y CloudFront

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 Regionales API (REST). Los registros de la aplicación se recopilan a través de Amazon CloudWatch. Todas las AWS API llamadas se auditan. AWS CloudTrail Toda la configuración de seguridad (por ejemplo, las identidades y los permisos) se administra en AWS Identity and Access Management (IAM). El contenido estático se entrega a través de la red de entrega de CloudFront contenido de Amazon (CDN) y Amazon Route 53 gestiona DNS las consultas.

Herramientas

AWSservicios

  • Amazon API Gateway le ayuda a crear, publicar, mantener, supervisar y proteger RESTHTTP, y WebSocket APIs a cualquier escala.

  • AWS CloudFormationle ayuda a configurar AWS los recursos, aprovisionarlos de forma rápida y coherente y administrarlos a lo largo de su ciclo de vida en todas Cuentas de AWS las regiones.

  • Amazon CloudFront 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 CloudTraille ayuda a auditar la gobernanza, el cumplimiento y el riesgo operativo de su empresa Cuenta de AWS.

  • Amazon 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) le ayuda a gestionar de forma segura el acceso a sus AWS recursos al controlar quién está autenticado y autorizado a utilizarlos.

  • Amazon Route 53 es un servicio DNS web escalable y de alta disponibilidad.

  • Amazon Simple Storage Service (Amazon S3) es un servicio de almacenamiento de objetos basado en la nube que le 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 CORSuna sola página GitHub basado en React.

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 (AmazonEC2) 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) para proteger sus activos de ataques malintencionados.

Epics

TareaDescripciónHabilidades requeridas

Clonar el repositorio.

Ejecute el siguiente comando para clonar el repositorio de la aplicación de muestra:

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.

  1. En el directorio del proyecto, ejecute el comando npm install para iniciar las dependencias de la aplicación. 

  2. Ejecute el comando yarn dev para iniciar la aplicación localmente. 

Desarrollador de aplicaciones, AWS DevOps

Acceda a la aplicación de forma local.

Abra una ventana del navegador e introduzca la http://localhost:3000 URL para acceder a la aplicación.

Desarrollador de aplicaciones, AWS DevOps
TareaDescripciónHabilidades requeridas

Implemente la AWS CloudFormation plantilla.

  1. Inicie sesión en la AWS CloudFormation consola y AWS Management Console, a continuación, ábrala.

  2. Elija Create stack (Crear pila), y, a continuación, elija With new resources (standard) (Con nuevos recursos [estándar]).

  3. Elija Upload a template file (Cargar un archivo de plantilla).

  4. Elija Choose file (Elegir archivo), elija el archivo react-cors-spa-stack.yaml del repositorio clonado y, a continuación, elija Next (Siguiente).

  5. Escriba un nombre para la pila y después elija Next (Siguiente).

  6. Conserve todas las opciones predeterminadas, y luego elija Next (Siguiente).

  7. Revise la configuración final de su pila, y luego seleccione Create stack (Crear pila).

Desarrollador de aplicaciones, AWS DevOps

Personalice los archivos de origen de su aplicación.

  1. Una vez implementada la pila, abre la pestaña Resultados e identifica el Bucket nombre y el APIDomain valor.

  2. Copie el dominio de CloudFront distribución de RESTAPI.

  3. Navegue hasta <project_root>/src/pages/index.tsx este dominio e insértelo o péguelo en el valor de la APIEndPoint variable de la línea 13 del index.tsx archivo.

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.

  1. Abra la consola de Amazon S3.

  2. Identifique y elija el depósito de S3 que creó anteriormente la CloudFormation pila.

  3. Elija Upload (Cargar) y, a continuación, Add files (Añadir archivos).

  4. Elija el contenido de la out carpeta.

  5. Selecciona Añadir carpeta y, a continuación, elige el _next directorio.

    Importante: elija el _next directorio, no el contenido.

  6. Elija Upload (Cargar) para cargar los archivos y el directorio a su bucket de S3.

Desarrollador de aplicaciones, AWS DevOps
TareaDescripciónHabilidades 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
TareaDescripciónHabilidades requeridas

Elimine el contenido del bucket de S3.

  1. Abra la consola Amazon S3 y elija el depósito que creó anteriormente la pila (el primer depósito cuyo nombre comience porreact-cors-spa-). 

  2. Seleccione Empty (Vaciar) para eliminar el contenido del bucket.

  3. Abra el segundo bucket que creó anteriormente con la pila (el segundo bucket cuyo nombre comience por react-cors-spa- y termine por -logs).

  4. Seleccione Empty (Vaciar) para eliminar el contenido del bucket.

AWS DevOps, desarrollador de aplicaciones

Elimina la AWS CloudFormation pila.

  1. Abre la AWS CloudFormation consola y elige la pila que creaste anteriormente.

  2. Elija Delete (Eliminar) para eliminar la pila y todos los recursos relacionados.

AWS DevOps, desarrollador de aplicaciones

Recursos relacionados

Para implementar y alojar su aplicación web, también puede usar AWS Amplify Hosting, que proporciona un flujo de trabajo basado en Git para alojar aplicaciones web completas y sin servidor con implementación continua. Amplify Hosting forma parte de AWS Amplify, 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 gestiónCORS, REST API se expone a través de una CloudFront distribución.