voxblog/MULTI_APP_VPS_SETUP.md

VoxBlog Setup for Multi-Application VPS

Perfect for Your Use Case! 🎯

Since you're running multiple applications on your VPS, this is the recommended production setup.

Choose Your Reverse Proxy

• Caddy Setup ⚡ Recommended! Automatic HTTPS, simpler config
• Nginx Setup 🔧 Traditional, more control

Architecture

Internet
    ↓
Port 80/443 (Nginx)
    ↓
┌─────────────────────────────────────┐
│  app1.domain.com → localhost:3000   │
│  app2.domain.com → localhost:4000   │
│  voxblog.domain.com → localhost:3000│ ← VoxBlog
│  voxblog.domain.com/api → :3001     │ ← VoxBlog API
└─────────────────────────────────────┘

What Changed

✅ docker-compose.yml - Ports now bind to localhost only:

ports:
  - "127.0.0.1:3000:80"   # Not exposed to internet
  - "127.0.0.1:3001:3001" # Not exposed to internet

✅ Caddyfile - Caddy configuration (automatic HTTPS!)

✅ nginx-vps.conf - Nginx configuration (alternative)

✅ CADDY_SETUP.md - Complete Caddy setup guide

✅ NGINX_SETUP.md - Complete Nginx setup guide

Quick Setup

Option A: Caddy (Recommended - Automatic HTTPS!)

1. Configure DNS

A Record: voxblog.yourdomain.com → your-vps-ip

2. Add to Caddyfile

# On VPS
sudo nano /etc/caddy/Caddyfile

Add this block (replace with your domain):

voxblog.yourdomain.com {
    handle / {
        reverse_proxy localhost:3000
    }
    handle /api* {
        reverse_proxy localhost:3001
    }
    encode gzip
}

3. Reload Caddy

sudo caddy validate --config /etc/caddy/Caddyfile
sudo systemctl reload caddy

That's it! SSL is automatic. ✨

See CADDY_SETUP.md for details.

Option B: Nginx (Alternative)

1. Configure DNS

A Record: voxblog.yourdomain.com → your-vps-ip

2. Copy Nginx Config

scp nginx-vps.conf user@your-vps:/tmp/voxblog.conf
sudo mv /tmp/voxblog.conf /etc/nginx/sites-available/voxblog
sudo nano /etc/nginx/sites-available/voxblog  # Edit domain
sudo ln -s /etc/nginx/sites-available/voxblog /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

3. Add SSL

sudo certbot --nginx -d voxblog.yourdomain.com

See NGINX_SETUP.md for details.

3. Update .env on VPS

cd /path/to/voxblog
nano .env

Add:

VITE_API_URL=https://voxblog.yourdomain.com/api

4. Deploy

./deploy.sh

5. SSL

Caddy: Automatic! Nothing to do. ✨

Nginx:

sudo apt-get install certbot python3-certbot-nginx
sudo certbot --nginx -d voxblog.yourdomain.com

Access

• Frontend: https://voxblog.yourdomain.com
• API: https://voxblog.yourdomain.com/api

Firewall

You only need ports 80 and 443:

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw status

Application ports (3000, 3001) are NOT exposed to internet - only accessible via Nginx!

Benefits

✅ No port conflicts - All apps share 80/443 ✅ Secure - App ports not exposed ✅ Clean URLs - Use domains, not IP:port ✅ SSL ready - Free Let's Encrypt certificates ✅ Professional - Standard production setup

Example: Multiple Apps

Caddy:

app1.yourdomain.com {
    reverse_proxy localhost:4000
}

app2.yourdomain.com {
    reverse_proxy localhost:5000
}

voxblog.yourdomain.com {
    handle / { reverse_proxy localhost:3000 }
    handle /api* { reverse_proxy localhost:3001 }
}

Nginx:

server {
    server_name app1.yourdomain.com;
    location / { proxy_pass http://127.0.0.1:4000; }
}

server {
    server_name voxblog.yourdomain.com;
    location / { proxy_pass http://127.0.0.1:3000; }
    location /api { proxy_pass http://127.0.0.1:3001; }
}

All apps coexist peacefully! 🎉

Troubleshooting

Can't access via domain

1. Check DNS: nslookup voxblog.yourdomain.com
2. Check Nginx: sudo nginx -t
3. Check containers: docker-compose ps
4. Check logs: sudo tail -f /var/log/nginx/error.log

502 Bad Gateway

# Check if containers are running
docker-compose ps

# Check if ports are accessible
curl http://localhost:3000
curl http://localhost:3001/health

Complete Documentation

• CADDY_SETUP.md - Caddy setup (recommended!)
• NGINX_SETUP.md - Nginx setup (alternative)
• DEPLOYMENT_GUIDE.md - Full deployment guide
• QUICK_START.md - Quick start guide

---

This is the recommended setup for multi-app VPS environments! 🚀