Com implementar MERN (MongoDB, Express, React i Node.js) a Ubuntu 20.04 LTS

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

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

• MongoDB és una base de dades simple i orientada a objectes que s'utilitza per a l'emmagatzematge de dades de gran mida.
• 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 al desenvolupament d'aplicacions web front-end.
• Node JS és un entorn d'execució de JavaScript que permet escriure en JavaScript des del costat del servidor.

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

Requisits

• Un servidor que funcioni amb Ubuntu 20.04 LTS.
• Ús de l'usuari root o d'un usuari amb permisos per executar sudo su.

Instal·lar Node.js

Per defecte, l'última versió de Node.js no està inclosa al repositori d'Ubuntu. Per tant, hauràs d'afegir el repositori de fonts de Node al teu sistema.

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

apt-get install curl gnupg2 -y

A continuació, descarrega i afegeix la clau GPG d'origen de Node i el repositori amb l'ordre següent:

wget -qO- https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -

echo 'deb https://deb.nodesource.com/node_16.x focal main' | tee -a /etc/apt/sources.list

Posteriorment, actualitza el repositori amb l'ordre següent:

apt-get update -y

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

apt-get install nodejs -y

Un cop instal·lat el paquet Node.js, pots verificar la versió amb l'ordre següent:

node --version

Aquest és el resultat que hauries de veure:

v16.8.0

Instal·la el servidor MongoDB

Per defecte, l'última versió de MongoDB tampoc no està inclosa al repositori d'Ubuntu. Per tant, també hauràs d'afegir el repositori oficial de MongoDB al teu sistema.

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

wget -qO- https://www.mongodb.org/static/pgp/server-4.4.asc | apt-key add -

A continuació, afegeix el repositori MongoDB utilitzant l'ordre següent:

echo 'deb [arch=amd64] https://repo.mongodb.org/apt/ubuntu focal/mongodb-org/4.4 multiverse' | tee -a /etc/apt/sources.list

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

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

Un cop completada la instal·lació, inicia el servei MongoDB i permet que s'iniciï en reiniciar el sistema:

systemctl start mongod && systemctl enable mongod

A continuació, verifica la versió de MongoDB utilitzant l'ordre següent:

mongo --version

Aquest és el resultat que hauries de veure:

MongoDB shell version v4.4.8
Build Info: {
     "version": "4.4.8",
     "gitVersion": "83b8bb8b6b325d8d8d3dfd2ad9f744bdad7d6ca0",
     "openSSLVersion": "OpenSSL 1.1.1f 31 Mar 2020",
     "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 teu projecte. Pots crear-lo fent servir 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

Posteriorment, instal·la Express, React i altres dependències per a l'aplicació utilitzant 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

Després, crea un directori per emmagatzemar el teu 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 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 tancant 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. Posteriorment, crea un fitxer webpack.config.js per agrupar 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

Accedir a l'aplicació MERN

En aquest punt, l'aplicació MERN està iniciada i a l'escolta pel port 8080 TCP. Pots accedir-hi fent servir la URL http://your-server-ip:8080, però recorda primer crear una regla al Firewall de Clouding per poder-hi accedir. Hauries de veure la teva aplicació MERN a la pantalla següent:

Conclusió

Enhorabona! Has desplegat amb èxit una aplicació MERN a Ubuntu 20.04 LTS.

Ja pots començar a desenvolupar l'aplicació utilitzant MERN.