How to host webapps on a VPS — A modern setup for Agencies

If you are a freelance fullstack developer or an agency building fullstack web or mobile applications. For example with Nextjs on the frontend and Django REST on the backend. Hosting them efficiently on your own Virtual Private Server (VPS) can give you flexiblity, speed, and full control over infrastructure.

In this blog, we will walk through the best practices for setting up and managing fullstack apps on a VPS that scales with your clients’ needs

Why host on a VPS

Compared to platforms like Vercel or Heroku, a VPS gives you:

• Full control over the environment
• Better cost-efficiency
• Flexibility in tech stack and deployments
• Privacy and complience options for client-sensitive data

Recommended VPS provider is Hetzner

Hosting Architecture Diagram

Before we look at the architecture, it’s important to understand one key component: cloudflare

What is cloudflare? Cloudflare is a DNS provider and global Content Delivery Network (CDN) that helps improve your app’s performance, security, and reliability. It acts as a middle layer between your visitors and your server, offering:

• DNS management: lighting fast propgation and control
• CDN: Distributes static files globally for faster loading
• DDoS protection: Shields your server from attacks
• SSL/TLS encryption: Automatic HTTPS with flexible certificates

This makes it a perfect first step in the hosting flow. The architecture for a modern fullstack webapp setupn on a VPS can look like this

This entire stack runs in isolated Docker containers, making it modular, secure, and easy to maintain or migrate

Tech Stack overview

Here’s what your typical stack might look like:

| Layer | Tool | | ------------ | --------------------------- | | Frontend | Next.js | | Backend | Django REST Framework | | Web Server | Nginx | | Database | PostgreSQL (in Docker) | | Process Mgmt | Docker Compose | | SSL | Let's Encrypt (via Certbot) | | Deployment | GitHub Actions + SSH |

How Many Fullstack Webapps Can You Host?

Let’s assume you're using a Hetzner CX13 VPS (8 GB RAM, 80 GB SSD) for your agency. Each client webapp consists of:

• Next.js frontend
• Django backend
• PostgreSQL database

Estimated Resource Usage Per Project

| Component | RAM | Disk | | ----------------- | ------ | ---------- | | Next.js (Node.js) | ~200MB | ~200MB | | Django + Gunicorn | ~300MB | ~300MB | | PostgreSQL | ~150MB | ~150MB | | Shared Services | ~100MB | ~50MB | | Total/project | ~750MB | ~700MB–1GB |

VPS Resource Breakdown

• Usable RAM: ~7 GB (after OS & Docker overhead)
• Usable Disk: ~75 GB

Safe Hosting Estimate

• RAM-bound: 7 GB / 750 MB = ~9–10 concurrently running apps
• Disk-bound: 75 GB / ~1 GB = ~10–15 total apps (with logs/media)

🧠 Conclusion: You can safely host 8 to 10 fullstack apps with databases and moderate traffic on this VPS. For more, consider scaling horizontally with additional VPS nodes or a load-balanced setup.

Folder Structure Per Project

Organize each client project with its own directory:

/projects/
  └── client-a/
      ├── frontend/ (Next.js)
      ├── backend/ (Django)
      ├── docker-compose.yml
      └── nginx.conf

This allows you to isolate each app in containers and manage them individually.

Setting Up the VPS (Ubuntu 22.04)

1. Initial Configuration
   • Create a non-root user
   • Enable UFW (firewall)
   • Install Docker and Docker Compose
2. Domain & SSL
   • Point your domain via Cloudflare
   • Use Certbot or Caddy for HTTPS
3. Reverse Proxy with Nginx
   • Proxy yourdomain.com to Next.js container
   • Proxy /api to Django container
4. Database Setup
   • Use a Dockerized PostgreSQL instance
   • Mount volumes for persistent data

---

Deployment Workflow

Use GitHub Actions to automate deployment:

actions:
  - name: SSH into server and deploy
    run: |
      ssh user@your-vps "cd /projects/client-a && docker-compose pull && docker-compose up -d"

Add tests, builds, and image tagging as needed.

---

Scaling Considerations

• Use multiple VPS servers for different tiers (dev, staging, prod)
• Add monitoring with Netdata or Grafana
• Move static/media to S3-compatible storage (e.g., Backblaze)
• Automate backups (e.g., with cron + Borg or Restic)

---

Conclusion

Hosting fullstack webapps on your own VPS gives you agency-level control and customization. With a modular Docker setup, automated CI/CD, and smart monitoring, you can confidently scale your apps while keeping infrastructure lean and efficient.

Start small with a single VPS and grow into a more complex setup as your client base expands — your stack and architecture will already be ready for it.