HowtoForge

Tutoriales de Linux

Cómo instalar ReactJS con Nginx en Ubuntu 22.04

React.js es un framework JavaScript gratuito y de código abierto desarrollado por Facebook en 2011. Se utiliza para construir componentes de interfaz de usuario reutilizables y ayuda a los usuarios a crear aplicaciones web ricas y atractivas de forma rápida y eficiente con una codificación mínima. Con React, puedes construir una interfaz web interactiva y componer interfaces de usuario complejas a partir de piezas pequeñas y aisladas. Utiliza DOM virtual, que agiliza la aplicación. Proporciona muchas funciones, como DOM virtual, enlace de datos unidireccional, componentes, JSX, declaraciones condicionales y muchas más.

En este tutorial, te mostraremos cómo instalar React.js en Ubuntu 22.04.

Requisitos previos

  • Un servidor que ejecute Ubuntu 22.04.
  • Nombre de dominio válido apuntado con la IP de tu servidor.
  • Una contraseña de root configurada en el servidor.

Cómo empezar

En primer lugar, tendrás que actualizar los paquetes de tu sistema a la última versión. Puedes actualizarlos utilizando el siguiente comando:

apt-get update -y
apt-get upgrade -y

Una vez actualizados todos los paquetes, ejecuta el siguiente comando para instalar otras dependencias necesarias:

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 22.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_18.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:

removed 14 packages, changed 73 packages, and audited 223 packages in 3s

14 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

A continuación, verifica la versión instalada de Node.js con el siguiente comando:

node -v

Deberías obtener la siguiente salida:

v18.12.1

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

Instalar la herramienta Create React App

Create React App es una herramienta CLI que ayuda a los usuarios a ahorrar 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

Una vez que hayas terminado, puedes pasar al siguiente paso.

Crear una aplicación React de ejemplo

En esta sección, crearemos una aplicación React de ejemplo con la herramienta Create React App.

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

cd /opt
create-react-app reactapp

Deberías ver la siguiente salida:

Success! Created reactapp at /opt/reactapp
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 reactapp
  npm start

Happy hacking!

A continuación, cambia el directorio al directorio de tu proyecto e inicia tu aplicación con el siguiente comando:

cd /opt/reactapp
npm start

Deberías obtener la siguiente salida:

Compiled successfully!

You can now view reactapp in the browser.

  http://localhost:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

Pulsa CTRL+C para detener la aplicación. Crearemos un archivo de servicio systemd para gestionar la aplicación React.

Crear un servicio Systemd para React App

A continuación, tendrás que crear un servicio systemd para tu aplicación React. Puedes crearlo 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/reactapp
ExecStart=npm start -- --port=3000

Guarda y cierra el archivo y, a continuación, vuelve a cargar 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)
     Active: active (running) since Sun 2022-11-20 11:18:50 UTC; 6s ago
   Main PID: 76129 (npm start --por)
      Tasks: 30 (limit: 2242)
     Memory: 250.9M
        CPU: 4.663s
     CGroup: /system.slice/react.service
             ??76129 "npm start --port=3000" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""
             ??76140 sh -c "react-scripts start --port=3000"
             ??76141 node /opt/reactapp/node_modules/.bin/react-scripts start --port=3000
             ??76148 /usr/bin/node /opt/reactapp/node_modules/react-scripts/scripts/start.js --port=3000

Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddl>
Nov 20 11:18:54 ubuntu2204 npm[76148]: (Use `node --trace-deprecation ...` to show where the warning was created)
Nov 20 11:18:54 ubuntu2204 npm[76148]: (node:76148) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMid>
Nov 20 11:18:54 ubuntu2204 npm[76148]: Starting the development server...
Nov 20 11:18:55 ubuntu2204 npm[76148]: Compiled successfully!
Nov 20 11:18:55 ubuntu2204 npm[76148]: You can now view reactapp in the browser.
Nov 20 11:18:55 ubuntu2204 npm[76148]:   http://localhost:3000
Nov 20 11:18:55 ubuntu2204 npm[76148]: Note that the development build is not optimized.
Nov 20 11:18:55 ubuntu2204 npm[76148]: To create a production build, use npm run build.
Nov 20 11:18:55 ubuntu2204 npm[76148]: webpack compiled successfully

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

