0

Tengo un problema con docker y bun, tengo una web y una api configuradas con BunJS. La web levanta un proyecto Basico con Astro y la api solo Bun. El problema que tengo es que no detecta los cambios en ningun archivo, ni el principal. He buscado todas las posibles soluciones en la web y no he conseguido que nada me funcione. Cabe destacar que si inicio los proyectos (/api o /web) de manera independiente (no dockerizado) si detecta el hotreload.

Dejare cada uno de los archivos y el enlace del proyecto:

Structure:

.
├── README.md
├── api
│   ├── Dockerfile
│   ├── bun.lockb
│   ├── package.json
│   ├── src
│   │   └── index.ts
│   └── tsconfig.json
├── docker-compose.yml
├── nginx
│   └── nginx.conf
└── web
    ├── Dockerfile
    ├── README.md
    ├── astro.config.mjs
    ├── bun.lockb
    ├── index.html
    ├── package.json
    ├── public
    │   └── favicon.svg
    ├── src
    │   ├── components
    │   │   ├── Card.astro
    │   │   ├── Post.vue
    │   │   ├── Posts.vue
    │   │   ├── atoms
    │   │   │   └── Button.vue
    │   │   ├── molecules
    │   │   ├── organisms
    │   │   └── templates
    │   ├── env.d.ts
    │   ├── layouts
    │   │   └── Layout.astro
    │   ├── pages
    │   │   ├── api
    │   │   │   └── posts
    │   │   │       ├── [id].ts
    │   │   │       └── index.ts
    │   │   ├── index.astro
    │   │   └── posts
    │   │       ├── [id].astro
    │   │       └── index.astro
    │   └── utils
    ├── tsconfig.json
    └── tsconfig.node.json

17 directories, 28 files
# Path: docker-compose.yml

version: '3.8'

networks:
  cv_network:
    driver: bridge

volumes:
  web_node_modules:
  api_node_modules:

services:
  web:
    container_name: cv_web
    build: web
    image: web
    restart: "no"
    networks:
      - cv_network
    volumes:
      - ./web/:/app
      - web_node_modules:/app/node_modules
    ports:
      - 3000:3000
    env_file:
      - project.env

  api:
    container_name: cv_api
    build: api
    image: api
    restart: "no"
    networks:
      - cv_network
    volumes:
      - ./api/:/app
      - api_node_modules:/app/node_modules
    ports:
      - 8000:8000

  nginx:
    container_name: cv_nginx
    image: nginx:1.25.2-alpine-slim
    networks:
      - cv_network
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
    depends_on:
      - web
      - api
    ports:
      - 7800:7800
# Path: api/Dockerfile

FROM oven/bun:1.0.3-slim

WORKDIR /api

COPY package*.json bun.lockb ./
RUN bun install
COPY . .

CMD [ "bun", "run", "dev" ]

Path: api/package.json

{
  "name": "bun_app",
  "version": "1.0.50",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "bun --watch run src/index.ts"
  },
  "dependencies": {
  },
  "devDependencies": {
    "bun-types": "1.0.3"
  },
  "module": "src/index.js"
}

// Path: api/src/index.ts

import { type Serve } from "bun";

type Middleware = (req: any, res: any, next: () => void) => void;
type RequestHandler = (req: any, res: any) => Response;

const loggerMiddleware: Middleware = (req, res, next) => {
  const url = new URL(req.url);
  const method = req.method;
  const currentTime = new Date().toISOString();

  console.log(`[${currentTime}] ${method} - ${url.pathname}`);
  next();
};

class Router {
  routes: { [method: string]: { [path: string]: RequestHandler } } = {};

  get(path: string, handler: RequestHandler) {
    this.addRoute("GET", path, handler);
  }

  post(path: string, handler: RequestHandler) {
    this.addRoute("POST", path, handler);
  }

  put(path: string, handler: RequestHandler) {
    this.addRoute("PUT", path, handler);
  }

  private addRoute(method: string, path: string, handler: RequestHandler) {
    if (!this.routes[method]) {
      this.routes[method] = {};
    }
    this.routes[method][path] = handler;
  }
}

class Server {
  middlewares: Middleware[] = [];
  routes: { [method: string]: { [path: string]: RequestHandler } } = {};

  use(middleware: Middleware) {
    this.middlewares.push(middleware);
  }

  get(path: string, handler: RequestHandler) {
    this.addRoute("GET", path, handler);
  }

  post(path: string, handler: RequestHandler) {
    this.addRoute("POST", path, handler);
  }

  // Agregar más métodos HTTP según sea necesario

  private addRoute(method: string, path: string, handler: RequestHandler) {
    if (!this.routes[method]) {
      this.routes[method] = {};
    }
    this.routes[method][path] = handler;
  }

  useRouter(path: string, router: Router) {
    for (const [method, routes] of Object.entries(router.routes)) {
      for (const [routePath, handler] of Object.entries(routes)) {
        const fullPath = path + routePath;
        this.addRoute(method, fullPath, handler);
      }
    }
  }

  async fetch(request: Request, server: Server): Promise<Response> {
    try {
      if (!request || !server) {
        console.error("Request o Server no definidos");
        return new Response("Internal Server Error", { status: 500 });
      }

      const url = new URL(request.url);
      const pathname = url.pathname;
      const method = request.method;

      let response: Response;

      // Ejecutamos los middlewares en orden
      for (const middleware of this.middlewares) {
        middleware(request, response, () => {});
      }

      if (this.routes[method] && this.routes[method][pathname]) {
        const handler = this.routes[method][pathname];
        response = handler(request, new Response(""));
      } else {
        throw new Error("Route not found"); // Lanza un error si la ruta no se encuentra
      }

      return response;
    } catch (error) {
      console.error(`Error: ${error.message}`);
      return new Response(error.message, { status: 500 });
    }
  }
}

