HowtoForge

Tutoriales de Linux

Cómo instalar ReactJS con el proxy Nginx en CentOS 8

React es una biblioteca JavaScript gratuita y de código abierto desarrollada por Facebook. Se utiliza para crear componentes web frontales y de interfaz de usuario. Se suele utilizar para desarrollar aplicaciones web o aplicaciones móviles. Permite a los desarrolladores crear componentes reutilizables e independientes entre sí. Se puede utilizar con otras librerías, como Axios, JQuery AJAX o la integrada en el navegador window.fetch.

En este post, te mostraremos cómo instalar React JS en CentOS 8

Requisitos previos

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

Cómo empezar

Antes de empezar, tendrás que actualizar los paquetes del 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 necesarias con el siguiente comando:

dnf install gcc-c++ make curl -y

Una vez que hayas terminado de instalar las dependencias necesarias, puedes pasar al siguiente paso.

Instalar NPM y Node.js

A continuación, tendrás que 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 los paquetes de Javascript. Por defecto, la última versión de NPM y Node.js no está incluida en el repositorio por defecto de CentOS. Así que tendrás que añadir el repositorio de fuentes de Node a tu sistema. Puedes añadirlo con el siguiente comando:

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

Una vez añadido el repositorio, instala Node.js y NPM con el siguiente comando:

dnf install nodejs -y

Una vez completada la instalación, 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 el siguiente resultado:

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 empezar, tendrás que instalar create-react-app en tu sistema. Es una utilidad de línea de comandos que se utiliza para crear una aplicación React.

Puedes instalarla utilizando el 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 utilizando 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:

Success! Created myapp at /root/myapp
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd myapp
  npm start

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

cd myapp
npm start

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

Compiled successfully!

You can now view myapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

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

Crear un archivo de servicio Systemd para Reactjs

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

nano /lib/systemd/system/react.service

Añade 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 y luego recarga el demonio systemd con el siguiente comando:

systemctl daemon-reload

A continuación, inicia el servicio Reactjs y permite 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
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:52:32 EDT; 6s ago
 Main PID: 2191 (node)
    Tasks: 29 (limit: 12524)
   Memory: 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?: Project is running at http://0.0.0.0:3000/
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: webpack output is served from
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: Content not from webpack is served from /root/myapp/public
Mar 23 02:52:34 centos8 npm[2191]: ? ?wds?: 404s will fallback to /
Mar 23 02:52:34 centos8 npm[2191]: Starting the development server...
Mar 23 02:52:37 centos8 npm[2191]: Compiled successfully!
Mar 23 02:52:37 centos8 npm[2191]: You can now view myapp in the browser.
Mar 23 02:52:37 centos8 npm[2191]:   http://localhost:3000
Mar 23 02:52:37 centos8 npm[2191]: Note that the development build is not optimized.
Mar 23 02:52:37 centos8 npm[2191]: To create a production build, use 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:(("node",pid=2209,fd=18))

Una vez que hayas terminado, puedes pasar al siguiente paso.

Configurar Nginx como proxy inverso para React App

A continuación, tendrás que configurar Nginx como proxy inverso para acceder a la aplicación React en el puerto 80. Primero, instala el paquete Nginx con el siguiente comando:

dnf install nginx -y

Una vez instalado Nginx, crea un nuevo archivo de configuración del host virtual de Nginx con el siguiente comando:

nano /etc/nginx/conf.d/react.conf

Añade las siguientes líneas:

server {
    listen 80;
    server_name react.example.com;

    location / {
        proxy_set_header   X-Forwarded-For $remote_addr;
        proxy_set_header   Host $http_host;
        proxy_pass         http://localhost:3000;
    }
}

Guarda y cierra el archivo cuando hayas terminado y luego verifica que el Nginx no tenga ningún error de sintaxis con el siguiente comando:

nginx -t

Deberías obtener la siguiente salida:

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

Por último, inicia el servicio Nginx y permite que se inicie al reiniciar el sistema ejecutando el siguiente comando:

systemctl start nginx
systemctl enable nginx

También puedes verificar el estado de Nginx ejecutando el siguiente comando:

systemctl status nginx

Deberías obtener el estado del servicio React en la siguiente salida:

? nginx.service - The nginx HTTP and reverse proxy server
   Loaded: loaded (/usr/lib/systemd/system/nginx.service; disabled; vendor preset: disabled)
   Active: active (running) since Tue 2021-03-23 02:57:48 EDT; 4s ago
  Process: 4079 ExecStart=/usr/sbin/nginx (code=exited, status=0/SUCCESS)
  Process: 4078 ExecStartPre=/usr/sbin/nginx -t (code=exited, status=0/SUCCESS)
  Process: 4076 ExecStartPre=/usr/bin/rm -f /run/nginx.pid (code=exited, status=0/SUCCESS)
 Main PID: 4081 (nginx)
    Tasks: 2 (limit: 12524)
   Memory: 4.0M
   CGroup: /system.slice/nginx.service
           ??4081 nginx: master process /usr/sbin/nginx
           ??4082 nginx: worker process

Mar 23 02:57:48 centos8 systemd[1]: Starting The nginx HTTP and reverse proxy server...
Mar 23 02:57:48 centos8 nginx[4078]: nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
Mar 23 02:57:48 centos8 nginx[4078]: nginx: configuration file /etc/nginx/nginx.conf test is successful
Mar 23 02:57:48 centos8 systemd[1]: nginx.service: Failed to parse PID from file /run/nginx.pid: Invalid argument
Mar 23 02:57:48 centos8 systemd[1]: Started The nginx HTTP and reverse proxy server.

Una vez que hayas terminado, puedes pasar al siguiente paso.

Configurar el cortafuegos

A continuación, tendrás que permitir los puertos 80 y 443 a través del cortafuegos. Puedes permitirlos ejecutando el siguiente comando:

firewall-cmd --permanent --add-port=80/tcp
firewall-cmd --permanent --add-port=443/tcp

A continuación, recarga el cortafuegos para aplicar los cambios de configuración:

firewall-cmd --reload

Una vez que hayas terminado, puedes pasar al siguiente paso.

Accede a la aplicación Reactjs

Ahora, abre tu navegador web y accede a tu aplicación Reactjs utilizando la URL http://react.example.com. Deberías ver la página de Reactjs en la siguiente pantalla:

React.js en CentOS

Conclusión

Enhorabuena! has instalado con éxito Reactjs en CentOS 8. También has configurado Nginx como proxy inverso para la aplicación Reactjs. Ahora puedes empezar a desarrollar tu aplicación Reactjs.

También te podría gustar...