Configurar Nginx como Proxy Inverso

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 Sun 2022-11-20 11:20:17 UTC; 6s ago
       Docs: man:nginx(8)
    Process: 76760 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
    Process: 76762 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
   Main PID: 76763 (nginx)
      Tasks: 2 (limit: 2242)
     Memory: 2.6M
        CPU: 32ms
     CGroup: /system.slice/nginx.service
             ??76763 "nginx: master process /usr/sbin/nginx -g daemon on; master_process on;"
             ??76764 "nginx: worker process" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" "" ""

Nov 20 11:20:17 ubuntu2204 systemd[1]: Starting A high performance web server and a reverse proxy server...
Nov 20 11:20:17 ubuntu2204 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 continuar con el siguiente paso.

Proteger React.js con Let’s Encrypt

A continuación, tendrás que instalar el paquete cliente Certbot para instalar y gestionar el SSL Let’s Encrypt.

Primero, instala Certbot con el siguiente comando:

apt-get install python3-certbot-nginx -y

Una vez finalizada la instalación, ejecuta el siguiente comando para instalar el SSL de Let’s Encrypt en tu sitio web:

certbot --nginx -d reactjs.example.com

Se te pedirá que proporciones una dirección de correo electrónico válida y que aceptes las condiciones del servicio, como se muestra a continuación:

Saving debug log to /var/log/letsencrypt/letsencrypt.log
Plugins selected: Authenticator nginx, Installer nginx
Enter email address (used for urgent renewal and security notices) (Enter 'c' to
cancel): [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf. You must
agree in order to register with the ACME server at
https://acme-v02.api.letsencrypt.org/directory
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(A)gree/(C)ancel: A

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing to share your email address with the Electronic Frontier
Foundation, a founding partner of the Let's Encrypt project and the non-profit
organization that develops Certbot? We'd like to send you email about our work
encrypting the web, EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Obtaining a new certificate
Performing the following challenges:
http-01 challenge for reactjs.example.com
Waiting for verification...
Cleaning up challenges
Deploying Certificate to VirtualHost /etc/nginx/sites-enabled/fuel.conf

A continuación, elige si deseas o no redirigir el tráfico HTTP a HTTPS, como se muestra a continuación:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
1: No redirect - Make no further changes to the webserver configuration.
2: Redirect - Make all requests redirect to secure HTTPS access. Choose this for
new sites, or if you're confident your site works on HTTPS. You can undo this
change by editing your web server's configuration.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Select the appropriate number [1-2] then [enter] (press 'c' to cancel): 2

Escribe 2 y pulsa Intro para finalizar la instalación. Deberías ver el siguiente resultado:

Redirecting all traffic on port 80 to ssl in /etc/nginx/sites-enabled/fuel.conf

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Congratulations! You have successfully enabled https://reactjs.example.com

You should test your configuration at:
https://www.ssllabs.com/ssltest/analyze.html?d=reactjs.example.com
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

IMPORTANT NOTES:
 - Congratulations! Your certificate and chain have been saved at:
   /etc/letsencrypt/live/reactjs.example.com/fullchain.pem
   Your key file has been saved at:
   /etc/letsencrypt/live/reactjs.example.com/privkey.pem
   Your cert will expire on 2023-02-20. To obtain a new or tweaked
   version of this certificate in the future, simply run certbot again
   with the "certonly" option. To non-interactively renew *all* of
   your certificates, run "certbot renew"
 - Your account credentials have been saved in your Certbot
   configuration directory at /etc/letsencrypt. You should make a
   secure backup of this folder now. This configuration directory will
   also contain certificates and private keys obtained by Certbot so
   making regular backups of this folder is ideal.
 - If you like Certbot, please consider supporting our work by:

   Donating to ISRG / Let's Encrypt:   https://letsencrypt.org/donate
   Donating to EFF:                    https://eff.org/donate-le

 - We were unable to subscribe you the EFF mailing list because your
   e-mail address appears to be invalid. You can try again later by
   visiting https://act.eff.org.

Ahora, tu aplicación web React.js está protegida con Let’s Encrypt SSL.

Acceder a la interfaz web de React App

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

Conclusión

Enhorabuena! has instalado y configurado correctamente React.Js en el servidor Ubuntu 22.04. Ahora puedes empezar a crear tu propia aplicación basada en React y alojarla en el entorno de producción. No dudes en preguntarme si tienes alguna duda.

También te podría gustar...