HowtoForge

Tutoriales de Linux

Cómo instalar ReactJS en Ubuntu 20.04

ReactJS es una biblioteca JavaScript gratuita y de código abierto que se utiliza para crear componentes de interfaz de usuario reutilizables. Fue desarrollada por Facebook en 2011 para crear aplicaciones web ricas y atractivas de forma rápida y eficiente con una codificación mínima. Te permite crear elementos interactivos en sitios web. Utiliza DOM Virtual que hace que la aplicación sea rápida. Ofrece un amplio conjunto de funciones, como DOM virtual, enlace de datos unidireccional, componentes, JSX, declaraciones condicionales y muchas más.

En este tutorial, te mostraremos cómo instalar create react app y alojar una aplicación ReactJS con el servidor web Nginx en Ubuntu 20.04.

Requisitos previos

  • Un servidor que ejecute Ubuntu 20.04 con un mínimo de 2 GB de RAM.
  • Un nombre de dominio válido apuntado con la IP de tu servidor. En este tutorial, utilizaremos el dominio reactjs.ejemplo.com.
  • Una contraseña de root configurada el servidor.

Cómo empezar

Antes de empezar, siempre es recomendable actualizar los paquetes de tu sistema a la última versión. Puedes actualizarlos ejecutando el siguiente comando:

apt-get update -y

Una vez actualizados todos los paquetes, instala otras dependencias necesarias ejecutando el siguiente comando:

apt-get install curl gnupg2 -y

Una vez instaladas todas las dependencias, puedes pasar al siguiente paso.

Instalar Node.js

A continuación, tendrás que instalar Node.js en tu servidor. Por defecto, la última versión de Node.js no está disponible en el repositorio estándar de Ubuntu 20.04. Así que tendrás que instalar Node.js desde el repositorio oficial de Node.js.

Primero, añade el repositorio de Node.js con el siguiente comando:

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

A continuación, ejecuta el siguiente comando para instalar Node.js en tu sistema:

apt-get install nodejs -y

Tras instalar Node.js, actualiza el NPM a la última versión con el siguiente comando:

npm install npm@latest -g

Deberías obtener la siguiente salida:

/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, verifica la versión instalada de Node.js con el siguiente comando:

node -v

Deberías obtener la siguiente salida:

v14.15.3

Una vez que hayas terminado, puedes continuar con el siguiente paso.

Instalar la herramienta Create React App

Create React App es una herramienta que te ahorra tiempo de instalación y configuración. Sólo tienes que ejecutar un único comando y Create React App configurará todas las herramientas necesarias para iniciar tu proyecto.

Puedes instalar la herramienta Create React App utilizando el siguiente comando:

npm install -g create-react-app

Deberías obtener la siguiente salida:

/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 hayas terminado, puedes pasar al siguiente paso.

Crea tu primera React App

En esta sección, te mostraremos cómo crear una aplicación React con la herramienta Create React App.

Primero, cambia el directorio a /opt y crea tu primer proyecto con el siguiente comando:

cd /opt
create-react-app reactproject

Deberías ver la siguiente salida:

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, cambia el directorio a tu proyecto e inicia tu aplicación con el siguiente comando:

cd /opt/reactproject
npm start

Deberías obtener la siguiente salida:

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.

Pulsa CTRL+C para detener la aplicación.

Crear un archivo de inicio para React App

Si quieres iniciar React App automáticamente al reiniciar el sistema, tendrás que crear un servicio systemd para tu aplicación React. Así podrás gestionar tu aplicación fácilmente utilizando el comando systemctl. Puedes crear un archivo de servicio systemd con el siguiente comando:

nano /lib/systemd/system/react.service

Añade las siguientes líneas:

[Service]
Type=simple
User=root
Restart=on-failure
WorkingDirectory=/opt/reactproject
ExecStart=npm start -- --port=3000

Guarda y cierra el archivo y luego recarga el demonio systemd con el siguiente comando:

systemctl daemon-reload

A continuación, inicia el servicio React y habilítalo para que se inicie al reiniciar el sistema ejecutando el siguiente comando:

systemctl start react
systemctl enable react

Puedes verificar el estado del servicio React con el siguiente comando:

systemctl status react

Deberías obtener la siguiente salida:

? 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 hayas terminado, puedes continuar con el siguiente paso.

Configurar Nginx para React App

Es una buena idea instalar y configurar Nginx como proxy inverso para React App. Así podrás acceder a tu aplicación a través del puerto 80.

En primer lugar, instala el paquete Nginx utilizando el siguiente comando:

apt-get install nginx -y

Una vez instalado Nginx, crea un nuevo archivo de configuración de host virtual Nginx:

nano /etc/nginx/sites-available/reactjs.conf

Añade 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;
    }
}

Guarda y cierra el archivo y, a continuación, habilita el host virtual Nginx con el siguiente comando:

ln -s /etc/nginx/sites-available/reactjs.conf /etc/nginx/sites-enabled/

A continuación, comprueba si Nginx tiene algún error de sintaxis ejecutando 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, reinicia el servicio Nginx para aplicar los cambios:

systemctl restart nginx

También puedes verificar el estado del servicio Nginx con el siguiente comando:

systemctl status nginx

Deberías ver la siguiente salida:

? 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 a React App. Ahora puedes proceder al siguiente paso.

Acceder a la interfaz web de React App

Ahora, abre tu navegador web y escribe la URL http://reactjs.example.com. Serás redirigido a la interfaz web de React.Js en la siguiente pantalla:

Conclusión

Enhorabuena! has instalado y configurado con éxito React.Js en el servidor Ubuntu 20.04. Espero que ahora tengas conocimientos suficientes para desplegar tu propia aplicación React en el entorno de producción. No dudes en preguntarme si tienes alguna duda.

También te podría gustar...