Implemente una aplicación de una sola página basada en React en Amazon S3 y CloudFront - Recomendaciones de AWS
ResumenRequisitos previos y limitacionesArquitecturaTools (Herramientas)Prá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

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

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 SPA basado en React en Amazon 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 de la API regional (REST). Los registros de la aplicación se recopilan mediante 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 le ayuda a crear, publicar, mantener, supervisar y proteger REST, HTTP y WebSocket APIs a cualquier escala.

  • AWS CloudFormationle 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 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 administrar de forma segura el acceso a sus AWS recursos al controlar quién está autenticado y autorizado a usarlos.

  • Amazon Route 53 es un servicio web de sistema de nombres de dominio (DNS) escalable y de alta disponibilidad.

  • Amazon Simple Storage Service (Amazon S3) 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.

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

  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 URL http://localhost:3000 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 Consola de administración de AWS, 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, abra la pestaña Salida e identifique el nombre de Bucket y el valor de APIDomain.

  2. Copie el dominio CloudFront de distribución de la API REST.

  3. Navegue hasta la URL <project_root>/src/pages/index.tsx y, a continuación, inserte o pegue este dominio en el valor de la variable APIEndPoint en la línea 13 del archivo index.tsx.

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 su carpeta de out.

  5. Elija Añadir carpeta y, a continuación, elija el directorio _next.

    importante

    Elija el directorio _next, 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 de Amazon S3 y elija el bucket que creó anteriormente con la pila (el primer bucket cuyo nombre comience por react-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

Elimine la CloudFormation pila.

  1. Abra la consola de CloudFormation y elija la pila que creó 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 utilizar AWS Amplify Hosting, 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, 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.