const app = new Server();

app.use(loggerMiddleware);

// Agregar middlewares
app.use((req, res, next) => {
  console.log("Middleware 1");
  next();
});

// Agregar rutas
app.get("/", (req, res) => {
  res = new Response("Hello, world!", { status: 200 });
  return res;
});

const router = new Router();

router.get("", (req, res) => {
  return new Response(JSON.stringify({ message: "aaaaaaaaaa" }), {
    status: 200,
  });
});

router.post("", (req, res) => {
  return new Response(JSON.stringify({ message: "Router POST succeed" }), {
    status: 200,
  });
});

router.put("", (req, res) => {
  return new Response(JSON.stringify({ message: "Router PUT succeed" }), {
    status: 200,
  });
});

app.useRouter("/test", router);

// Iniciar el servidor
export default {
  port: 8000,
  fetch(req) {
    return app.fetch(req, app);
  },
  error(error: Error) {
    return new Response(`<pre>${error}\n${error.stack}</pre>`, {
      headers: {
        "Content-Type": "text/html",
      },
    });
  },
} satisfies Serve;

# Path: nginx/nginx.conf

worker_processes 1;

events {
  worker_connections 1024;
}

http {
  # proxy_cache_path /var/cache/nginx keys_zone=astro_ssg_cache:1m inactive=5m max_size=512m;

  upstream web {
    server web:3000;
  }

  upstream api {
    server api:8000;
  }

  server {
    gzip on;
    gzip_types text/css application/javascript application/json image/svg+xml;
    gzip_min_length 1000;

    listen 7800;
    server_name localhost;

    location / {
      proxy_pass http://web;
      proxy_http_version 1.1;
      # proxy_cache astro_ssg_cache;
      # proxy_cache_key $uri;
      # proxy_cache_valid 5m;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "Upgrade";
      proxy_set_header Host $host;
      proxy_redirect off;
    }
  }

  # Para la API
  server {
    listen 7800;
    server_name api.localhost;
    location / {
      proxy_pass http://api;  # Suponiendo que "api" es el nombre del servicio en docker-compose.yml
      # ... (otros ajustes de proxy aquí)
    }
  }

  # Para el panel de administración
  server {
    listen 7800;
    server_name admin.localhost;
    location / {
      proxy_pass http://web;  # Asumiendo que "admin" es otro servicio en docker-compose.yml
      # ... (otros ajustes de proxy aquí)
    }
  }

  # Para otros subdominios dinámicos
  server {
    listen 7800;
    server_name ~^(?<subdomain>.+)\.localhost$;
    location / {
      proxy_pass http://web;  # Redirige todos los demás subdominios al servicio "web"
      # ... (otros ajustes de proxy aquí)
    }
  }
}

Link to repo

  • SO: Windows 11
  • WSL2:
  • Distributor ID: Ubuntu
  • Description: Ubuntu 20.04.6 LTS
  • Release: 20.04
  • Codename: focal
2
  • 1
    Dios mío, A veces Docker la caga: 1. Configuración de volúmenes en Docker: En tu archivo docker-compose.yml, montas los directorios locales en los contenedores como volúmenes. Esto generalmente funciona bien para detectar cambios en los archivos. Sin embargo, en algunos casos puede haber problemas para sincronizar los cambios en diferentes sistemas de archivos, como Windows y WSL2. 2. ¿no estés utilizando reglas en tu sistema de archivos para ignorar ciertos tipos de archivos? 3. Asegúrate de que Docker esté configurado correctamente en WSL2... 4. ... Commented el 2 oct. 2023 a las 19:50
  • @RevolucionforMonica por ejemplo en el proyecto de Astro, si utilizo npm para levantar la web esta si sirve el hotreload pero si lo levanto con BunJs no hace el hotreload.
    – bypabloc_
    Commented el 4 oct. 2023 a las 14:50

2 respuestas 2

0

Yo tengo el mismo problema que tu

Creo que en el docker-compose te falta esto:

restart: unless-stopped
build:
   context: .

Yo lo tengo asi my-service-dev: container_name: my-service-dev restart: unless-stopped env_file: .env build: context: . args: - PORT=${PORT} ports: - "${PORT}:${PORT}" volumes: - .:/project - node_modules:/project/node_modules/

Después en el DockerFile, mirate el --watch y el --hot, porque en tu Dockerfile no tienes nada de eso.

Estoy siguiendo un ejemplo que no tiene que ver con bun pero sin con hotreload, espero que te sirva https://github.com/AlbertHernandez/express-typescript-service-skeleton/blob/main/Dockerfile

0

Solución al Problema de Hot Reload

Después de revisar los archivos, he encontrado las diferencias que estaban causando el problema con el Hot Reload. Aquí están los cambios necesarios para que todo funcione como se espera.

docker-compose.yml

Primero, en el archivo docker-compose.yml, necesité actualizar las rutas de los volúmenes para que coincidan con las rutas de trabajo en los contenedores.

Antes:

volumes:
  - ./web/:/app
  - web_node_modules:/app/node_modules

Después:

volumes:
  - ./web/:/web
  - web_node_modules:/web/node_modules

Dockerfile en web y api

package.json en api

Finalmente, en el package.json de la carpeta api, cambia el script dev para usar la opción --hot.

Antes:

"dev": "bun --watch run src/index.ts"

Después:

"dev": "bun --hot src/index.ts"

Resumen

  1. Actualicé las rutas de los volúmenes en docker-compose.yml.
  2. Modifica el script dev en api/package.json para usar --hot.

Con estos cambios, el Hot Reload funciona como se espera. 😎

Gracias Revolucion for Monica que me dió la idea en este comentario en el esSO

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.