ReactJS es una biblioteca de JavaScript gratuita y de código abierto que se utiliza para crear componentes de interfaz de usuario reutilizables. Fue desarrollado por Facebook en 2011 para crear aplicaciones web ricas y atractivas de manera rápida y eficiente con una codificación mínima. Te permite crear elementos interactivos en sitios web. Utiliza Virtual DOM que hace que la aplicación sea rápida. Ofrece un amplio conjunto de características que incluyen DOM virtual, enlace de datos unidireccional, componentes, JSX, declaraciones condicionales y muchas más.
En este tutorial, le mostraremos cómo instalar la aplicación Create React y alojar una aplicación ReactJS con el servidor web Nginx en Ubuntu 20.04.
Requisitos
- Un servidor con Ubuntu 20.04 con un mínimo de 2 GB de RAM.
- Un nombre de dominio válido apuntado con la IP de su servidor. En este tutorial, usaremos el dominio reactjs.example.com.
- Se configura una contraseña de root en el servidor.
Cómo empezar
Antes de comenzar, siempre se recomienda actualizar los paquetes de su sistema a la última versión. Puede actualizarlos ejecutando el siguiente comando:
apt-get update -y
Una vez que todos los paquetes estén actualizados, instale otras dependencias requeridas ejecutando el siguiente comando:
apt-get install curl gnupg2 -y
Una vez que todas las dependencias estén instaladas, puede continuar con el siguiente paso.
Instalar Node.js
A continuación, deberá instalar Node.js en su servidor. De forma predeterminada, la última versión de Node.js no está disponible en el repositorio estándar de Ubuntu 20.04. Por lo tanto, deberá instalar Node.js desde el repositorio oficial de Node.js.
Primero, agregue el repositorio Node.js con el siguiente comando:
curl -sL https://deb.nodesource.com/setup_14.x | bash -
A continuación, ejecute el siguiente comando para instalar Node.js en su sistema:
apt-get install nodejs -y
Después de instalar Node.js, actualice NPM a la última versión con el siguiente comando:
npm install [email protected] -g
Deberías obtener el siguiente resultado:
/usr/bin/npm -> /usr/lib/node_modules/npm/bin/npm-cli.js /usr/bin/npx -> /usr/lib/node_modules/npm/bin/npx-cli.js + [email protected] updated 2 packages in 12.78s
A continuación, verifique la versión instalada de Node.js con el siguiente comando:
node -v
Deberías obtener el siguiente resultado:
v14.15.3
Una vez que haya terminado, puede continuar con el siguiente paso.
Instalar la herramienta Create React App
Create React App es una herramienta que le ahorra tiempo de instalación y configuración. Solo necesita ejecutar un solo comando y Create React App configurará todas las herramientas necesarias para iniciar su proyecto.
Puede instalar la herramienta Create React App usando el siguiente comando:
npm install -g create-react-app
Deberías obtener el siguiente resultado:
/usr/bin/create-react-app -> /usr/lib/node_modules/create-react-app/index.js + [email protected] added 67 packages from 25 contributors in 4.705s
Una vez que haya terminado, puede continuar con el siguiente paso.
Crea tu primera aplicación React
En esta sección, le mostraremos cómo crear una aplicación React con la herramienta Crear aplicación React.
Primero, cambia el directorio a /opt y crea tu primer proyecto con el siguiente comando:
cd /opt
create-react-app reactproject
Debería ver el siguiente resultado:
Success! Created reactproject at /opt/reactproject
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 reactproject
npm start
Happy hacking!
A continuación, cambie el directorio a su proyecto e inicie su aplicación con el siguiente comando:
cd /opt/reactproject
npm start
Deberías obtener el siguiente resultado:
Compiled successfully! You can now view reactproject in the browser. http://localhost:3000 Note that the development build is not optimized. To create a production build, use npm run build.
Presiona CTRL+C para detener la aplicación.
Crear un archivo de inicio para la aplicación React
Si desea iniciar la aplicación React automáticamente al reiniciar el sistema, deberá crear un servicio systemd para su aplicación React. Para que pueda administrar su aplicación fácilmente usando el comando systemctl. Puede crear un archivo de servicio systemd con el siguiente comando:
nano /lib/systemd/system/react.service
Agregue las siguientes líneas:
[Service] Type=simple User=root Restart=on-failure WorkingDirectory=/opt/reactproject ExecStart=npm start -- --port=3000
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 React y habilítelo para que se inicie al reiniciar el sistema ejecutando el siguiente comando:
systemctl start react
systemctl enable react
Puede verificar el estado del servicio React con el siguiente comando:
systemctl status react
Deberías obtener el siguiente resultado:
? react.service
Loaded: loaded (/lib/systemd/system/react.service; static; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:11:42 UTC; 4s ago
Main PID: 30833 (node)
Tasks: 30 (limit: 4691)
Memory: 141.0M
CGroup: /system.slice/react.service
??30833 npm
??30844 sh -c react-scripts start "--port=3000"
??30845 node /opt/reactproject/node_modules/.bin/react-scripts start --port=3000
??30852 /usr/bin/node /opt/reactproject/node_modules/react-scripts/scripts/start.js --port=3000
Dec 19 06:11:42 ubuntu2004 systemd[1]: Started react.service.
Dec 19 06:11:43 ubuntu2004 npm[30833]: > [email protected] start /opt/reactproject
Dec 19 06:11:43 ubuntu2004 npm[30833]: > react-scripts start "--port=3000"
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Project is running at http://0.0.0.0:3000/
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: webpack output is served from
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: Content not from webpack is served from /opt/reactproject/public
Dec 19 06:11:46 ubuntu2004 npm[30852]: ? ?wds?: 404s will fallback to /
Dec 19 06:11:46 ubuntu2004 npm[30852]: Starting the development server...
Una vez que haya terminado, puede continuar con el siguiente paso.
Configurar Nginx para la aplicación React
Es una buena idea instalar y configurar Nginx como un proxy inverso para la aplicación React. Para que pueda acceder a su aplicación a través del puerto 80.
Primero, instale el paquete Nginx usando el siguiente comando:
apt-get install nginx -y
Una vez que Nginx esté instalado, cree un nuevo archivo de configuración de host virtual de Nginx:
nano /etc/nginx/sites-available/reactjs.conf
Agregue las siguientes líneas:
upstream backend {
server localhost:3000;
}
server {
listen 80;
server_name reactjs.example.com;
location / {
proxy_pass http://backend/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forward-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forward-Proto http;
proxy_set_header X-Nginx-Proxy true;
proxy_redirect off;
}
}
Guarde y cierre el archivo, luego habilite el host virtual Nginx con el siguiente comando:
ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/
A continuación, verifique Nginx en busca de cualquier error de sintaxis ejecutando 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, reinicie el servicio Nginx para aplicar los cambios:
systemctl restart nginx
También puede verificar el estado del servicio Nginx con el siguiente comando:
systemctl status nginx
Debería ver el siguiente resultado:
? nginx.service - A high performance web server and a reverse proxy server
Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
Active: active (running) since Sat 2020-12-19 06:12:42 UTC; 4s ago
Docs: man:nginx(8)
Process: 30899 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Process: 30913 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
Main PID: 30915 (nginx)
Tasks: 3 (limit: 4691)
Memory: 3.6M
CGroup: /system.slice/nginx.service
??30915 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
??30916 nginx: worker process
??30917 nginx: worker process
Dec 19 06:12:42 ubuntu2004 systemd[1]: Starting A high performance web server and a reverse proxy server...
Dec 19 06:12:42 ubuntu2004 systemd[1]: Started A high performance web server and a reverse proxy server.
En este punto, Nginx está instalado y configurado para servir la aplicación React. Ahora puede continuar con el siguiente paso.
Acceder a la interfaz web de la aplicación React
Ahora, abra su navegador web y escriba la URL http://reactjs.example.com . Será redirigido a la interfaz web de React.Js en la siguiente pantalla:
Conclusión
¡Felicidades! Ha instalado y configurado correctamente React.Js en el servidor Ubuntu 20.04. Espero que ahora tenga suficiente conocimiento para implementar su propia aplicación React en el entorno de producción. Siéntase libre de preguntarme si tiene alguna pregunta.