Com implementar MERN (MongoDB, Express, React i Node.js) a Ubuntu 22.04 o 24.04 LTS – Clouding.io

MERN és una de les piles tecnològiques més populars per crear aplicacions d’una sola pàgina. Està formada per MongoDB, Express, React, Redux i Node.js. El millor de MERN és que totes aquestes tecnologies admeten el mateix llenguatge tant per al frontal com per al rerefons.

A continuació, et mostrem una breu descripció de cada component:

MongoDB és una base de dades senzilla i orientada a objectes que s’utilitza per emmagatzemar grans volums de dades.
Express JS és un entorn de treball de node js que ajuda els desenvolupadors a implementar ràpidament aplicacions basades en nodes.
React s’utilitza per desenvolupar el frontal d’aplicacions web.
Node JS és un entorn d’execució de JavaScript que permet escriure en JavaScript al costat del servidor.

En aquest tutorial et mostrem com desplegar una aplicació MERN a Ubuntu 24.04.

Requisits

Un servidor que executi Ubuntu 24.04 LTS.
Accés amb l’usuari root o amb un usuari amb permisos per executar sudo su.

Instal·lar Node.js

Per defecte, la versió més recent de Node.js no està inclosa al repositori d’Ubuntu. Per tant, hauràs d’afegir el repositori de fonts de Node al sistema.

En primer lloc, instal·la les dependències necessàries amb l’ordre següent:

# apt update && apt install ca-certificates curl gnupg -y

A continuació, baixa i executa l’script de Node per configurar el repositori amb l’ordre següent:

# curl -fsSL https://deb.nodesource.com/setup_22.x | sudo -E bash -

Després, actualitza els repositoris i els paquets amb l’ordre següent:

# apt update && apt upgrade -y

Finalment, instal·la el paquet Node.js amb l’ordre següent:

# apt install nodejs -y

Un cop instal·lat el paquet Node.js, pots comprovar-ne la versió amb l’ordre següent:

# node --version

Aquest és el resultat que hauries de veure:

v22.4.0

Instal·la el servidor MongoDB

Per defecte, la versió més recent de MongoDB tampoc no està inclosa al repositori d’Ubuntu. Per tant, també hauràs d’afegir el repositori oficial de MongoDB al sistema.

Primer, afegeix la clau GPG de MongoDB amb l’ordre següent:

# 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ó, afegeix el repositori de MongoDB amb l’ordre següent (substitueix jammy per noble a 25.04 LTS):

# 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

Després actualitza el repositori i instal·la el paquet MongoDB amb l’ordre següent:

# apt update -y && apt install mongodb-org -y

Un cop completada la instal·lació, inicia el servei MongoDB i habilita’n l’inici quan es reiniciï el sistema:

# systemctl start mongod && systemctl enable mongod

A continuació, comprova la versió de MongoDB amb l’ordre següent:

# mongod --version

Aquest és el resultat que hauries de veure:

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 l’aplicació MERN

En primer lloc, hauràs de crear un directori per allotjar el projecte. Pots crear-lo amb l’ordre següent:

# mkdir project

A continuació, accedeix al directori del projecte i crea un fitxer package.json amb l’ordre següent:

# cd project && npm init -y

Després, instal·la Express, React i altres dependències per a l’aplicació amb l’ordre següent:

# 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

Després, crea un directori per emmagatzemar el codi:

# mkdir -p src/public

A continuació, crea un fitxer index.js amb un editor de text:

# nano src/index.js

I afegeix-hi el contingut següent:

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}`);
})();

Desa i tanca el fitxer i després crea un altre fitxer anomenat App.jsx:

# nano src/public/App.jsx

Afegeix-hi les línies següents:

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 nou, desa els canvis, tanca el fitxer i crea un fitxer index.html:

# nano src/public/index.html

Afegeix-hi les línies següents:

<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="UTF-8">
  <title>My First MERN Application</title>
  </head>
  <body>
  <div id="app"></div>
  </body>
</html>

Desa i tanca el fitxer. Després, crea un fitxer webpack.config.js per empaquetar el projecte:

# nano webpack.config.js

Amb el contingut següent:

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",
    }),
  ],
};

Després crea un fitxer .babelrc per compilar el codi React:

# nano .babelrc

Amb aquest contingut:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Crea un últim fitxer .env per definir la base de dades i el port de MongoDB:

# nano .env

El contingut d’aquest fitxer és:

PORT=8080
MONGODB=mongodb://localhost

I construeix l’aplicació amb l’ordre següent:

# npx webpack

Finalment, inicia l’aplicació amb l’ordre següent:

# node src/index.js

Un cop iniciada l’aplicació, hauries d’obtenir la sortida següent:

Connected to MongoDB
HTTP listening on 8080

Com a alternativa, pots utilitzar PM2 per iniciar l’aplicació:

pm2 start src/index.js && pm2 startup

Trobaràs més informació a: Com utilitzar PM2 per gestionar una aplicació en Node.js.

Accedir a l’aplicació MERN

En aquest punt, l’aplicació MERN està iniciada i escolta al port 8080 TCP. Hi pots accedir mitjançant l’URL http://your-server-ip:8080, però recorda primer crear una regla al tallafoc de Clouding per poder-hi accedir. Hauries de veure l’aplicació MERN a la pantalla següent:

Conclusió

Enhorabona! Has desplegat correctament una aplicació MERN a Ubuntu 22.04 o 24.04 LTS.

Ja pots començar a desenvolupar l’aplicació amb MERN. Esperem que aquest article t’hagi ajudat🙂. Recorda que, si tens consultes sobre aquesta qüestió o qualsevol altra relacionada amb els teus servidors a Clouding, pots escriure a soporte@clouding.io Som al teu costat per a tot el que necessitis!

Articles en aquesta secció