ReactJS es una biblioteca JavaScript muy popular utilizada para construir interfaces de usuario. Con ReactJS, los desarrolladores pueden crear componentes reutilizables que se pueden emplear en aplicaciones web y móviles. En este artículo, te mostraremos cómo instalar ReactJS en Ubuntu 22.04 utilizando Nginx como servidor web.

Prerrequisitos

Antes de proceder con la instalación de ReactJS, asegúrate de tener instalados en tu sistema los siguientes elementos:

1. Node.js y npm (Node Package Manager)
2. Servidor web Nginx

Instalación de Node.js y npm

Para instalar Node.js y npm en Ubuntu, puedes utilizar los siguientes comandos:

curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash
sudo apt-get install -y nodejs

Instalación de Nginx

Para instalar Nginx, puedes utilizar el siguiente comando:

sudo apt-get install nginx

Una vez instalados estos prerrequisitos, puedes proceder con la instalación de ReactJS.

Creación del Proyecto ReactJS

El primer paso es crear un nuevo directorio para tu proyecto ReactJS y navegar hasta él. Puedes hacer esto utilizando los siguientes comandos:

mkdir my-react-app
cd my-react-app

A continuación, inicializa tu proyecto ReactJS ejecutando el siguiente comando:

npx create-react-app.

Este comando creará un nuevo proyecto ReactJS con la configuración predeterminada.

Iniciar el Servidor de Desarrollo

Ahora, puedes iniciar el servidor de desarrollo para tu proyecto ReactJS ejecutando el siguiente comando:

npm start

Esto iniciará el servidor de desarrollo y podrás acceder a tu proyecto ReactJS en http://localhost:3000.

Configuración para Producción

Sin embargo, si quieres ejecutar tu proyecto ReactJS en producción, necesitarás construir el proyecto utilizando el siguiente comando:

npm run build

Este comando creará un directorio build en tu proyecto que contiene la versión optimizada de tu aplicación ReactJS.

Configuración de Nginx para ReactJS

Para servir tu aplicación ReactJS utilizando Nginx, necesitarás crear un nuevo archivo de configuración de host virtual. Puedes hacer esto creando un nuevo archivo llamado my-react-app.conf en el directorio /etc/nginx/conf.d y agregando el siguiente contenido:

server {
listen 80;
server_name my-react-app.com;
root /var/www/my-react-app/build;
index index.html;
location / {
try_files $uri /index.html;
}
}

Asegúrate de reemplazar my-react-app.com con el nombre de dominio real de tu aplicación.

Implementación de la Aplicación ReactJS

A continuación, copia el directorio build de tu proyecto ReactJS al directorio /var/www/my-react-app. Puedes hacer esto utilizando los siguientes comandos:

sudo mkdir /var/www/my-react-app
sudo cp -r build /var/www/my-react-app/

Ahora, puedes reiniciar Nginx y acceder a tu aplicación ReactJS utilizando el nombre de dominio especificado en el archivo de configuración del host virtual. Para reiniciar Nginx, puedes utilizar el siguiente comando:

sudo systemctl restart nginx

Tu aplicación ReactJS ahora debería estar funcionando en Ubuntu 22.04 utilizando Nginx como servidor web.

En este artículo, hemos repasado cómo instalar y configurar ReactJS con Nginx en Ubuntu 22.04. Este proceso puede ser un poco complicado, pero con un poco de práctica, deberías poder instalar ReactJS y configurarlo con Nginx sin problemas.

Si estás buscando un proveedor de servicios en la nube confiable que ofrezca Cloud VPS, te recomendamos que consideres Shape.host. Ofrecen soluciones en la nube rápidas y seguras para las necesidades de tu negocio con opciones de escalabilidad y eficiencia.

Christian Wells