Cómo instalar ReactJS con proxy Nginx en CentOS 8

React es una biblioteca de JavaScript gratuita y de código abierto desarrollada por Facebook. Se utiliza para crear componentes de interfaz de usuario y frontend web. A menudo se utiliza para desarrollar aplicaciones web o aplicaciones móviles. Permite a los desarrolladores crear componentes reutilizables que son independientes entre sí. Se puede usar con otras bibliotecas, incluyendo Axios, JQuery AJAX o la función incorporada window.fetch del navegador.

En esta publicación, te mostraremos cómo instalar React JS en CentOS 8

Prerequisitos

• Un servidor que ejecute CentOS 8.
• Un nombre de dominio válido apuntado a la IP de tu servidor.
• Una contraseña de root configurada en el servidor.

Comenzando

Antes de comenzar, necesitarás actualizar los paquetes de tu sistema a la última versión. Puedes actualizarlos ejecutando el siguiente comando:

dnf update -y

Una vez que todos los paquetes estén actualizados, instala otras dependencias requeridas con el siguiente comando:

dnf install gcc-c++ make curl -y

Una vez que hayas terminado de instalar las dependencias requeridas, puedes proceder al siguiente paso.

Instalar NPM y Node.js

A continuación, necesitarás instalar Node.js y NPM en tu sistema. NPM, también llamado gestor de paquetes, es una herramienta de línea de comandos utilizada para interactuar con paquetes de Javascript. Por defecto, la última versión de NPM y Node.js no está incluida en el repositorio predeterminado de CentOS. Así que necesitarás agregar el repositorio de origen de Node a tu sistema. Puedes agregarlo con el siguiente comando:

curl -sL https://rpm.nodesource.com/setup_14.x | bash -

Una vez que se haya agregado el repositorio, instala Node.js y NPM con el siguiente comando:

dnf install nodejs -y

Una vez que la instalación esté completa, verifica la versión de Node.js ejecutando el siguiente comando:

node -v

Deberías obtener la siguiente salida:

v14.16.0

También puedes verificar la versión de NPM ejecutando el siguiente comando:

npm -v

Deberías obtener la siguiente salida:

6.14.11

En este punto, NPM y Node.js están instalados en tu sistema. Ahora puedes proceder a instalar Reactjs.

Instalar Reactjs

Antes de comenzar, necesitarás instalar create-react-app en tu sistema. Es una utilidad de línea de comandos utilizada para crear una aplicación React.

Puedes instalarlo usando NPM como se muestra a continuación:

npm install -g create-react-app

Una vez instalado, verifica la versión instalada de create-react-app usando el siguiente comando:

create-react-app --version

Deberías ver la siguiente salida:

4.0.3

A continuación, crea tu primera aplicación Reactjs con el siguiente comando:

create-react-app myapp

Deberías ver la siguiente salida:

¡Éxito! Creado myapp en /root/myapp
Dentro de ese directorio, puedes ejecutar varios comandos:

  npm start
    Inicia el servidor de desarrollo.

  npm run build
    Agrupa la aplicación en archivos estáticos para producción.

  npm test
    Inicia el ejecutor de pruebas.

  npm run eject
    Elimina esta herramienta y copia las dependencias de construcción, archivos de configuración
    y scripts en el directorio de la aplicación. Si haces esto, ¡no puedes volver atrás!

Te sugerimos que comiences escribiendo:

  cd myapp
  npm start

A continuación, cambia el directorio a myapp y comienza la aplicación con el siguiente comando:

cd myapp  
npm start

Una vez que la aplicación se haya iniciado correctamente, deberías obtener la siguiente salida:

¡Compilado con éxito!

Ahora puedes ver myapp en el navegador.

  http://localhost:3000

Ten en cuenta que la construcción de desarrollo no está optimizada.
Para crear una construcción de producción, usa npm run build.

Ahora, presiona CTRL+C para detener la aplicación. Ahora puedes proceder al siguiente paso.

Crear un archivo de servicio Systemd para Reactjs

A continuación, es una buena idea crear un archivo de servicio systemd para gestionar el servicio Reactjs. Puedes crearlo con el siguiente comando:

nano /lib/systemd/system/react.service

Agrega las siguientes líneas:

[Unit]
After=network.target

[Service]
Type=simple
User=root
WorkingDirectory=/root/myapp
ExecStart=/usr/bin/npm start
Restart=on-failure

[Install]
WantedBy=multi-user.target

Guarda y cierra el archivo, luego recarga el daemon de systemd con el siguiente comando:

systemctl daemon-reload

A continuación, inicia el servicio Reactjs y habilítalo para que se inicie al reiniciar el sistema con el siguiente comando:

systemctl start react  
systemctl enable react

A continuación, verifica el estado de la aplicación Reactjs con el siguiente comando:

systemctl status react

Deberías obtener la siguiente salida:

? react.service
   Cargado: cargado (/usr/lib/systemd/system/react.service; deshabilitado; preset del proveedor: deshabilitado)
   Activo: activo (ejecutándose) desde mar 2021-03-23 02:52:32 EDT; hace 6s
 PID principal: 2191 (node)
    Tareas: 29 (límite: 12524)
   Memoria: 220.3M
   CGroup: /system.slice/react.service
           ??2191 npm
           ??2202 node /root/myapp/node_modules/.bin/react-scripts start
           ??2209 /usr/bin/node /root/myapp/node_modules/react-scripts/scripts/start.js

Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: El proyecto se está ejecutando en http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: la salida de webpack se sirve desde
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: El contenido que no proviene de webpack se sirve desde /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s volverán a / 
Mar 23 02:52:34 centos8 npm[2191]: Iniciando el servidor de desarrollo...
Mar 23 02:52:37 centos8 npm[2191]: ¡Compilado con éxito!
Mar 23 02:52:37 centos8 npm[2191]: Ahora puedes ver myapp en el navegador.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Ten en cuenta que la construcción de desarrollo no está optimizada.
Mar 23 02:52:37 centos8 npm[2191]: Para crear una construcción de producción, usa npm run build.

En este punto, Reactjs está iniciado y escuchando en el puerto 3000. Puedes verificarlo con el siguiente comando:

ss -antpl | grep 3000

Deberías obtener la siguiente salida:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:((