use nginx to proxy browser request to collaboration-server service.

docker-compose.yml

@@ -1,27 +1,60 @@
+# name: musicblocks
+# services:
+#   musicblocks:
+#     build:
+#       # context: https://github.com/sugarlabs/musicblocks.git#test-collab
+#       context: ./
+#     ports:
+#       - "3000:3000"
+#     command: ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]
+#     # networks:
+#     #   - internal-network
+#     depends_on:
+#       - collaboration-server
+#     # env_file:
+#     #  - ./environment
+#   # planet-server:
+#   #    build:
+#   #        dockerfile: ../planet-server/Dockerfile
+#   #    ports:
+#   #      - "8000:8000"
+#   collaboration-server:
+#     # build: https://github.com/sugarlabs/collaboration-server.git#test-collab
+#     build: ../collaboration-server
+#     # build:
+#     #     dockerfile: ../collaboration-server/Dockerfile
+#     # volumes:
+#     #   - .:/collaboration-server
+#     # ports:
+#     #   - "8080:8080"
+#     expose:
+#       - "8080"
+#     environment:
+#       NODE_ENV: development
+#     #command: ["npm", "run", "server"]
+#     command: ["npm", "run", "server"]
+#     # networks:
+#     #   - internal-network
+# # networks:
+# #   internal-network:
+# #     driver: bridge
+#     # don't port map to external host but use docker's internl network settings to connect the internal services
+#     # inside the docker itself.
+
 name: musicblocks
 services:
   musicblocks:
-    build: 
+    build:
       context: https://github.com/sugarlabs/musicblocks.git#test-collab
-    ports: 
+    ports:
       - "3000:3000"
-    command: ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]
-    # env_file:
-    #  - ./environment
-  # planet-server:
-  #    build:
-  #        dockerfile: ../planet-server/Dockerfile
-  #    ports:
-  #      - "8000:8000"
+    depends_on:
+      - collaboration-server
+
   collaboration-server:
     build: https://github.com/sugarlabs/collaboration-server.git#test-collab
-    # build:
-    #     dockerfile: ../collaboration-server/Dockerfile
-    # volumes:
-    #   - .:/collaboration-server
-    ports:
-      - "8080:8080"
+    expose:
+      - "8080"
     environment:
       NODE_ENV: development
-    #command: ["npm", "run", "server"]
-    command: ["npm", "run", "server"]
+    command: ["npm", "run", "server"]

dockerfile

@@ -1,17 +1,33 @@
-# First stage: Build stage
-FROM python:latest AS build
+# # First stage: Build stage
+# FROM python:latest AS build
 
-WORKDIR /app
+# WORKDIR /app
 
-COPY . .
+# COPY . .
 
-# Second stage: Final stage
-FROM python:latest
+# # Second stage: Final stage
+# FROM python:latest
+
+# WORKDIR /app
+
+# COPY --from=build /app /app
 
+# EXPOSE 3000
+
+# CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]
+
+# First stage: Build stage
+FROM python:latest AS build
 WORKDIR /app
+COPY . .
 
-COPY --from=build /app /app
+# Second stage: Final stage
+FROM nginx:alpine
 
-EXPOSE 3000
+WORKDIR /usr/share/nginx/html
+# Copy your application files
+COPY --from=build /app .
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
-CMD ["python", "-m", "http.server", "3000", "--bind", "0.0.0.0"]
+EXPOSE 3000

js/collaboration/collaboration.js

@@ -24,8 +24,10 @@ class Collaboration {
         this.attempts = 0;
         this.socket = null;
         this.blockList = this.activity.blocks.blockList;
-        this.PORT = "8080";
-        this.COLLAB_HOST = "http://127.0.0.1";
+        // this.PORT = "8080"; // container's 8080
+        // this.COLLAB_HOST = "http://collaboration-server"; // it should reflect the service names of compose file
+        this.COLLAB_URL = "/"
+        // this.COLLAB_URL = "http://localhost:8080"
         this.hasCollaborationStarted = false;
         this.updatedProjectHtml = null;
         this.hasExitedCollaboration = false;
@@ -67,7 +69,8 @@ class Collaboration {
     // Make calls to the socket server
     makeConnection = (room_id, name) => {
         // connect to the local server
-        const socket = io(this.COLLAB_HOST.concat(":", this.PORT));
+        // const socket = io(this.COLLAB_HOST.concat(":", this.PORT));
+        const socket = io(this.COLLAB_URL);
         socket.on("connect", () => {
             this.socket = socket;
             try {

nginx.conf

@@ -0,0 +1,21 @@
+server {
+    listen 3000;
+    server_name localhost;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    # Proxy for Socket.IO and API requests
+    location /socket.io {
+        proxy_pass http://collaboration-server:8080;
+        proxy_http_version 1.1;
+        proxy_set_header Upgrade $http_upgrade;
+        proxy_set_header Connection "upgrade";
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+    }
+
+    # Serve static files
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}