React.js es una biblioteca de Javascript que se utiliza para crear interfaces de usuario rápidas e interactivas para aplicaciones de una sola página. Debido a su flexibilidad y simplicidad, es la primera opción de cualquier desarrollador para el desarrollo de aplicaciones móviles y web. Permite componer interfaces de usuario complejas a partir de piezas de código pequeñas y aisladas llamadas "componentes". Actualmente, es utilizado por muchas empresas, incluidas Facebook, Instagram, Twitter, Airbnb y más.
En este tutorial, te enseñamos a implementar una aplicación React.js con Nginx en Ubuntu 20.04.
Requisitos
- Un servidor cloud Ubuntu 20.04.
- Un nombre de dominio válido que apunte a la IP de tu servidor.
- Un usuario root o con privilegios sudo.
Instala Node.js
Antes de comenzar, Node.js y NPM han de estar instalados en tu servidor. Si no es así, tienes que añadir el repositorio Nodesource a tu sistema.
Primero, instala las dependencias requeridas con el siguiente comando:
# apt-get update && apt-get upgrade && apt-get install curl gnupg2 gcc g++ make libssl-dev -y
A continuación, añade el repositorio Nodesource con el comando que te mostramos a continuación:
# curl -sL https://deb.nodesource.com/setup_current.x -o nodesource_setup.sh && bash nodesource_setup.sh
Par continuar, instala Node.js y NPM con el siguiente comando:
# apt-get install nodejs -y && npm install npm@latest -g
Una vez instalado, puedes verificar la versión de Node.js y NPM utilizando el siguiente comando:
# node --version && npm --version
Deberías ver la versión de Node.js y NPM del siguiente modo:
v16.10.0
7.24.2
Instala la Utilidad create-react-app
create-react-appes una herramienta de líneas de comando que se utiliza para estableces todas las herramientas requeridas para crear una aplicación React. Puedes instalarla con el siguiente comando:
# npm -g install create-react-app
Una vez instada, verifica la versión instalada con el siguiente comando:
# create-react-app --version
Deberías ver el siguiente resultado:
4.0.3Crea tu primera Aplicación React
En este apartado crearás una app React llamada reactapp inside /root directory:
# create-react-app reactapp
Deberías obtener el siguiente resultado:
Success! Created reactapp at /root/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!
Para iniciar tu aplicación, tienes que navegar por el directorio y correr el siguiente comando:
# cd ~/reactapp && npm start
Deberías ver el siguiente resultado:
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
Haz clic en "CTRL+C" para parar la aplicación.
Crea una estructura de producción para tu Aplicación
A estas alturas, tienes un proyecto de app React que corre con éxito. Ahora necesitarás crear una estructura de producción. Puedes hacerlo con el siguiente comando:
# npm run build
Esto compilará JavaScript y sus activos en el directorio de la estructura como se muestra más abajo:
Creating an optimized production build...
Compiled successfully.
File sizes after gzip:
41.34 KB build/static/js/2.8d09931e.chunk.js
1.62 KB build/static/js/3.07870480.chunk.js
1.16 KB build/static/js/runtime-main.73bd03cc.js
589 B build/static/js/main.1dd9d4b2.chunk.js
556 B build/static/css/main.a617e044.chunk.css
The project was built assuming it is hosted at /.
You can control this with the homepage field in your package.json.
The build folder is ready to be deployed.
You may serve it with a static server:
npm install -g serve
serve -s build
Find out more about deployment here:
https://cra.link/deploymentA este punto, ya tienes un directorio de estructura dentro del directorio de tu app React. Ahora necesitarás desplegar este directorio con Nginx.
Configura Nginx para desplegar la App React
En primer lugar, instala el paquete de servidor Nginx con el siguiente comando:
# apt-get install nginx python3-certbot-nginx -y
Una vez que Nginx se haya instalado, crea un directorio para la app React con el siguiente comando:
# mkdir /var/www/html/react
A continuación, copia todos los contenidos desde el directorio de la estructura al directorio React:
# cp -r /root/reactapp/build/* /var/www/html/react/
En el siguiente paso, establece la propiedad adecuada del directorio React con el siguiente comando:
# chown -R www-data:www-data /var/www/html/react
Para seguir, crea un archivo de configuración host virtual de Nginx para alojar tu app React:
# nano /etc/nginx/sites-enabled/react.conf
Añade las siguientes líneas:
server {
listen 80;
listen [::]:80;
root /var/www/html/react/;
index index.html index.htm;
# MODIFICAR EJEMPLO DE SERVER_NAME
server_name react.ejemplo.com;
location / {
try_files $uri $uri/ =404;
}
}Guarda y cierra el archivo y después verifica Nginx para evitar cualquier error de sintaxis:
# nginx -t
Si todo ha ido bien, 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
Reinicia el servicio Nginx para aplicar los cambios:
# systemctl restart nginx
Para terminar, puedes utilizar certbot para adquirir un certificado para el registro:
# certbot --nginx -d react.ejemplo.com --redirect
Accede a la Aplicación React.js
Para terminar, abre tu navegador web y accede a la aplicación React.js desde la URL https://react.example.com. Deberías ver la siguiente pantalla:
Conclusión
Con esta guía, ¡has instalado React.js con éxito y creado una aplicación en React! Ya puedes desplegar tu propia aplicación React.js en un entorno de producción.