How to Deploy social-auto-upload Using Docker: Complete Guide

Deploy social-auto-upload using Docker by building its multi-stage image that bundles the Vue.js frontend and Flask backend, then running it with volume mounts for persistent data on port 5409.

social-auto-upload is an open-source automation tool for uploading videos to social platforms using Playwright browser automation. The official Docker configuration packages the Vue.js frontend and Python Flask backend into a single container, eliminating the need to manage Node.js and Python environments separately. This guide explains the exact steps to build and run the container based on the repository's multi-stage Dockerfile.

Understanding the Multi-Stage Build Process

The Dockerfile in the repository root uses a two-stage build strategy to optimize image size and separate build dependencies from runtime requirements.

Stage 1: Building the Vue.js Frontend

The first stage starts from node:22.21.1 and compiles the frontend assets located in sau_frontend/. According to the source code at Dockerfile lines 1-20, this stage:

• Switches the npm registry to a China mirror for faster dependency downloads
• Installs Node.js dependencies and runs npm run build
• Generates static files (index.html and the assets/ directory) for the Vue.js application

These compiled assets are preserved for the final stage using Docker's multi-stage copy mechanism.

Stage 2: Python Runtime and Playwright

The second stage uses python:3.10.19 as the base image. As implemented in Dockerfile lines 22-50, it installs:

• System libraries required for Playwright browser automation
• Python dependencies from requirements.txt using a Tsinghua PyPI mirror
• Headless Chromium browser binaries for Playwright

The final image copies the entire repository into /app, imports the compiled frontend assets from Stage 1, creates the default configuration file, and exposes port 5409.

Building the Docker Image

Clone the repository and build the image from the project root:

git clone https://github.com/dreammis/social-auto-upload.git
cd social-auto-upload
docker build -t social-auto-upload:latest .

The build process takes several minutes as it compiles the Vue frontend and downloads Chromium for Playwright.

Running the Container

Basic Deployment

Run the container with port forwarding and persistent volumes:

# Create local directories for data persistence

mkdir -p data/videoFile data/cookiesFile data/db

docker run -d \
  --name sau \
  -p 5409:5409 \
  -v "$(pwd)/data/videoFile":/app/videoFile \
  -v "$(pwd)/data/cookiesFile":/app/cookiesFile \
  -v "$(pwd)/data/db":/app/db \
  social-auto-upload:latest

This command:

• Maps port 5409 on your host to the Flask server inside the container (as defined in sau_backend.py lines 16-18)
• Mounts three local directories to preserve uploaded videos, browser cookies, and the SQLite database across container restarts
• Runs in detached mode (-d)

Custom Configuration Deployment

To override default settings such as LOCAL_CHROME_PATH, mount a custom configuration file:

docker run -d \
  --name sau \
  -p 5409:5409 \
  -v "$(pwd)/data/videoFile":/app/videoFile \
  -v "$(pwd)/data/cookiesFile":/app/cookiesFile \
  -v "$(pwd)/data/db":/app/db \
  -v "$(pwd)/my_conf.py":/app/conf.py \
  social-auto-upload:latest

The container uses conf.example.py as a template during the build process (lines 52-64 of the Dockerfile), but a mounted conf.py takes precedence at runtime.

Understanding the Backend Entry Point

The container executes python sau_backend.py on startup. This Flask application:

• Serves the static Vue.js UI compiled during the build stage
• Handles file uploads to the videoFile directory
• Manages browser authentication cookies in cookiesFile
• Triggers video posting workflows via Playwright automation

The server listens on 0.0.0.0:5409, matching the port exposed in the Dockerfile.

Data Persistence Strategy

The application requires three persistent directories that must be mounted as volumes:

• videoFile/: Stores uploaded video content before processing
• cookiesFile/: Persists browser session cookies for social media authentication
• db/: Contains the SQLite database initialized by db/createTable.py

Without these volume mounts, uploaded files and login sessions disappear when the container stops.

Summary

• social-auto-upload uses a multi-stage Dockerfile combining Node.js (frontend) and Python (backend) into one image
• The container exposes port 5409 and runs sau_backend.py as the entry point
• Always mount volumes for /app/videoFile, /app/cookiesFile, and /app/db to prevent data loss
• Override configuration by mounting a custom conf.py file to /app/conf.py
• The image includes headless Chromium via Playwright for browser automation

Frequently Asked Questions

How do I change the default port mapping?

The Flask server inside the container always listens on port 5409 according to sau_backend.py. To run it on a different host port, modify the -p flag when running the container: use -p 8080:5409 to map host port 8080 to container port 5409.

Can I use an external Chrome installation instead of the bundled Chromium?

Yes. Set the LOCAL_CHROME_PATH variable in a custom conf.py file and mount it into the container at /app/conf.py. This overrides the default configuration from conf.example.py and points Playwright to your specified Chrome executable path.

Why does the build process use Chinese npm and PyPI mirrors?

The Dockerfile hardcodes registry mirrors (npm China mirror, Tsinghua PyPI) to improve build reliability and speed within mainland China networks. If you are building outside China and experience connectivity issues, you can modify the Dockerfile to remove or change these registry settings before building the image.

How do I check if the container is running properly?

Verify the container status with docker ps and inspect logs using docker logs sau. The Flask server should indicate it is running on 0.0.0.0:5409. Access the web interface by navigating to http://localhost:5409 in your browser, or use curl http://localhost:5409 to verify the endpoint responds.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}