Linux Pasión

Tutoriales de Linux

Cómo instalar ReactJS en Ubuntu 20.04

Cómo instalar ReactJS en Ubuntu 20.04

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 previos

  • 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.

Empezando

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.

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 comenzar 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.

Cree su 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.

Prensa 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: Anuncio

[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 el 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.ejemplo.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. No dude en preguntarme si tiene alguna pregunta.

Relacionados:

Cómo instalar y configurar un servidor FTP (vsftpd) con SSL/TLS en Ubuntu 20.04
Administre AWS VPC usando aws-cli
Cómo configurar el registro privado de Docker en Ubuntu 18.04 LTS
Cómo configurar NGINX de alta disponibilidad con KeepAlived en CentOS 8
Cómo instalar la GUI de Apache en Ubuntu 18.04 LTS

Deja una respuesta

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