Docker Deployment - AutoMFlows

Overview

AutoMFlows provides a production-ready Docker setup with multi-stage builds for optimal image size and performance. The Docker configuration builds both frontend and backend into a single container with Playwright browsers pre-installed.

Multi-Stage Build

Optimized build process with smaller image size

Playwright Ready

Chromium browser pre-installed and configured

Production Optimized

Only production dependencies included

Easy Deployment

One command to deploy with Docker Compose

Prerequisites

Before deploying with Docker, ensure you have:

Docker 20.10+ installed
Docker Compose 2.0+ (usually included with Docker Desktop)
At least 2GB RAM available for the container
10GB disk space for images and dependencies

Quick Start

Navigate to project root

cd autoMflows

Build and start with Docker Compose

docker-compose -f docker/docker-compose.yml up -d

This will:

Build the Docker image
Start the container
Expose the application on port 3000

Verify deployment

# Check container status
docker ps | grep automflows

# View logs
docker-compose -f docker/docker-compose.yml logs -f

Access the application

Open your browser to:

Application: http://localhost:3000
API Documentation: http://localhost:3000/api-docs

Docker Configuration

Dockerfile

The multi-stage Dockerfile is located at docker/Dockerfile:

docker/Dockerfile

# Multi-stage build for AutoMFlows

# Stage 1: Build shared package
FROM node:20-alpine AS shared-builder
WORKDIR /app
COPY shared/package.json shared/
COPY shared/tsconfig.json shared/
RUN cd shared && npm install
COPY shared/ ./shared/
RUN cd shared && npm run build

# Stage 2: Build backend
FROM node:20-alpine AS backend-builder
WORKDIR /app
COPY --from=shared-builder /app/shared/dist ./shared/dist
COPY backend/package.json backend/
COPY backend/tsconfig.json backend/
RUN cd backend && npm install
COPY backend/ ./backend/
RUN cd backend && npm run build

# Stage 3: Build frontend
FROM node:20-alpine AS frontend-builder
WORKDIR /app
COPY --from=shared-builder /app/shared/dist ./shared/dist
COPY frontend/package.json frontend/
COPY frontend/tsconfig.json frontend/
COPY frontend/vite.config.ts frontend/
COPY frontend/tailwind.config.js frontend/
COPY frontend/postcss.config.js frontend/
COPY frontend/index.html frontend/
RUN cd frontend && npm install
COPY frontend/ ./frontend/
RUN cd frontend && npm run build

# Stage 4: Production runtime
FROM node:20-alpine
WORKDIR /app

# Install Playwright browsers
RUN npx playwright install chromium
RUN npx playwright install-deps chromium

# Copy built files
COPY --from=shared-builder /app/shared/dist ./shared/dist
COPY --from=backend-builder /app/backend/dist ./backend/dist
COPY --from=backend-builder /app/backend/package.json ./backend/
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist

# Install production dependencies
WORKDIR /app/backend
RUN npm install --production

# Create screenshots directory
RUN mkdir -p /app/screenshots

# Expose port
EXPOSE 3000

# Set environment variables
ENV NODE_ENV=production
ENV PORT=3000

# Start server
CMD ["node", "dist/server.js"]

Docker Compose

The docker/docker-compose.yml file provides service configuration:

docker/docker-compose.yml

version: '3.8'

services:
  automflows:
    build:
      context: ..
      dockerfile: docker/Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
    volumes:
      - ./screenshots:/app/screenshots
    restart: unless-stopped

The context: .. directive means Docker builds from the project root, not the docker directory.

Build Process

The Dockerfile uses a multi-stage build to create an optimized production image:

Stage 1: Shared
Stage 2: Backend
Stage 3: Frontend
Stage 4: Runtime

Purpose: Build the shared package used by both frontend and backend

FROM node:20-alpine AS shared-builder
WORKDIR /app
COPY shared/package.json shared/
COPY shared/tsconfig.json shared/
RUN cd shared && npm install
COPY shared/ ./shared/
RUN cd shared && npm run build

Installs dependencies
Compiles TypeScript
Creates dist/ output

Purpose: Build the backend server

FROM node:20-alpine AS backend-builder
WORKDIR /app
COPY --from=shared-builder /app/shared/dist ./shared/dist
COPY backend/package.json backend/
COPY backend/tsconfig.json backend/
RUN cd backend && npm install
COPY backend/ ./backend/
RUN cd backend && npm run build

Copies shared package from Stage 1
Installs backend dependencies
Compiles backend TypeScript

