my-app refactor to point node 22

Author: JaimeSalas

01-contenedores/contenedores-vi/contenedores-vi.sh

@@ -17,7 +17,7 @@ docker run -dit --name mysqldb \
  -e MYSQL_DATABASE=wpdb \
  -e MYSQL_USER=wp_user \
  -e MYSQL_PASSWORD=wp_pwd \
-  mysql:5.7
+  mysql:8.0
 
 #2.1 Esto habrá hecho que se genere un volumen nuevo llamado mysql_data
 docker volume ls
@@ -29,45 +29,46 @@ docker run -dit --name wordpress \
 -v wordpress_data:/var/www/html \
 -e WORDPRESS_DB_HOST=mysqldb:3306 \
 -e WORDPRESS_DB_USER=wp_user -e WORDPRESS_DB_PASSWORD=wp_pwd -e WORDPRESS_DB_NAME=wpdb \
--p 8000:80 wordpress:latest
+-p 8000:80 wordpress:6.6.2-php8.1-apache
 
 #Este es el contenido en el volumen wordpress_data
 docker exec wordpress ls -l /var/www/html
 
 #Si quisiera eliminar todo el proceso debería de hacer
-docker rm -f wordpress mysqldb && \
-docker network rm wordpress-network && \
-docker volume rm mysql_data wordpress_data
+docker kill wordpress mysqldb && \ 
+  docker rm wordpress mysqldb && \
+  docker network rm wordpress-network && \
+  docker volume rm mysql_data wordpress_data
 
 #Y volver a relanzar todo si quisiera volver a crearlo
 
 #Lo mismo pero con Docker Compose
 cat docker-compose.yml
 
-#Levantar la aplicación con docker-compose
-docker-compose up 
+#Levantar la aplicación con docker compose
+docker compose up 
 
 #Truco: 
-docker-compose up & #con el & al final te deja utilizar el terminal, además de ver la salida
+docker compose up & #con el & al final te deja utilizar el terminal, además de ver la salida
 
 #Ejecutar en segundo plano tu aplicación con Docker Compose
-docker-compose up -d 
+docker compose up -d 
 
 #Parar la aplicación con docker-compose
-docker-compose stop
+docker compose stop
 
 #Parar y eliminar
-docker-compose down
+docker compose down
 
 #Otro de los escenarios que te puedes encontrar es que quieras que cada vez que haces un compose up
 #se genere la imagen de tu app
 cd my-app
 
 #Ejecutar y genera la imagen de tu aplicación
-docker-compose up --build &
+docker compose up --build
 
 #Con docker compose puedes ver todas las aplicaciones que se están ejecutando
-docker-compose ps #Pero sólo se ven los contenedores del proyecto que está en la carpeta actual con el nombre actual.
+docker compose ps #Pero sólo se ven los contenedores del proyecto que está en la carpeta actual con el nombre actual.
 
 #Como siempre, puedes ver todos los contenedores con docker ps
 docker ps -a
@@ -76,10 +77,13 @@ docker ps -a
 docker ps -a --filter "label=com.docker.compose.project" -q | xargs docker inspect --format='{{index .Config.Labels "com.docker.compose.project"}}'| sort | uniq
 
 #Añadir un nombre a la aplicación
-docker-compose --project-name my_wordpress up -d
+docker compose --project-name my_wordpress up -d
 
 #Si quisieramos reiniciar la aplicación
-docker-compose -p my_wordpress restart
+docker compose -p my_wordpress restart
+
+#Para limpiar ahora necesitamos referenciar el 'proyecto'
+docker compose -p my_wordpress down
 
 # Docker Swarm #
 

01-contenedores/contenedores-vi/docker-compose.yml

@@ -1,7 +1,7 @@
-version: "3.9" 
 services:
+   
    db:
-     image: mysql:5.7
+     image: mysql:8.0
      volumes:
        - db_data:/var/lib/mysql
      restart: always
@@ -12,10 +12,11 @@ services:
        MYSQL_PASSWORD: wp_pwd
      networks: 
         - wordpress-network
+   
    wordpress:
      depends_on:
        - db
-     image: wordpress:latest
+     image: wordpress:6.6.2-php8.1-apache
      volumes:
       - wordpress_data:/var/www/html
      ports:
@@ -28,8 +29,10 @@ services:
        WORDPRESS_DB_NAME: wpdb
      networks: 
        - wordpress-network
+
 volumes:
     db_data: 
     wordpress_data: 
+
 networks:
     wordpress-network: 

01-contenedores/contenedores-vi/my-app/backend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.13-alpine
+FROM node:22-alpine
 
 WORKDIR /app
 

