Linux Pasión

Tutoriales de Linux

Cómo instalar ReactJS con proxy Nginx en CentOS 8

React.js en CentOS

React es una biblioteca de JavaScript gratuita y de código abierto desarrollada por Facebook. Se utiliza para crear frontend 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 navegador window.fetch incorporado.

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

requisitos previos

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

Empezando

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

dnf update -y

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

dnf install gcc-c++ make curl -y

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

Instalar 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 incluye en el repositorio predeterminado de CentOS. Por lo tanto, deberá agregar el repositorio de origen de Node a su sistema. Puedes agregarlo con el siguiente comando:

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:

dnf install nodejs -y

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

node -v

Deberías obtener el siguiente resultado:

v14.16.0

También puede 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 su sistema. Ahora puede proceder a instalar Reactjs.

Instalar Reactjs

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

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

npm install -g create-react-app

Una vez instalado, 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

Luego, crea tu 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
npm start

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

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.

Crear un archivo de servicio de 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:

nano /lib/systemd/system/react.service

Agregue 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:

systemctl daemon-reload

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

systemctl start react
systemctl enable react

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

systemctl status react

Deberías obtener el siguiente resultado:

? 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 se inicia y escucha en el puerto 3000. Puede verificarlo con el siguiente comando:

ss -antpl | grep 3000

Deberías obtener el siguiente resultado:

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

Una vez que haya terminado, puede continuar con el siguiente paso.

Configurar 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:

dnf install nginx -y

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

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

Agregue 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 el Nginx para cualquier error de sintaxis con el siguiente comando:

nginx -t

Deberías 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 al reiniciar el sistema ejecutando el siguiente comando:

systemctl start nginx
systemctl enable nginx

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

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 que haya terminado, puede continuar con el siguiente paso.

Configurar cortafuegos

A continuación, deberá permitir los puertos 80 y 443 a través del firewall. Puede permitirlos ejecutando el siguiente comando:

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

A continuación, vuelva a cargar el cortafuegos para aplicar los cambios de configuración:

firewall-cmd --reload

Una vez que haya terminado, puede continuar con el siguiente paso.

Acceder a la aplicación Reactjs

Ahora, abra su navegador web y acceda a su aplicación Reactjs usando la URL http://react.ejemplo.com. Debería ver la página de Reactjs en la siguiente pantalla:

React.js en CentOS

Conclusión

¡Felicidades! Ha instalado correctamente 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.

Relacionados:

Cómo instalar HAProxy en Debian 11
Cómo instalar la herramienta de monitoreo de Centreon en Rocky Linux 8
Cómo instalar CyberPanel en Alma Linux 8
Cómo configurar el clúster RabbitMQ en Ubuntu 20.04
Cómo instalar el sistema de mensajería del equipo de Mattermost en Debian 10

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *