website-enchun-mgr/DOCKER-SETUP.md

Docker Setup for Enchun Website

This project includes Docker configuration for both frontend (Astro) and backend (Payload CMS).

Quick Start

1. Set Environment Variables

Create a .env file in the project root with your configuration:

# Docker Hub username
DOCKER_USERNAME=your-dockerhub-username

# Database
DATABASE_URI=mongodb://root:EBJkOS1sikkUqVH8dJdNgCF1uIue41YRYUHQtNJS3l9GbBHQcmJlCiB1tEfB5HCY@dcsgw0oc4400wsgcswwocg4k:27017/?directConnection=true

# Payload CMS
PAYLOAD_SECRET=your-payload-secret
NEXT_PUBLIC_SERVER_URL=https://enchun-admin.anlstudio.cc
PREVIEW_SECRET=your-preview-secret
RESEND_API_KEY=your-resend-api-key
RESEND_FROM_EMAIL=your-email@domain.com

# R2 Storage
R2_ACCESS_KEY_ID=your-r2-access-key-id
R2_ACCOUNT_ID=your-r2-account-id
R2_BUCKET=your-r2-bucket
R2_SECRET_ACCESS_KEY=your-r2-secret-access-key

# Velcer
VERCEL_PROJECT_PRODUCTION_URL=https://your-vercel-project.vercel.app

2. Build and Push Images

Run the build script:

./docker-build-push.sh

This will:

• Build Docker images for both frontend and backend
• Push them to Docker Hub under ${DOCKER_USERNAME}/frontend and ${DOCKER_USERNAME}/backend
• Give you option to build/push each service individually or both

3. Deploy to Coolify

Since this project uses Coolify for deployment:

Option A: Use Coolify Docker Image Deployment

1. Go to Coolify dashboard
2. Create/Edit service → Select Docker Image as source
3. Enter image: your-dockerhub-username/frontend or your-dockerhub-username/backend
4. Configure environment variables in Coolify
5. Deploy

Option B: Trigger Coolify from GitHub Actions (Recommended)

1. Create GitHub repository secret COOLIFY_WEBHOOK_URL
2. Get webhook URL from Coolify Service settings → Webhooks
3. Create .github/workflows/deploy.yml:

name: Deploy to Coolify

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Trigger Coolify Deployment
        run: |
          curl -X POST "${{ secrets.COOLIFY_WEBHOOK_URL }}"

When you push to main branch, GitHub will trigger Coolify to deploy the latest Docker image.

Docker Compose

Run both services locally:

docker-compose up -d

This will start:

• Frontend: nginx on port 4321
• Backend: Payload CMS on port 3000

Manual Deployment

If you want to deploy manually to your own server:

Push to Docker Hub

docker push your-dockerhub-username/frontend
docker push your-dockerhub-username/backend

Run on Your Server

# Frontend
docker run -d -p 80:4321 --name enchun-frontend your-dockerhub-username/frontend

# Backend
docker run -d -p 3000:3000 --env-file .env --name enchun-backend your-dockerhub-username/backend

Project Structure

website-enchun-mgr/
├── apps/
│   ├── frontend/          # Astro application
│   └── backend/           # Payload CMS
├── docker-compose.yml     # Orchestrate both services
├── Dockerfile.frontend  # Frontend container config
├── Dockerfile.backend  # Backend container config
├── nginx.conf            # Frontend nginx configuration
├── .dockerignore         # Files to exclude from Docker context
└── docker-build-push.sh # Build and push script

Notes

• Frontend: Uses nginx to serve static Astro build
• Backend: Next.js-based Payload CMS with Node.js
• Ports: Frontend on 4321, Backend on 3000
• Network: Both services share a bridge network enchun-network
• Environment Variables: All sensitive values should be in .env file (not committed to git)