MERN es una de los stacks más populares para crear una aplicaciones de una sola página. Está compuesto por MongoDB, Express, React, Redux y Node.js. Lo mejor de MERN es que todas estas tecnologías admiten el mismo lenguaje tanto para el front-end como para el back-end.
A continuación, te mostramos una breve descripción de cada componente:
- MongoDB es una base de datos simple y orientada a objetos que se utiliza para el almacenamiento de datos de gran tamaño.
- Express JS es un framework de node js que ayuda a los desarrolladores a implementar rápidamente aplicaciones basadas en nodos.
- React se utiliza para el desarrollo de aplicaciones web front-end.
- Node JS es un runtime de JavaScript que permite escribir en JavaScript desde el lado del servidor.
En este tutorial te mostramos cómo desplegar una aplicación MERN en Ubuntu 24.04.
Requisitos
- Un servidor corriendo con Ubuntu 24.04 LTS.
- Uso del usuario root o un usuario con permisos para realizar sudo su.
Instalar Node.js
Por defecto, la última versión de Node.js no está incluida en el repositorio de Ubuntu. Así que tendrás que añadir el repositorio de fuentes de Node a tu sistema.
En primer lugar, instala las dependencias necesarias utilizando el siguiente comando:
# apt update && apt install ca-certificates curl gnupg -y
A continuación, descarga y utiliza el script de Node para el repositorio con el siguiente comando:
# curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -
Posteriormente, actualiza los repositorios y paquetes con el siguiente comando:
# apt update && apt upgrade -y
Por último, instala el paquete Node.js con el siguiente comando:
# apt install nodejs -y
Una vez instalado el paquete Node.js, puedes verificar la versión con el siguiente comando:
# node --version
Éste es el resultado que deberías ver:
v22.4.0
Instala el servidor MongoDB
Por defecto, la última versión de MongoDB tampoco está incluida en el repositorio de Ubuntu. Así que tendrás que añadir también el repositorio oficial de MongoDB a tu sistema.
Primero, añade la clave GPG de MongoDB con el siguiente comando:
# curl -fsSL https://www.mongodb.org/static/pgp/server-7.0.asc | gpg -o /usr/share/keyrings/mongodb-server-7.0.gpg --dearmor
A continuación, añade el repositorio MongoDB utilizando el siguiente comando:
# echo "deb [ arch=amd64,arm64 signed-by=/usr/share/keyrings/mongodb-server-7.0.gpg ] https://repo.mongodb.org/apt/ubuntu jammy/mongodb-org/7.0 multiverse" | tee /etc/apt/sources.list.d/mongodb-org-7.0.list
Después actualiza el repositorio e instala el paquete MongoDB con el siguiente comando:
# apt update -y && apt install mongodb-org -y
Una vez completada la instalación, inicia el servicio MongoDB y permite que se inicie al reiniciar el sistema:
# systemctl start mongod && systemctl enable mongod
A continuación, verifica la versión de MongoDB utilizando el siguiente comando:
# mongod --version
Éste es el resultado que deberías ver:
MongoDB shell version v7.0.8
Build Info: {
"version": "7.0.8",
"gitVersion": "b6513ce0781db6818e24619e8a461eae90bc94fc",
"openSSLVersion": "OpenSSL 3.0.13 30 Jan 2024",
"modules": [],
"allocator": "tcmalloc",
"environment": {
"distmod": "ubuntu2004",
"distarch": "x86_64",
"target_arch": "x86_64"
}
}
Crea la aplicación MERN
En primer lugar, tendrás que crear un directorio para albergar tu proyecto. Puedes crearlo usando el siguiente comando:
# mkdir project
A continuación, accede al directorio del proyecto y crea un archivo package.json con el siguiente comando:
# cd project && npm init -y
Posteriormente, instala Express, React y otras dependencias para la aplicación utilizando el siguiente comando:
# npm i express mongodb react react-dom webpack webpack-cli html-webpack-plugin @babel/core @babel/preset-env @babel/preset-react babel-loader dotenv && npm i -g pm2
Luego, crea un directorio para almacenar tu código:
# mkdir -p src/public
A continuación, crea un archivo index.js con un editor de texto:
# nano src/index.js
Y añade el siguiente contenido en él:
if (process.env.NODE_ENV !== "production") {
require("dotenv").config();
}
const path = require("path");
const express = require("express");
const app = express();
const { MongoClient } = require("mongodb");
(async () => {
const mongo = new MongoClient(process.env.MONGODB);
try {
await mongo.connect();
} catch (e) {
console.log("Failed connecting to MongoDB");
console.log(e);
process.exit(1);
}
console.log("Connected to MongoDB");
app.use(express.static(path.join(__dirname, "../dist")));
app.listen(process.env.PORT);
console.log(`HTTP listening on ${process.env.PORT}`);
})();
Guarda y cierra el archivo y luego crea otro archivo llamado App.jsx:
# nano src/public/App.jsx
Añade las siguientes líneas:
import React from "react";
import ReactDOM from "react-dom";
const App = () => (
<div>
<h1>My First App</h1>
</div>
);
ReactDOM.render(<App />, document.querySelector("#app"));
De nuevo, guarda los cambios cerrando el archivo y crea un archivo index.html:
# nano src/public/index.html
Añade las siguientes líneas en él:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My First MERN Application</title>
</head>
<body>
<div id="app"></div>
</body>
</html>
Guarda y cierra el archivo. Posteriormente, crea un archivo webpack.config.js para agrupar el proyecto:
# nano webpack.config.js
Con el siguiente contenido:
module.exports = {
entry: "./src/public/App.jsx",
module: {
rules: [
{
test: /\.(js|jsx)$/,
use: "babel-loader",
},
],
},
plugins: [
new (require("html-webpack-plugin"))({
template: "./src/public/index.html",
}),
],
};
Luego crea un archivo .babelrc para compilar el código React:
# nano .babelrc
Con este contenido:
{
"presets": ["@babel/preset-env", "@babel/preset-react"]
}
Crea un último archivo .env para definir la base de datos y el puerto de MongoDB:
# nano .env
El contenido de dicho fichero es:
PORT=8080
MONGODB=mongodb://localhost
Y construye la aplicación con el siguiente comando:
# npx webpack
Por último, inicia la aplicación con el siguiente comando:
# node src/index.js
Una vez iniciada la aplicación, deberías obtener la siguiente salida:
Connected to MongoDB
HTTP listening on 8080
De forma alternativa, puedes utilizar PM2 para levantar la aplicación:
pm2 start src/index.js && pm2 startup
Tienes más información en: Cómo usar PM2 para gestionar una app en Node.js.
Acceder a la aplicación MERN
En este punto, la aplicación MERN está iniciada y a la escucha por el puerto 8080 TCP. Puedes acceder a ella usando la URL http://your-server-ip:8080, pero recuerda primero crear una regla en el Firewall de Clouding para poder acceder. Deberías ver tu aplicación MERN en la siguiente pantalla:
Conclusión
¡Enhorabuena! Has desplegado con éxito una aplicación MERN en Ubuntu 22.04 o 24.04 LTS.
Ya puedes empezar a desarrollar la aplicación utilizando MERN. Esperamos haberte ayudado con este artículo🙂. Recuerda, si tienes consultas sobre esta u otra cuestión relacionada con tus servidores en Clouding, no dudes en escribir a soporte@clouding.io ¡Estamos a tu lado para lo que necesites!