This guide covers how to build Docker images and deploy the Vloggram, including both frontend and backend services.

​
Frontend deployment

​
Build Docker Image

​
Prerequisites

Ensure your system has the following software installed:
  • Docker Engine 20.10+ or Docker Desktop
  • Docker Buildx (for multi-platform builds)

​
Build Commands

Execute the following command in the frontend project root directory to build the Docker image: 
# Build image (without pushing to registry)
docker build \
  --build-arg NEXT_PUBLIC_API_URL= \
  --build-arg NEXT_PUBLIC_FRONTEND_URL= \
  --build-arg NEXT_PUBLIC_API_DOCS_URL= \
  -t vloggram-frontend \
  .

​
Key Build Parameters

ParameterDescriptionDefault Value
NEXT_PUBLIC_API_URLBackend API server addressNone (required)
NEXT_PUBLIC_FRONTEND_URLFrontend application access addressNone (required)
NEXT_PUBLIC_API_DOCS_URLDocumentation addressNone (required)

​
Run Containers

​
Basic Run

# Run container
docker run -d \
  --name vloggram-frontend \
  -p 3000:3000 \
  vloggram-frontend

​
Environment Variables Configuration

​
Production Environment Variables

In CI/CD pipelines, the following environment variables are configured through GitHub Actions secrets and variables:
VariableDescriptionConfiguration Location
NEXT_PUBLIC_API_URLBackend API addressGitHub Variables
NEXT_PUBLIC_FRONTEND_URLFrontend access addressGitHub Variables
NEXT_PUBLIC_API_DOCS_URLDocumentation addressGitHub Variables

​
Backend Deployment

​
Build Docker Image

​
Prerequisites

Ensure your system has the following software installed:
  • Docker Engine 20.10+ or Docker Desktop
  • Docker Buildx (for multi-platform builds)

​
Build Commands

Execute the following command in the frontend project root directory to build the Docker image: 
# Build image (without pushing to registry)
docker build \
  -t vloggram-backend \
  .

​
Run Containers

​
Basic Run

# Run container
docker run -d \
  --name vloggram-backend \
  -p 5000:5000 \
  -e PORT=5000 \
  -e FRONTEND_URL= \
  -e BETTER_AUTH_SECRET= \
  -e MONGODB_URI= \
  -e AWS_ACCESS_KEY_ID= \
  -e AWS_SECRET_ACCESS_KEY= \
  -e AWS_ENDPOINT= \
  -e AWS_BUCKET= \
  vloggram-backend

​
Environment Variables Configuration

​
Required Environment Variables

VariableTypeDescription
PORTnumberServer port (default: 5000)
FRONTEND_URLstringCORS allowed origins (JSON array serialized, e.g., "[\"http://localhost:3000\"]")
BETTER_AUTH_SECRETstringBetter Auth secret key
MONGODB_URIstringMongoDB connection string
AWS_ACCESS_KEY_IDstringVolcano Engine TOS access key
AWS_SECRET_ACCESS_KEYstringVolcano Engine TOS secret key
AWS_ENDPOINTstringTOS service endpoint
AWS_BUCKETstringStorage bucket name