javascript - elastic - ¿Cómo implementar una aplicación React+NodeJS Express para AWS?

nodejs server aws (2)

1. Si tienes dos proyectos distintos

por ejemplo, una aplicación React de una sola página y una API Node / Express.

a. Puede implementar ambos por separado

la interfaz (la aplicación React) en S3 y CloudFront ( tutorial )
el back - end (la API del nodo) en Elastic Beanstalk (recomendado) o EC2

Otra opción es desplegar ambas partes al mismo tiempo en Elastic Beanstalk o EC2 . Sin embargo, perderá los beneficios de hospedarse en S3 y CloudFront, es decir, una entrega más rápida para sus usuarios y costos más económicos . En mi opinión, también es más conveniente y menos propenso a errores inesperados para actualizar e implementar por separado el lado del cliente y el lado del servidor de una aplicación web.

segundo. ¿Por qué S3 + CloudFront en lugar de S3 solo?

todos los beneficios de usar un CDN
su propio nombre de dominio y un certificado SSL gratuito en 1 clic
redirección a errores 4xx (necesario si su aplicación usa un enrutador basado en HTML5 History )
el sistema de almacenamiento en caché
http2 y http to https

do. Cómo manejar CORS?

Puede usar diferentes subdominios, por ejemplo

api.domain.com para la API
app.domain.com para la aplicación

Luego habilite CORS en la API:

app.get(''/api'', cors({ origin: ''https://app.domain.com'' }), ...)

2. Si tienes un solo proyecto

por ejemplo, una aplicación de nodo que incluye algunas vistas de React.

Tienes que implementar toda la aplicación en Elastic Beanstalk o EC2 .

Nota: Si tiene un solo proyecto que incluye dos subproyectos (es decir, una carpeta para la aplicación React y otro para la API Node), y si ambos subproyectos siguen funcionando cuando están separados, entonces puede desplegar el subproyecto proyectos por separado (ver la primera parte de la respuesta).

3. En ambos casos

Ejecute su compilación de Webpack antes de implementar la pieza React. Puede hacerlo manualmente (antes de implementar en AWS) o automáticamente (en su sistema de CI / CD ).

4. Avanzado / Solución de problemas

Si está creando una aplicación web progresiva sin conexión con un trabajador de servicios , deberá desactivar la memoria caché de su service-worker.js en S3, es decir, cache-control max-age=0 .

5. Herramientas

Official AWS S3 CLI - Administre los cubos S3 y los objetos utilizando los comandos aws s3 alto nivel.
CLI oficial de AWS Elastic Beanstalk : administre y despliegue su backend con los comandos de eb .
S3-deploy - Utilidad CLI para desplegar archivos en S3.

6. Si no está restringido a AWS

Respondí una pregunta relacionada no restringida a AWS.

Tengo una aplicación Reject + Webpack / Babel + Node / Express y deseo implementarla en AWS.

¿Tendría que implementar React y Node / Express por separado? ¿O podrían ser desplegados juntos a la vez?

Conceptos básicos

Para implementar su aplicación libre de problemas, necesita aprender sobre tres conceptos: microservicios, contenedores y administradores de procesos. Los discutiré con un poco más de detalles y algunos enlaces para que comiences:

Microservicios

Microservicios es una arquitectura que le permite dividir su aplicación en servicios más pequeños. Esto tiene múltiples beneficios: 1- Los servicios son fácilmente comprobables. 2- Los servicios son reemplazables. 3- Los servicios pueden escalarse por separado.

Containerización

Casi todas las aplicaciones útiles tienen al menos docenas de dependencias. Puede instalar dependencias en las máquinas de destino, pero seguramente enfrentará algunos desafíos. Los programas como Docker le permiten crear un contenedor para su aplicación e implementar ese contenedor en la nube. (Independientemente del proveedor de la nube) Aprender más ...

Administradores de procesos

Los gerentes de proceso se aseguran de que su aplicación funcione sin problemas y que todas las partes estén en buen estado. Si tu aplicación falla, puede reiniciar fácilmente la aplicación.

Despliegue de una aplicación NodeJS / React sin servidor

Nota: Este enfoque no funciona si está ejecutando el servidor con ReactJS. Ve a la siguiente opción.

Simplemente puede compilar su aplicación y desplegarla en un sitio web estático de S3. Esta opción funciona si usa la arquitectura de microservicios para separar su API de su aplicación de reacción.

Crear un sitio web estático en S3 es realmente simple:

Crea un cubo en S3 con el nombre exacto del sitio web. Ejemplo: blog..com.
Habilitar hosting estático
Cree un registro A en la Ruta 53 y conéctelo al cubo que creó.

Para obtener más información, consulte la documentation práctica de AWS.

Despliegue de una aplicación NodeJS en EC2

Puede iniciar diferentes instancias EC2 para cada microservicio. (API, aplicación React, etc.) Debe usar un administrador de procesos como PM2 para asegurarse de que su aplicación se ejecuta sin problemas.

Bonificación: use Sentry para el manejo de errores

Idealmente, debería tener pruebas unitarias para evitar el envío de código erróneo a la producción. Pero el mundo es imperfecto, y es bueno recibir cualquier posible error que ocurra en el cliente. Entra Sentry