feat(docker): add Traefik configuration for reverse proxy and TLS support

Author: Sma1lboy

docker/docker-compose.pord.yml

@@ -0,0 +1,29 @@
+version: '3'
+
+services:
+  reverse-proxy:
+    image: traefik:v3.3
+    command:
+      - '--api.insecure=true'
+      - '--providers.docker=true'
+      - '--providers.docker.exposedbydefault=false'
+      - '--providers.file.directory=/etc/traefik/config'
+      - '--providers.file.watch=true'
+      - '--entrypoints.web.address=:80'
+      - '--entrypoints.websecure.address=:443'
+    ports:
+      - '80:80'
+      - '443:443'
+      - '9001:8080'
+    volumes:
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /etc/letsencrypt:/etc/letsencrypt
+      - ./traefik-config:/etc/traefik/config
+    networks:
+      - traefik_network
+    extra_hosts:
+      - 'host.docker.internal:host-gateway'
+
+networks:
+  traefik_network:
+    driver: bridge

docker-compose.yml docker/docker-compose.ymldocker-compose.yml renamed to docker/docker-compose.yml

@@ -0,0 +1,58 @@
+http:
+  routers:
+    frontend:
+      rule: 'Host(`codefox.net`) && !PathPrefix(`/graphql`)'
+      entrypoints:
+        - websecure
+      tls: {}
+      service: frontend
+      priority: 10
+
+    backend:
+      rule: 'Host(`codefox.net`) && PathPrefix(`/graphql`)'
+      entrypoints:
+        - websecure
+      tls: {}
+      service: backend
+      priority: 20
+    redirect-all:
+      rule: 'hostregexp(`{host:.+}`)'
+      entrypoints:
+        - web
+      middlewares:
+        - redirect-to-https
+      service: noop
+
+  services:
+    frontend:
+      loadBalancer:
+        servers:
+          - url: 'http://host.docker.internal:3000'
+
+    backend:
+      loadBalancer:
+        servers:
+          - url: 'http://host.docker.internal:8080'
+
+    noop:
+      loadBalancer:
+        servers:
+          - url: 'http://localhost:9000'
+
+  middlewares:
+    redirect-to-https:
+      redirectScheme:
+        scheme: https
+        permanent: true
+
+    cors:
+      headers:
+        accessControlAllowMethods:
+          - GET
+          - POST
+          - PUT
+          - DELETE
+          - OPTIONS
+        accessControlAllowHeaders:
+          - Content-Type
+          - Authorization

docker/traefik-config/services.yml

@@ -0,0 +1,4 @@
+tls:
+  certificates:
+    - certFile: /etc/letsencrypt/live/codefox.net/fullchain.pem
+      keyFile: /etc/letsencrypt/live/codefox.net/privkey.pem

docker/traefik-config/tls.yml

@@ -7,6 +7,7 @@ import puppetter from 'puppeteer';
 import { useMutation } from '@apollo/client/react/hooks/useMutation';
 import { toast } from 'sonner';
 import { UPDATE_PROJECT_PHOTO_URL } from '@/graphql/request';
+import { TLS } from '@/utils/const';
 
 const runningContainers = new Map<
   string,
@@ -147,14 +148,26 @@ async function buildAndRunDocker(
         console.log(`Running Docker container: ${containerName}`);
 
         // 3. Run the Docker container
-        const runCommand = `docker run -d --name ${containerName} -l "traefik.enable=true" \
+        let runCommand;
+        if (TLS) {
+          runCommand = `docker run -d --name ${containerName} -l "traefik.enable=true" \
         -l "traefik.http.routers.${subdomain}.rule=Host(\\"${domain}\\")" \
         -l "traefik.http.routers.${subdomain}.entrypoints=websecure" \
         -l "traefik.http.routers.${subdomain}.tls=true" \
         -l "traefik.http.services.${subdomain}.loadbalancer.server.port=5173" \
         --network=codefox_traefik_network -p ${exposedPort}:5173 \
         -v "${directory}:/app" \
         ${imageName}`;
+        } else {
+          runCommand = `docker run -d --name ${containerName} -l "traefik.enable=true" \
+        -l "traefik.http.routers.${subdomain}.rule=Host(\\"${domain}\\")" \
+        -l "traefik.http.routers.${subdomain}.entrypoints=web" \
+        -l "traefik.http.services.${subdomain}.loadbalancer.server.port=5173" \
+        --network=codefox_traefik_network -p ${exposedPort}:5173 \
+        -v "${directory}:/app" \
+        ${imageName}`;
+        }
+
         console.log(`Executing run command: ${runCommand}`);
 
         exec(runCommand, (runErr, runStdout, runStderr) => {

frontend/src/app/api/runProject/route.ts

@@ -12,6 +12,7 @@ import {
   ZoomOut,
 } from 'lucide-react';
 import puppeteer from 'puppeteer';
+import { URL_PROTOCOL_PREFIX } from '@/utils/const';
 
 export default function WebPreview() {
   const { curProject, getWebUrl } = useContext(ProjectContext);
@@ -41,7 +42,7 @@ export default function WebPreview() {
       lastProjectPathRef.current = projectPath;
 
       if (containerRef.current?.projectPath === projectPath) {
-        setBaseUrl(`https://${containerRef.current.domain}`);
+        setBaseUrl(`${URL_PROTOCOL_PREFIX}://${containerRef.current.domain}`);
         return;
       }
 
@@ -52,7 +53,7 @@ export default function WebPreview() {
           domain,
         };
 
-        const baseUrl = `https://${domain}`;
+        const baseUrl = `${URL_PROTOCOL_PREFIX}://${domain}`;
         console.log('baseUrl:', baseUrl);
         setBaseUrl(baseUrl);
         setDisplayPath('/');

frontend/src/components/chat/code-engine/web-view.tsx

@@ -5,3 +5,8 @@
  */
 export const URL_PROTOCOL_PREFIX =
   process.env.TLS == 'false' ? 'http' : 'https';
+
+/**
+ * Validate if the current environment is using TLS
+ */
+export const TLS = process.env.TLS == 'true';