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 integrado.
En esta publicación, le mostraremos cómo instalar React JS en CentOS 8
Requisitos
- Un servidor que ejecuta CentOS 8.
- Un nombre de dominio válido apuntado con la IP de su servidor.
- Se configura una contraseña raíz en el servidor.
Cómo empezar
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. Puede agregarlo con el siguiente comando:
curl -sL https://rpm.nodesource.com/setup_14.x | bash -
Una vez agregado 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 utilizada 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
A continuación, 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
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.
Crear 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:
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:
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.
Configure Nginx como proxy inverso para la aplicación React
A continuación, deberá configurar Nginx como 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 detectar 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.example.com . Debería ver la página de Reactjs en la siguiente pantalla:
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.