Purpose: Build the frontend application

FROM node:20-alpine AS frontend-builder
WORKDIR /app
COPY --from=shared-builder /app/shared/dist ./shared/dist
# ... frontend build steps
RUN cd frontend && npm run build

Copies shared package from Stage 1
Installs frontend dependencies
Builds optimized production bundle with Vite

Purpose: Create minimal production image

FROM node:20-alpine
# Install Playwright browsers
RUN npx playwright install chromium
RUN npx playwright install-deps chromium

# Copy only built files
COPY --from=shared-builder /app/shared/dist ./shared/dist
COPY --from=backend-builder /app/backend/dist ./backend/dist
COPY --from=frontend-builder /app/frontend/dist ./frontend/dist

# Install only production dependencies
RUN npm install --production

Only includes compiled code
No development dependencies
Playwright Chromium pre-installed

Manual Docker Commands

If you prefer not to use Docker Compose:

Building the Image

# Build from project root
cd autoMflows
docker build -f docker/Dockerfile -t automflows:latest .

The -f docker/Dockerfile flag specifies the Dockerfile location, and . sets the build context to the project root.

Running the Container

# Run with default settings
docker run -d \
  --name automflows \
  -p 3000:3000 \
  automflows:latest

# Run with custom port
docker run -d \
  --name automflows \
  -p 8080:3000 \
  -e PORT=3000 \
  automflows:latest

# Run with volume for screenshots
docker run -d \
  --name automflows \
  -p 3000:3000 \
  -v $(pwd)/screenshots:/app/screenshots \
  automflows:latest

Container Management

# View logs
docker logs -f automflows

# Stop container
docker stop automflows

# Start container
docker start automflows

# Restart container
docker restart automflows

# Remove container
docker rm -f automflows

# Remove image
docker rmi automflows:latest

Environment Variables

Configure AutoMFlows using environment variables:

Variable	Default	Description
`NODE_ENV`	`production`	Node environment
`PORT`	`3000`	Server port
`HOST`	`localhost`	Server host
`LOG_LEVEL`	`info`	Logging level (debug, info, warn, error)

Setting Environment Variables

Docker Compose
Docker Run
Environment File

Edit docker/docker-compose.yml:

services:
  automflows:
    environment:
      - NODE_ENV=production
      - PORT=3000
      - LOG_LEVEL=debug

Pass via -e flags:

docker run -d \
  --name automflows \
  -p 3000:3000 \
  -e NODE_ENV=production \
  -e LOG_LEVEL=debug \
  automflows:latest

Create .env file:

.env

NODE_ENV=production
PORT=3000
LOG_LEVEL=info

Reference in docker-compose.yml:

services:
  automflows:
    env_file:
      - .env

Volume Mounts

Persist data using Docker volumes:

Screenshots Volume

docker-compose.yml

services:
  automflows:
    volumes:
      - ./screenshots:/app/screenshots

This mounts the local screenshots directory to persist workflow screenshots.

Custom Plugins Volume

docker-compose.yml

services:
  automflows:
    volumes:
      - ./screenshots:/app/screenshots
      - ./plugins:/app/plugins

Mount custom plugins for dynamic loading.

Named Volumes

For production, use named volumes:

docker-compose.yml

services:
  automflows:
    volumes:
      - screenshots:/app/screenshots
      - plugins:/app/plugins

volumes:
  screenshots:
  plugins:

Production Deployment

Using Docker Compose in Production

Create production compose file

Create docker-compose.prod.yml:

docker-compose.prod.yml

version: '3.8'

services:
  automflows:
    build:
      context: ..
      dockerfile: docker/Dockerfile
    ports:
      - "3000:3000"
    environment:
      - NODE_ENV=production
      - PORT=3000
      - LOG_LEVEL=info
    volumes:
      - screenshots:/app/screenshots
      - plugins:/app/plugins
    restart: always
    healthcheck:
      test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s

volumes:
  screenshots:
  plugins:

Deploy to production

docker-compose -f docker/docker-compose.prod.yml up -d

Monitor deployment

# View logs
docker-compose -f docker/docker-compose.prod.yml logs -f

# Check health
docker-compose -f docker/docker-compose.prod.yml ps

Behind Reverse Proxy (Nginx)

