diff --git a/docker/.dockerignore b/docker/.dockerignore new file mode 100644 index 0000000000..7939f9a169 --- /dev/null +++ b/docker/.dockerignore @@ -0,0 +1,36 @@ +# Git files (not needed for build) +.git/ + +# Build outputs (will be regenerated during Docker build) +out/ + +# Large Chrome binaries (not needed for build) +third_party/chrome/ + +# Node modules (will be installed fresh during build) +node_modules/ +**/node_modules/ + +# IDE and temp files +.vscode/ +.idea/ +*.swp +*.swo +*~ +.DS_Store + +# Log files +*.log +logs/ +chrome_logs*.txt + +# Local development files +.env +.env.local +test-server.pid + +# Docker files themselves (prevent recursion) +docker/ +Dockerfile +docker-compose.yml +.dockerignore \ No newline at end of file diff --git a/docker/Dockerfile b/docker/Dockerfile new file mode 100644 index 0000000000..bcac1614e8 --- /dev/null +++ b/docker/Dockerfile @@ -0,0 +1,84 @@ +# Multi-stage build for Chrome DevTools Frontend +# Stage 1: Builder - Use x86-64 for build compatibility +FROM --platform=linux/amd64 ubuntu:22.04 AS builder + +# Install required packages for the build +RUN apt-get update && apt-get install -y \ + curl \ + git \ + python3 \ + python3-pip \ + python-is-python3 \ + wget \ + unzip \ + lsb-release \ + sudo \ + ca-certificates \ + gnupg \ + && rm -rf /var/lib/apt/lists/* + +# Install Node.js 18.x (LTS) +RUN curl -fsSL https://deb.nodesource.com/setup_18.x | bash - && \ + apt-get install -y nodejs && \ + rm -rf /var/lib/apt/lists/* + +# Set up working directory +WORKDIR /workspace + +# Copy the entire repository +COPY . . + +# Clone depot_tools if not exists and add to PATH +RUN if [ ! -d "third_party/depot_tools" ]; then \ + git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git third_party/depot_tools; \ + fi + +# Set PATH to include depot_tools +ENV PATH="/workspace/third_party/depot_tools:${PATH}" + +# Set environment variables to bypass CIPD issues +ENV VPYTHON_BYPASS="manually managed python not supported by chrome operations" +ENV DEPOT_TOOLS_UPDATE=0 + +# Download Node.js binary for the expected path (x86-64) +RUN mkdir -p third_party/node/linux && \ + cd third_party/node/linux && \ + wget -q https://nodejs.org/dist/v18.20.0/node-v18.20.0-linux-x64.tar.xz && \ + tar -xf node-v18.20.0-linux-x64.tar.xz && \ + mv node-v18.20.0-linux-x64 node-linux-x64 && \ + rm -rf node-v18.20.0-linux-x64.tar.xz + +# Download correct ninja binary for x86-64 +RUN rm -rf third_party/ninja && \ + mkdir -p third_party/ninja && \ + wget -O /tmp/ninja.zip https://github.com/ninja-build/ninja/releases/download/v1.11.1/ninja-linux.zip && \ + unzip -o /tmp/ninja.zip -d third_party/ninja/ && \ + chmod +x third_party/ninja/ninja && \ + rm /tmp/ninja.zip + +# Create a simple python3 wrapper for vpython3 +RUN echo '#!/bin/bash\nexec python3 "$@"' > /usr/local/bin/vpython3 && \ + chmod +x /usr/local/bin/vpython3 + +# Run npm install and build +RUN npm install && \ + npm run build + +# Stage 2: Production +FROM nginx:alpine + +# Copy only the built frontend files from builder stage +COPY --from=builder /workspace/out/Default/gen/front_end /usr/share/nginx/html + +# Copy nginx configuration +COPY docker/nginx.conf /etc/nginx/conf.d/default.conf + +# Expose port 8000 to match the original Python server port +EXPOSE 8000 + +# Health check +HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ + CMD wget --no-verbose --tries=1 --spider http://localhost:8000/ || exit 1 + +# Start nginx +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/docker/README.md b/docker/README.md new file mode 100644 index 0000000000..379527aceb --- /dev/null +++ b/docker/README.md @@ -0,0 +1,195 @@ +# Docker Setup for Chrome DevTools Frontend + +This directory contains Docker configuration files for building and running the Chrome DevTools Frontend in a containerized environment. + +## Overview + +The Docker setup uses a multi-stage build process: +1. **Build Stage**: Compiles the DevTools frontend using the full development environment +2. **Production Stage**: Serves only the built files using Nginx (lightweight, ~50MB final image) + +## Prerequisites + +- Docker Engine 20.10+ installed +- Docker Compose v2.0+ (optional, for easier management) +- At least 8GB of available disk space for the build process +- 4GB+ RAM recommended for building + +## Quick Start + +### Building the Docker Image + +From the repository root directory: + +```bash +# Build the Docker image +docker build -f docker/Dockerfile -t devtools-frontend . + +# Or use docker-compose (recommended) +docker-compose -f docker/docker-compose.yml build +``` + +### Running the Container + +```bash +# Using docker run +docker run -d -p 8000:8000 --name devtools-frontend devtools-frontend + +# Or using docker-compose (recommended) +docker-compose -f docker/docker-compose.yml up -d +``` + +The DevTools will be available at: http://localhost:8000 + +### Accessing DevTools + +Once the container is running, open Chrome or Chromium with: + +```bash +# macOS +/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --custom-devtools-frontend=http://localhost:8000/ + +# Linux +google-chrome --custom-devtools-frontend=http://localhost:8000/ + +# Windows +chrome.exe --custom-devtools-frontend=http://localhost:8000/ +``` + +## File Structure + +``` +docker/ +├── Dockerfile # Multi-stage build configuration +├── .dockerignore # Files to exclude from Docker context +├── nginx.conf # Nginx server configuration +├── docker-compose.yml # Docker Compose configuration +└── README.md # This file +``` + +## Advanced Usage + +### Development Mode + +For development with local file changes: + +1. Build the project locally first: +```bash +npm run build +``` + +2. Run the container with volume mount: +```bash +docker run -d -p 8000:8000 \ + -v $(pwd)/out/Default/gen/front_end:/usr/share/nginx/html:ro \ + --name devtools-frontend-dev \ + devtools-frontend +``` + +Or uncomment the volume mount in `docker-compose.yml`. + +### Custom Port + +To run on a different port: + +```bash +# Using docker run +docker run -d -p 9000:8000 devtools-frontend + +# Using docker-compose +DEVTOOLS_PORT=9000 docker-compose -f docker/docker-compose.yml up -d +``` + +Then update your Chrome launch command accordingly. + +### Building with Cache + +To speed up rebuilds, Docker automatically caches layers. To force a fresh build: + +```bash +docker build -f docker/Dockerfile --no-cache -t devtools-frontend . +``` + +### Viewing Logs + +```bash +# Using docker +docker logs devtools-frontend + +# Using docker-compose +docker-compose -f docker/docker-compose.yml logs -f +``` + +### Stopping the Container + +```bash +# Using docker +docker stop devtools-frontend +docker rm devtools-frontend + +# Using docker-compose +docker-compose -f docker/docker-compose.yml down +``` + +## Troubleshooting + +### Build Fails + +If the build fails: +1. Ensure you have enough disk space (8GB+ free) +2. Check Docker memory limits (4GB+ recommended) +3. Try building with `--no-cache` flag +4. Check the build logs for specific errors + +### Container Won't Start + +1. Check if port 8000 is already in use: + ```bash + lsof -i :8000 # macOS/Linux + netstat -an | findstr :8000 # Windows + ``` + +2. View container logs: + ```bash + docker logs devtools-frontend + ``` + +### DevTools Not Loading + +1. Verify the container is running: + ```bash + docker ps + ``` + +2. Check Nginx is serving files: + ```bash + curl http://localhost:8000/ + ``` + +3. Ensure Chrome is launched with the correct flag + +## Performance + +- **Build time**: ~10-20 minutes (first build, depending on system) +- **Image size**: ~50MB (production image with Nginx) +- **Memory usage**: ~50-100MB at runtime +- **Startup time**: <5 seconds + +## Security Notes + +- The Nginx configuration includes security headers +- CORS is enabled for DevTools functionality +- The container runs as non-root user (nginx) +- No sensitive data is included in the final image + +## Contributing + +When modifying the Docker setup: +1. Test builds locally before committing +2. Update this README if configuration changes +3. Keep the final image size minimal +4. Follow Docker best practices for multi-stage builds + +## License + +Same as the Chrome DevTools Frontend project - BSD-3-Clause \ No newline at end of file diff --git a/docker/docker-compose.yml b/docker/docker-compose.yml new file mode 100644 index 0000000000..55a144350f --- /dev/null +++ b/docker/docker-compose.yml @@ -0,0 +1,35 @@ +version: '3.8' + +services: + devtools-frontend: + build: + context: .. + dockerfile: docker/Dockerfile + image: devtools-frontend:latest + container_name: devtools-frontend + ports: + - "8000:8000" + restart: unless-stopped + volumes: + # For development: mount the built files directly (optional) + # Uncomment the line below to use local files instead of container files + # - ../out/Default/gen/front_end:/usr/share/nginx/html:ro + environment: + - NGINX_HOST=localhost + - NGINX_PORT=8000 + healthcheck: + test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8000/"] + interval: 30s + timeout: 10s + retries: 3 + start_period: 40s + networks: + - devtools-network + +networks: + devtools-network: + driver: bridge + +# Optional: Add a development configuration +# Use: docker-compose -f docker/docker-compose.yml -f docker/docker-compose.dev.yml up +# Create docker-compose.dev.yml for development-specific overrides \ No newline at end of file diff --git a/docker/nginx.conf b/docker/nginx.conf new file mode 100644 index 0000000000..87db06c52c --- /dev/null +++ b/docker/nginx.conf @@ -0,0 +1,72 @@ +server { + listen 8000; + listen [::]:8000; + server_name localhost; + + # Root directory for DevTools frontend + root /usr/share/nginx/html; + index inspector.html devtools_app.html index.html; + + # Compression + gzip on; + gzip_vary on; + gzip_min_length 1024; + gzip_types text/plain text/css text/xml text/javascript application/javascript application/xml+rss application/json application/wasm; + + # Security headers + add_header X-Frame-Options "SAMEORIGIN" always; + add_header X-Content-Type-Options "nosniff" always; + add_header X-XSS-Protection "1; mode=block" always; + + # CORS headers for DevTools + add_header Access-Control-Allow-Origin "*" always; + add_header Access-Control-Allow-Methods "GET, POST, OPTIONS" always; + add_header Access-Control-Allow-Headers "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range" always; + + # Handle OPTIONS requests + if ($request_method = 'OPTIONS') { + return 204; + } + + # Cache control for static assets + location ~* \.(jpg|jpeg|png|gif|ico|css|js|svg|woff|woff2|ttf|eot|avif)$ { + expires 1d; + add_header Cache-Control "public, immutable"; + } + + # Specific handling for WebAssembly files + location ~ \.wasm$ { + add_header Content-Type application/wasm; + } + + # JSON files + location ~ \.json$ { + add_header Content-Type application/json; + } + + # Main location + location / { + try_files $uri $uri/ /index.html; + } + + # Specific paths for DevTools + location /front_end/ { + alias /usr/share/nginx/html/; + try_files $uri $uri/ =404; + } + + # Error pages + error_page 404 /404.html; + location = /404.html { + internal; + } + + error_page 500 502 503 504 /50x.html; + location = /50x.html { + internal; + } + + # Disable access logs for performance (can be enabled for debugging) + access_log off; + error_log /var/log/nginx/error.log warn; +} \ No newline at end of file