Cloudflare Deployment

Learn how to deploy Chameleon AI SaaS to Cloudflare Pages with proper configuration and optimization.

Overview

Cloudflare Pages provides a fast, secure, and scalable platform for deploying Next.js applications. It offers global CDN distribution, automatic HTTPS, and seamless integration with Cloudflare's security features. This deployment method is ideal for applications that need global performance and enterprise-grade security.

Prerequisites

Required Accounts

• Cloudflare Account: Free tier available
• GitHub Account: For repository access
• Database Provider: PostgreSQL or MySQL (Neon, PlanetScale, etc.)
• Stripe Account: For payment processing

Required Tools

• Wrangler CLI: Cloudflare's command-line tool
• Git: Version control
• Node.js: Version 18 or higher

Setup Process

Step 1: Install Wrangler CLI

# Install Wrangler globally
npm install -g wrangler

# Login to Cloudflare
wrangler login

Step 2: Prepare Your Repository

# Clone your repository
git clone https://github.com/your-username/chameleon-ai-saas.git
cd chameleon-ai-saas

# Install dependencies
pnpm install

# Build the application
pnpm build

Step 3: Configure Wrangler

Create wrangler.toml in your project root:

# wrangler.toml
name = "chameleon-ai-saas"
compatibility_date = "2024-01-01"
compatibility_flags = ["nodejs_compat"]

[env.production]
name = "chameleon-ai-saas"
route = "your-domain.com/*"

[env.staging]
name = "chameleon-ai-saas-staging"
route = "staging.your-domain.com/*"

# Build configuration
[build]
command = "pnpm build"
cwd = "."

# Environment variables (secrets)
# Use: wrangler secret put VARIABLE_NAME

Step 4: Set Environment Variables

# Set required environment variables
wrangler secret put DATABASE_URL
wrangler secret put NEXTAUTH_SECRET
wrangler secret put AUTH_SECRET
wrangler secret put NEXTAUTH_URL
wrangler secret put NEXT_PUBLIC_WEB_URL
wrangler secret put ADMIN_EMAILS

# Optional: Authentication providers
wrangler secret put AUTH_GOOGLE_ID
wrangler secret put AUTH_GOOGLE_SECRET
wrangler secret put AUTH_GITHUB_ID
wrangler secret put AUTH_GITHUB_SECRET

# Optional: Payment processing
wrangler secret put STRIPE_PUBLISHABLE_KEY
wrangler secret put STRIPE_PRIVATE_KEY

Step 5: Deploy to Cloudflare Pages

# Deploy to production
wrangler pages deploy dist --project-name chameleon-ai-saas

# Deploy to staging
wrangler pages deploy dist --project-name chameleon-ai-saas-staging --env staging

Database Setup

Step 6: Configure Database

# Set up database (if using external provider)
# For Neon PostgreSQL:
DATABASE_URL="postgresql://user:password@ep-xxx.us-east-1.aws.neon.tech/neondb"

# For PlanetScale MySQL:
DATABASE_URL="mysql://user:password@aws.connect.psdb.cloud/database?sslaccept=strict"

Step 7: Run Database Migration

# Generate migration files
pnpm db:generate

# Push schema to database
pnpm db:push

# Seed initial data
pnpm db:seed

Custom Domain Setup

Step 8: Configure Custom Domain

1. Add Domain in Cloudflare Dashboard

   • Go to Pages → Your Project → Custom Domains
   • Add your domain (e.g., your-domain.com)

2. Update DNS Records

   • Add CNAME record: www → your-project.pages.dev
   • Add A record: @ → Cloudflare IP (if needed)

3. Update Environment Variables

   wrangler secret put NEXTAUTH_URL --value "https://your-domain.com"
   wrangler secret put NEXT_PUBLIC_WEB_URL --value "https://your-domain.com"
   

Performance Optimization

Step 9: Enable Cloudflare Features

# wrangler.toml - Performance optimizations
[env.production.vars]
NODE_ENV = "production"

# Enable Cloudflare features
[env.production]
compatibility_flags = [
  "nodejs_compat",
  "streams_enable_constructors"
]

Step 10: Configure Caching

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    runtime: 'edge',
  },
  images: {
    domains: ['your-domain.com'],
    formats: ['image/webp', 'image/avif'],
  },
  headers: async () => [
    {
      source: '/api/:path*',
      headers: [
        {
          key: 'Cache-Control',
          value: 'public, max-age=60, s-maxage=60',
        },
      ],
    },
  ],
};

module.exports = nextConfig;

Security Configuration

Step 11: Enable Security Features

1. Cloudflare Security Settings

   • Enable Bot Fight Mode
   • Configure Rate Limiting
   • Set up DDoS Protection
   • Enable WAF (Web Application Firewall)

2. Environment Security

   # Use strong secrets
   wrangler secret put NEXTAUTH_SECRET --value "$(openssl rand -base64 32)"
   wrangler secret put AUTH_SECRET --value "$(openssl rand -base64 32)"
   

Monitoring and Analytics

Step 12: Set Up Monitoring

// src/lib/analytics.ts
export function trackEvent(event: string, properties?: Record<string, any>) {
  if (typeof window !== 'undefined') {
    // Cloudflare Analytics
    gtag('event', event, properties);
    
    // Custom analytics
    fetch('/api/analytics', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ event, properties }),
    });
  }
}

File Locations

• wrangler.toml - Cloudflare configuration
• next.config.js - Next.js configuration
• .env.example - Environment variables template
• src/lib/analytics.ts - Analytics tracking

Common Tasks

Deploy New Version

# Build and deploy
pnpm build
wrangler pages deploy dist --project-name chameleon-ai-saas

# Deploy with preview
wrangler pages deploy dist --project-name chameleon-ai-saas --compatibility-date 2024-01-01

Update Environment Variables

# Update a secret
wrangler secret put VARIABLE_NAME

# List all secrets
wrangler secret list

# Delete a secret
wrangler secret delete VARIABLE_NAME

Monitor Deployment

# View deployment logs
wrangler pages deployment list --project-name chameleon-ai-saas

# View specific deployment
wrangler pages deployment tail --project-name chameleon-ai-saas --deployment-id DEPLOYMENT_ID

Database Management

# Run migrations
pnpm db:push

# Seed data
pnpm db:seed

# Open database studio
pnpm db:studio

Troubleshooting

Deployment fails

Problem: Build or deployment errors

Solution:

1. Check Node.js version compatibility
2. Verify all dependencies are installed
3. Check for TypeScript errors
4. Review build logs in Cloudflare dashboard

Environment variables not working

Problem: App can't access environment variables

Solution:

1. Verify secrets are set with wrangler secret list
2. Check variable names match exactly
3. Restart deployment after adding secrets
4. Use wrangler pages deployment tail to check logs

Database connection issues

Problem: Database connection fails

Solution:

1. Verify DATABASE_URL is correctly set
2. Check database provider status
3. Ensure IP whitelisting (if required)
4. Test connection locally first

Performance issues

Problem: Slow page loads

Solution:

1. Enable Cloudflare caching
2. Optimize images and assets
3. Use Edge Runtime for API routes
4. Monitor Core Web Vitals

Next Steps

• Vercel Deployment - Alternative deployment option
• Dokploy Deployment - Self-hosted deployment
• Environment Variables - Configuration guide