server {
    listen 80;
    server_name automflows.example.com;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

Development with Docker

For development with hot reload:

docker-compose.dev.yml

version: '3.8'

services:
  automflows-dev:
    build:
      context: ..
      dockerfile: docker/Dockerfile
      target: backend-builder  # Stop at build stage
    ports:
      - "3003:3003"  # Backend
      - "5173:5173"  # Frontend
    environment:
      - NODE_ENV=development
    volumes:
      - ../backend:/app/backend
      - ../frontend:/app/frontend
      - ../shared:/app/shared
      - /app/backend/node_modules
      - /app/frontend/node_modules
    command: npm run dev

Development mode is not recommended for production use. Use the production Dockerfile for deployments.

Troubleshooting

Build Failures

Out of Memory
Network Issues
Playwright Install Fails

Increase Docker memory allocation:

Docker Desktop → Settings → Resources → Memory
Increase to at least 4GB

Or build with more memory:

docker build --memory=4g -f docker/Dockerfile -t automflows:latest .

If npm install fails:

# Build with no cache
docker build --no-cache -f docker/Dockerfile -t automflows:latest .

# Use different npm registry
docker build \
  --build-arg NPM_REGISTRY=https://registry.npmjs.org/ \
  -f docker/Dockerfile \
  -t automflows:latest .

If Chromium installation fails:

# In Dockerfile, add more dependencies
RUN apk add --no-cache \
    chromium \
    nss \
    freetype \
    harfbuzz \
    ca-certificates \
    ttf-freefont

Runtime Issues

Container won’t start:

# Check logs
docker logs automflows

# Check if port is already in use
lsof -i :3000  # Unix
netstat -ano | findstr :3000  # Windows

# Run on different port
docker run -p 8080:3000 automflows:latest

Performance Optimization

# Add to Dockerfile for better performance

# Use production mode
ENV NODE_ENV=production

# Optimize Node.js
ENV NODE_OPTIONS="--max-old-space-size=2048"

# Enable Playwright optimizations
ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=0
ENV PLAYWRIGHT_BROWSERS_PATH=/app/.playwright

Monitoring and Logging

Docker Logs

# View real-time logs
docker-compose -f docker/docker-compose.yml logs -f

# View logs for specific service
docker logs automflows

# View last 100 lines
docker logs --tail 100 automflows

# View logs with timestamps
docker logs -t automflows

Health Checks

Add health check to docker-compose.yml:

services:
  automflows:
    healthcheck:
      test: ["CMD", "wget", "-q", "--spider", "http://localhost:3000/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 40s

Check health status:

docker inspect --format='{{.State.Health.Status}}' automflows

CI/CD Integration

GitHub Actions

.github/workflows/docker.yml

name: Docker Build and Push

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      
      - name: Build Docker image
        run: |
          docker build -f docker/Dockerfile -t automflows:${{ github.sha }} .
      
      - name: Test Docker image
        run: |
          docker run -d --name test automflows:${{ github.sha }}
          sleep 10
          docker logs test
          docker stop test

Next Steps

Building Plugins

Extend functionality with custom plugins

MCP Server

Enable AI-powered workflow automation

API Reference

Explore the REST API

Installation Guide

Installation and setup instructions

Get Started

Core Concepts

Guides

Advanced

​Overview

Multi-Stage Build

Playwright Ready

Production Optimized

Easy Deployment

​Prerequisites

​Quick Start

​Docker Configuration

​Dockerfile

​Docker Compose

​Build Process

​Manual Docker Commands

​Building the Image

​Running the Container

​Container Management

​Environment Variables

​Setting Environment Variables

​Volume Mounts

​Screenshots Volume

​Custom Plugins Volume

​Named Volumes

​Production Deployment

​Using Docker Compose in Production

​Behind Reverse Proxy (Nginx)

​Development with Docker

​Troubleshooting

​Build Failures

​Runtime Issues

​Performance Optimization

​Monitoring and Logging

​Docker Logs

​Health Checks

​CI/CD Integration

​GitHub Actions

​Next Steps

Building Plugins

MCP Server

API Reference

Installation Guide

Build docs developers (and LLMs) love

Overview

Prerequisites

Quick Start

Docker Configuration

Dockerfile

Docker Compose

Build Process

Manual Docker Commands

Building the Image

Running the Container

Container Management

Environment Variables

Setting Environment Variables

Volume Mounts

Screenshots Volume

Custom Plugins Volume

Named Volumes

Production Deployment

Using Docker Compose in Production

Behind Reverse Proxy (Nginx)

Development with Docker

Troubleshooting

Build Failures

Runtime Issues

Performance Optimization

Monitoring and Logging

Docker Logs

Health Checks

CI/CD Integration

GitHub Actions

Next Steps