Cómo implementar la aplicación React and Node en AWS: un mejor enfoque

En uno de mis blogs anteriores, Cómo implementar rápidamente la aplicación React and Node en AWS, expliqué cómo podemos implementar rápidamente nuestra aplicación de reacción, la aplicación de nodo y permitir que se comuniquen entre sí. Esencialmente, involucró los siguientes pasos:

  • Realice una compilación de producción de su aplicación Reaccionar
  • Coloque estos archivos manualmente en la carpeta pública de su servidor de nodo
  • Habilite node.js para servir archivos estáticos
  • Configure node.js, postgres en la instancia aws EC2
  • solicitud de reenvío al puerto 80 al servidor node.js

El flujo de trabajo anterior funciona si no tiene que implementarlo regularmente. Tenemos que realizar los siguientes pasos manualmente cada vez que ocurre un cambio en la aplicación Reaccionar

  • Aplicación de reacción de construcción
  • Copie los archivos de reacción a la carpeta pública node.js
  • Implemente la aplicación node.js

Veamos un diseño alternativo y automaticemos todo el proceso de implementación.

Nueva arquitectura

En este diseño, desacoplaríamos nuestra aplicación Node y la aplicación React. Introduciríamos nginx para facilitar la comunicación entre reaccionar y nodo.

Uso de nginx para servir código de reacción y actuar como un proxy inverso para el servidor de nodo

Nuevo flujo de trabajo

CI y CD para la aplicación reaccionarCI y CD para aplicación de nodo

Implementar aplicación de nodo

Esto está cubierto en mi publicación de blog: Cómo implementar la aplicación Node.js en AWS con GitLab

Implementar la aplicación React

Esto es muy similar, bastante más simple que la implementación de nodos, ya que no tenemos que ingresar a la instancia de AWS EC2.

Al igual que con la implementación de la aplicación de nodo, necesitamos configurar nuestro archivo .gitlab-ci.yml. Este archivo sería exactamente el mismo que el de la aplicación de nodo, excepto un cambio. Necesitamos construir nuestra aplicación reaccionar con npm run build en la línea 29

Ahora que tenemos la compilación de nuestra aplicación de reacción, necesitamos mover estos archivos a una carpeta desde donde nginx pueda leer. Todas las cosas serían similares a la implementación del nodo, excepto que copiaríamos los archivos con scp en lugar de ssh en la línea 34

Configurar Nginx

Ahora que tenemos el código de Node y React en nuestro cuadro de AWS, necesitamos un medio a través del cual puedan comunicarse entre ellos.

Instalemos Nginx en nuestra caja de Ubuntu

sudo apt-get install nginx

A continuación, edite la ubicación de la página predeterminada que servirá Nginx.

Edite este archivo / etc / nginx / sites-available / default y agregue la siguiente línea de código dentro del bloque del servidor

ubicación / {
 root / home / ubuntu / myFrontApp / dist;
 index index.html index.htm index.nginx-debian.html;
 }

Entonces, nuestra página predeterminada sería index.html en / home / ubuntu / myFrontApp / dist.

Suponga que la aplicación reaccionar realiza una solicitud al servidor de nodo con la ruta de la API. Algo así como http: // / api / user para obtener la lista de todos los usuarios. Por lo tanto, debemos asegurarnos de que todas las rutas con / api se redirijan al servidor de nodo.

En el archivo / etc / nginx / sites-available / default, agregaremos las siguientes líneas

ubicación / api / {
 proxy_pass http: // localhost: 8000 /;
 proxy_http_version 1.1;
 proxy_set_header Upgrade $ http_upgrade;
 proxy_set_header Conexión "actualizar";
 proxy_set_header Host $ host;
 proxy_cache_bypass $ http_upgrade;
 }

Entonces, todo el bloque se ve a continuación en el archivo nginx

servidor {
 escuchar 80 default_server;
 escuchar [::]: 80 default_server;
 ubicación / {
   root / home / ubuntu / hssfrontend / dist;
   index index.html index.htm index.nginx-debian.html;
        }
 nombre del servidor _;
ubicación / api / {
    proxy_pass http: // localhost: 8000 /;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $ http_upgrade;
    proxy_set_header Conexión 'actualizar';
    proxy_set_header Host $ host;
    proxy_cache_bypass $ http_upgrade;
 }
}

Guarde este archivo y reinicie el servidor nginx con sudo service nginx restart.

Una vez hecho esto, ¡estás listo para ir!

Si esta historia le pareció interesante o útil, apóyela aplaudiendo.