Cómo instalar ReactJS con proxy Nginx en CentOS 8

Introducción

React es una biblioteca JavaScript gratuita y de código abierto desarrollada por Facebook. Se utiliza para crear interfaces web y componentes de interfaz de usuario. 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, incluidas Axios, JQuery AJAX o el window.fetch integrado del navegador.

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

Prerrequisitos

Un servidor que ejecuta CentOS 8.
Un nombre de dominio válido apunta a la IP de su servidor.
Acceso root o un usuario con privilegios sudo .

Para comenzar

Antes de comenzar, deberá actualizar los paquetes del sistema a la última versión. Puede actualizarlos ejecutando el siguiente comando:

sudo dnf update -y

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

sudo dnf install gcc-c++ make curl -y

Una vez que haya terminado de instalar las dependencias requeridas, puede continuar con el siguiente paso.

Instalador de NPM y Node.js

A continuación, deberá instalar Node.js y NPM en su sistema. NPM, también llamado administrador de paquetes, es una herramienta de línea de comandos que se utiliza para interactuar con paquetes de Javascript. De forma predeterminada, la última versión de NPM y Node.js no se incluyen en el repositorio predeterminado de CentOS. Luego, deberá agregar el repositorio de origen de Node a su sistema. Puede agregarlo con el siguiente comando cu r l :

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

Una vez que se agrega el repositorio, instale Node.js y NPM con el siguiente comando:

sudo dnf install nodejs -y

Una vez que se complete la instalación, verifique la versión de Node.js ejecutando el siguiente comando:

node -v

Debería obtener el siguiente resultado:

v14.16.0

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

npm -v

Debería obtener el siguiente resultado:

6.14.11

En este punto, NPM y Node.js están instalados en el sistema. Ahora puede continuar con la instalación de Reactjs.

Instalar Reactjs

Antes de comenzar, deberá instalar la aplicación create-react en su sistema. Es una utilidad de línea de comandos que se utiliza para crear una aplicación React.

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

sudo npm install -g create-react-app

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

create-react-app --version

Debería ver el siguiente resultado:

4.0.3

Entonces, cree su primera aplicación Reactjs con el siguiente comando:

create-react-app myapp

Debería ver el siguiente resultado:

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, cambie el directorio a myapp e inicie la aplicación con el siguiente comando:

cd myapp

sudo npm start

Una vez que la aplicación se haya iniciado correctamente, debería obtener el siguiente resultado:

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, presione CTRL + C para detener la aplicación. Ahora puede continuar con el siguiente paso.

Cree un archivo de servicio Systemd para Reactjs

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

sudo 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

Guarde y cierre el archivo, luego vuelva a cargar el demonio systemd con el siguiente comando:

sudo systemctl daemon-reload

A continuación, inicie el servicio Reactjs y habilítelo para que se inicie cuando el sistema se reinicie con el siguiente comando:

sudo systemctl start react

sudo systemctl enable react

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

sudo systemctl status react

Debería obtener el siguiente resultado:

? react.service
   Loaded: loaded (/usr/lib/systemd/system/react.service; disabled; vendor preset: disabled)
   Active: active (running) since 2021-03-22 01:51:33 EDT; 4s 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 se inicia y escucha en el puerto 3000. Puede verificar esto con el siguiente comando:

ss -antpl | grep 3000

Debería obtener el siguiente resultado:

LISTEN    0         128                0.0.0.0:3000             0.0.0.0:*        users:(("node",pid=2209,fd=18))

Una vez hecho esto, puede continuar con el siguiente paso.

Configure Nginx como un proxy inverso para la aplicación React

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

sudo dnf install nginx -y

Una vez que Nginx esté instalado, cree un nuevo archivo de configuración de host virtual Nginx con el siguiente comando:

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

Agrega 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;
    }
}

Guarde y cierre el archivo cuando haya terminado, luego verifique Nginx en busca de errores de sintaxis con el siguiente comando:

sudo nginx -t

Debería obtener el siguiente resultado:

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

Finalmente, inicie el servicio Nginx y habilítelo para que se inicie cuando el sistema se reinicie ejecutando el siguiente comando:

sudo systemctl start ngin

sudo systemctl enable nginx

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

sudo systemctl status nginx

Debería obtener el estado del servicio React en el siguiente resultado:

? 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 hecho esto, puede continuar con el siguiente paso.

Configurar el cortafuegos

A continuación, deberá permitir los puertos 80 y 443 a través del firewall. Si usa CMD Firewall , puede permitirlos ejecutando los siguientes comandos:

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

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

Luego, vuelva a cargar el firewall para aplicar los cambios de configuración:

sudo firewall-cmd --reload

Una vez hecho esto, puede continuar con el siguiente paso.

Inicie sesión en la aplicación Reactjs

Ahora abra su navegador web e inicie sesión en su aplicación Reactjs usando la URL http://react.example.com . Debería ver la página de Reactjs en la captura de pantalla a continuación:

Conclusión

¡Felicidades! ha instalado con éxito Reactjs en CentOS 8. También ha configurado Nginx como un proxy inverso para la aplicación Reactjs. Ahora puede comenzar a desarrollar su aplicación Reactjs.