Merge pull request #32 from bytebot-ai/codex/move-urls-behind-api-routes-and-proxy-websockets

Proxy agent via Next API

Author: atupem

infrastructure/docker/docker-compose.yml

@@ -57,14 +57,16 @@ services:
       context: ../../packages/
       dockerfile: bytebot-ui/Dockerfile
       args:
-        - NEXT_PUBLIC_BYTEBOT_AGENT_BASE_URL=${BYTEBOT_AGENT_BASE_URL:-http://localhost:9991}
-        - NEXT_PUBLIC_BYTEBOT_DESKTOP_VNC_URL=${BYTEBOT_DESKTOP_VNC_URL:-ws://localhost:9990/websockify}
+        - BYTEBOT_AGENT_BASE_URL=${BYTEBOT_AGENT_BASE_URL:-http://localhost:9991}
+        - BYTEBOT_DESKTOP_VNC_URL=${BYTEBOT_DESKTOP_VNC_URL:-ws://localhost:9990/websockify}
     container_name: bytebot-ui
     restart: unless-stopped
     ports:
       - "9992:9992"
     environment:
       - NODE_ENV=production
+      - BYTEBOT_AGENT_BASE_URL=${BYTEBOT_AGENT_BASE_URL:-http://bytebot-agent:9991}
+      - BYTEBOT_DESKTOP_VNC_URL=${BYTEBOT_DESKTOP_VNC_URL:-ws://bytebotd:9990/websockify}
     depends_on:
       - bytebot-agent
     networks:

packages/bytebot-agent/src/main.ts

@@ -15,7 +15,7 @@ async function bootstrap() {
 
     // Enable CORS
     app.enableCors({
-      origin: "*",
+      origin: 'http://localhost:9992',
       methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
       credentials: true,
     });

packages/bytebot-agent/src/tasks/tasks.gateway.ts

@@ -11,7 +11,7 @@ import { Injectable } from '@nestjs/common';
 @Injectable()
 @WebSocketGateway({
   cors: {
-    origin: '*',
+    origin: 'http://localhost:9992',
     methods: ['GET', 'POST'],
   },
 })
@@ -54,4 +54,4 @@ export class TasksGateway implements OnGatewayConnection, OnGatewayDisconnect {
   emitTaskDeleted(taskId: string) {
     this.server.emit('task_deleted', taskId);
   }
-}
+}

packages/bytebot-ui/Dockerfile

@@ -2,12 +2,12 @@
 FROM node:20-alpine
 
 # Declare build arguments
-ARG NEXT_PUBLIC_BYTEBOT_AGENT_BASE_URL
-ARG NEXT_PUBLIC_BYTEBOT_DESKTOP_VNC_URL
+ARG BYTEBOT_AGENT_BASE_URL
+ARG BYTEBOT_DESKTOP_VNC_URL
 
 # Set environment variables for the build process
-ENV NEXT_PUBLIC_BYTEBOT_AGENT_BASE_URL=${NEXT_PUBLIC_BYTEBOT_AGENT_BASE_URL}
-ENV NEXT_PUBLIC_BYTEBOT_DESKTOP_VNC_URL=${NEXT_PUBLIC_BYTEBOT_DESKTOP_VNC_URL}
+ENV BYTEBOT_AGENT_BASE_URL=${BYTEBOT_AGENT_BASE_URL}
+ENV BYTEBOT_DESKTOP_VNC_URL=${BYTEBOT_DESKTOP_VNC_URL}
 
 # Create app directory
 WORKDIR /app

packages/bytebot-ui/next.config.ts

@@ -3,6 +3,14 @@ import type { NextConfig } from "next";
 const nextConfig: NextConfig = {
   /* config options here */
   transpilePackages: ["@bytebot/shared"],
+  async rewrites() {
+    return [
+      {
+        source: "/api/proxy/websockify",
+        destination: "http://localhost:9990/websockify",
+      },
+    ];
+  },
 };
 
 export default nextConfig;

packages/bytebot-ui/package-lock.json

@@ -3,9 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev -p 9992",
+    "dev": "tsx server.ts",
     "build": "npm run build --prefix ../shared && next build",
-    "start": "next start -p 9992",
+    "start": "tsx server.ts",
     "lint": "next lint"
   },
   "dependencies": {

packages/bytebot-ui/package.json

@@ -0,0 +1,78 @@
+import express from "express";
+import { createProxyMiddleware } from "http-proxy-middleware";
+import next from "next";
+import { createServer } from "http";
+import dotenv from "dotenv";
+
+// Load environment variables
+dotenv.config();
+
+const dev = process.env.NODE_ENV !== "production";
+const hostname = process.env.HOSTNAME || "localhost";
+const port = parseInt(process.env.PORT || "9992", 10);
+
+// Backend URLs
+const BYTEBOT_AGENT_BASE_URL = process.env.BYTEBOT_AGENT_BASE_URL;
+const BYTEBOT_DESKTOP_VNC_URL = process.env.BYTEBOT_DESKTOP_VNC_URL;
+
+const app = next({ dev, hostname, port });
+
+app
+  .prepare()
+  .then(() => {
+    const handle = app.getRequestHandler();
+    const nextUpgradeHandler = app.getUpgradeHandler();
+
+    const expressApp = express();
+    const server = createServer(expressApp);
+
+    // WebSocket proxy for Socket.IO connections to backend
+    const tasksProxy = createProxyMiddleware({
+      target: BYTEBOT_AGENT_BASE_URL,
+      ws: true,
+      pathRewrite: { "^/api/proxy/tasks": "/socket.io" },
+    });
+
+    // WebSocket proxy for VNC websockify
+    // const vncProxy = createProxyMiddleware({
+    //   target: BYTEBOT_DESKTOP_VNC_URL,
+    //   ws: true,
+    //   pathRewrite: (path) =>
+    //     path.replace(/^\/api\/proxy\/websockify/, "/websockify"),
+    // });
+
+    // Apply HTTP proxies
+    expressApp.use("/api/proxy/tasks", tasksProxy);
+    // expressApp.use("/api/proxy/websockify", vncProxy);
+
+    // Handle all other requests with Next.js
+    expressApp.all("*", (req, res) => handle(req, res));
+
+    // Properly upgrade WebSocket connections
+    server.on("upgrade", (request, socket, head) => {
+      const { pathname } = new URL(
+        request.url!,
+        `http://${request.headers.host}`,
+      );
+
+      if (pathname.startsWith("/api/proxy/tasks")) {
+        return tasksProxy.upgrade(request, socket as any, head);
+      }
+
+      // if (pathname.startsWith("/api/proxy/websockify")) {
+      //   console.log(`[UPGRADE] ${pathname}`);
+      //   return vncProxy.upgrade(request, socket as any, head);
+      // }
+      nextUpgradeHandler(request, socket, head);
+    });
+
+    server.listen(port, hostname, () => {
+      console.log(`> Ready on http://${hostname}:${port}`);
+      console.log(`> Proxying tasks to: ${BYTEBOT_AGENT_BASE_URL}`);
+      console.log(`> Proxying VNC to: ${BYTEBOT_DESKTOP_VNC_URL}`);
+    });
+  })
+  .catch((err) => {
+    console.error("Server failed to start:", err);
+    process.exit(1);
+  });