01-contenedores/contenedores-vi/my-app/backend/index.js

@@ -1,8 +1,9 @@
-const express = require('express'),
-    mongoose = require('mongoose'),
-    bodyParser = require('body-parser'),
-    cors = require('cors'),
-    app = express();
+const Topic = require("./models/topics");
+const express = require("express"),
+  mongoose = require("mongoose"),
+  bodyParser = require("body-parser"),
+  cors = require("cors"),
+  app = express();
 
 //configure CORS
 app.use(cors());
@@ -13,47 +14,64 @@ app.use(bodyParser.json());
 
 const port = process.env.PORT || 8080;
 
-mongoose.connect('mongodb://mongodb:27017', err => {
-    if (err)
-        throw err;
-    console.log('Connected to mongodb');
-});
+const delay = () =>
+  new Promise((res) => {
+    setTimeout(() => {
+      res();
+    }, 1000);
+  });
 
-//mongoDB service
-var Topic = require('./models/topics');
+const connect = async () => {
+  await delay();
+  try {
+    await mongoose.connect("mongodb://mongodb:27017/test");
+    console.log("connected to test");
+  } catch (error) {
+    console.error(error);
+  }
+};
 
 //Routes
-var router = express.Router();
-
-router.post('/topics', (req, res) => {
-    console.log('[POST] Topics');
+const router = express.Router();
 
-    var topic = new Topic();
-    topic.name = req.body.name;
+router.post("/topics", async (req, res) => {
+  console.log("[POST] Topics");
 
-    topic.save(err => {
-        if (err)
-            res.send(err);
+  const topic = new Topic();
+  topic.name = req.body.name;
 
-        res.json({ message: 'Topic created!' });
-    });
+  try {
+    const result = await topic.save();
+    console.log(result);
+    res.send(result);
+  } catch (error) {
+    console.error(error);
+    res.send(JSON.parse(error));
+  }
 });
 
-router.get('/topics', (req, res) => {
-    console.log('[GET] Topics');
+router.get("/topics", async (_, res) => {
+  console.log("[GET] Topics");
+  console.log(Topic);
 
-    Topic.find((err, topics) => {
-        if (err)
-            res.send(err);
-
-        res.json(topics);
-    });
+  try {
+    const collection = await Topic.find({});
+    const topics = collection.map((t) => ({
+      id: t._id.toString(),
+      name: t.name,
+    }));
+    res.send(topics);
+  } catch (error) {
+    console.error(err);
+    res.send(JSON.parse(error));
+  }
 });
 
 //all routes will be prefixed with /api
-app.use('/api', router);
+app.use("/api", router);
 
 //start the server
-app.listen(port, () => {
-    console.log(`Server up and running on port ${port}`);
-});
+app.listen(port, async () => {
+  console.log(`Server up and running on port ${port}`);
+  await connect();
+});

01-contenedores/contenedores-vi/my-app/backend/models/topics.js

@@ -3,7 +3,7 @@
 const mongoose = require('mongoose'),
     Schema = mongoose.Schema;
 
-var TopicSchema = new Schema({
+const TopicSchema = new Schema({
     name: String
 });
 

01-contenedores/contenedores-vi/my-app/backend/package.json

@@ -3,6 +3,9 @@
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
+  "engines": {
+    "node": "22.x.x"
+  },
   "scripts": {
     "start": "node index.js",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -14,6 +17,6 @@
     "body-parser": "^1.19.0",
     "cors": "^2.8.5",
     "express": "^4.17.1",
-    "mongoose": "^5.10.10"
+    "mongoose": "8.7.3"
   }
 }

01-contenedores/contenedores-vi/my-app/docker-compose.yml

@@ -1,15 +1,18 @@
-version: '3.9'
 services:
+
   frontend:
     build: 
       context: ./frontend
       # dockerfile: Dockerfile    
     deploy:
-      replicas: 2
+      # replicas: 2
+      replicas: 1
     ports:
-      - 3000
+      # - 3000
+      - 3000:8080
     depends_on:
       - backend
+
   backend:
     build: 
       context: ./backend      
@@ -18,5 +21,6 @@ services:
       - 8080:8080
     depends_on:
       - mongodb
+  
   mongodb:
     image: mongo:latest

01-contenedores/contenedores-vi/my-app/frontend/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ]
+}

01-contenedores/contenedores-vi/my-app/frontend/Dockerfile

@@ -1,4 +1,4 @@
-FROM node:10.13-alpine
+FROM node:22-alpine
 
 WORKDIR /app