# Cloudflare Configuration for CodeForge This document outlines the recommended Cloudflare settings for deploying CodeForge with CapRover. ## DNS Configuration ### Frontend Domain ``` Type: A Name: frontend (or @) IPv4: Proxy status: Proxied (orange cloud) TTL: Auto ``` ### Backend Domain ``` Type: A Name: backend (or api) IPv4: Proxy status: Proxied (orange cloud) TTL: Auto ``` ### Optional: WWW Subdomain ``` Type: CNAME Name: www Target: frontend.example.com Proxy status: Proxied (orange cloud) TTL: Auto ``` ## SSL/TLS Settings Navigate to: **SSL/TLS** → **Overview** ### Encryption Mode - **Recommended**: Full (strict) - **Alternative**: Full - **Never use**: Flexible (breaks HTTPS to origin) ### Edge Certificates Navigate to: **SSL/TLS** → **Edge Certificates** - ✅ **Always Use HTTPS**: On - ✅ **HTTP Strict Transport Security (HSTS)**: Enable - Max Age: 12 months - Include subdomains: Yes - Preload: Yes (optional, but recommended) - ✅ **Minimum TLS Version**: TLS 1.2 - ✅ **Opportunistic Encryption**: On - ✅ **TLS 1.3**: On - ✅ **Automatic HTTPS Rewrites**: On - ✅ **Certificate Transparency Monitoring**: On ## Firewall Rules Navigate to: **Security** → **WAF** → **Firewall rules** ### Rule 1: Allow Backend API Requests ``` Rule name: Allow API Access Expression: (http.host eq "backend.example.com" and http.request.uri.path starts_with "/api/") Action: Allow ``` ### Rule 2: Rate Limit (Optional) ``` Rule name: API Rate Limit Expression: (http.host eq "backend.example.com" and http.request.uri.path starts_with "/api/") Action: Rate Limit Requests: 100 requests per minute Duration: 1 minute ``` ## Page Rules Navigate to: **Rules** → **Page Rules** ### Rule 1: Backend API Caching ``` URL: backend.example.com/api/* Settings: - Cache Level: Bypass - Security Level: Medium - Browser Integrity Check: Off (for API) ``` ### Rule 2: Frontend Caching ``` URL: frontend.example.com/* Settings: - Cache Level: Standard - Browser Cache TTL: 4 hours - Edge Cache TTL: 2 hours ``` ### Rule 3: Frontend Assets Caching ``` URL: frontend.example.com/assets/* Settings: - Cache Level: Cache Everything - Edge Cache TTL: 1 month - Browser Cache TTL: 1 month ``` ## Speed Settings Navigate to: **Speed** → **Optimization** ### Auto Minify - ✅ JavaScript - ✅ CSS - ✅ HTML ### Brotli - ✅ On ### Rocket Loader - ⚠️ Off (can break SPA) ### Mirage - ⚠️ Off (for modern SPAs) ### Polish - Optional: Lossy or Lossless (for images) ## Network Settings Navigate to: **Network** ### HTTP/3 (with QUIC) - ✅ On ### HTTP/2 - ✅ On ### 0-RTT Connection Resumption - ✅ On ### WebSockets - ✅ On (required for backend WebSocket connections if used) ### gRPC - Optional: On (if using gRPC) ## Caching Configuration Navigate to: **Caching** → **Configuration** ### Caching Level - Standard ### Browser Cache TTL - 4 hours (adjust as needed) ### Always Online - ✅ On (serves cached version when origin is down) ### Development Mode - Use temporarily during testing (disables caching for 3 hours) ## Transform Rules (for CORS Headers) Navigate to: **Rules** → **Transform Rules** → **Modify Response Header** ⚠️ **Important**: Only add these if nginx is NOT handling CORS headers. ### Add CORS Headers to Frontend ``` Rule name: Frontend CORS Headers Expression: http.host eq "frontend.example.com" Actions: Set dynamic header: - Header name: Access-Control-Allow-Origin - Value: * Set static header: - Header name: Access-Control-Allow-Methods - Value: GET, POST, PUT, DELETE, OPTIONS Set static header: - Header name: Access-Control-Allow-Headers - Value: Content-Type, Authorization ``` ### Add CORS Headers to Backend ``` Rule name: Backend CORS Headers Expression: http.host eq "backend.example.com" Actions: Set dynamic header: - Header name: Access-Control-Allow-Origin - Value: https://frontend.example.com Set static header: - Header name: Access-Control-Allow-Methods - Value: GET, POST, PUT, DELETE, OPTIONS Set static header: - Header name: Access-Control-Allow-Credentials - Value: true ``` ## Security Settings Navigate to: **Security** → **Settings** ### Security Level - Medium (for production) - Low (for testing/development) ### Challenge Passage - 30 minutes ### Browser Integrity Check - ✅ On (for frontend) - ⚠️ Off (for backend API to avoid blocking legitimate API clients) ### Privacy Pass Support - ✅ On ## DDoS Protection Navigate to: **Security** → **DDoS** - Managed by Cloudflare automatically - No configuration needed - Monitor attacks in dashboard ## Bot Management (Enterprise/Business Plans) Navigate to: **Security** → **Bots** ### Bot Fight Mode (Free/Pro/Business) - ⚠️ Off for API endpoints (can block legitimate requests) - ✅ On for frontend (protects against scrapers) ### Super Bot Fight Mode (Business+) - Configure to allow verified bots - Block definitely automated traffic ## Analytics & Monitoring ### Web Analytics Navigate to: **Analytics & Logs** → **Web Analytics** - Enable to track frontend traffic ### Health Checks Navigate to: **Traffic** → **Health Checks** #### Frontend Health Check ``` Name: Frontend Health URL: https://frontend.example.com/health Type: HTTPS Method: GET Expected Status: 200 Interval: 60 seconds ``` #### Backend Health Check ``` Name: Backend Health URL: https://backend.example.com/health Type: HTTPS Method: GET Expected Status: 200 Interval: 60 seconds ``` ## Origin Rules (for CapRover) Navigate to: **Rules** → **Origin Rules** ### Set Origin to CapRover ``` Rule name: Forward to CapRover Expression: http.host in {"frontend.example.com" "backend.example.com"} Actions: - Override origin: - Override port: 443 ``` ## Testing Cloudflare Configuration ### 1. Verify SSL ```bash curl -I https://frontend.example.com # Should return: HTTP/2 200 # Check for: strict-transport-security header ``` ### 2. Verify CORS ```bash curl -X OPTIONS https://backend.example.com/api/storage/keys \ -H "Origin: https://frontend.example.com" \ -H "Access-Control-Request-Method: GET" \ -v ``` ### 3. Check Caching ```bash curl -I https://frontend.example.com/assets/index.js # Should return: cf-cache-status: HIT (after first request) ``` ### 4. Test Rate Limiting ```bash # Run multiple times quickly for i in {1..150}; do curl https://backend.example.com/api/storage/keys done # Should eventually get rate limited ``` ## Troubleshooting ### Issue: 520/521/522 Errors **Cause**: Cloudflare can't connect to origin server **Solutions**: 1. Verify CapRover server is running 2. Check firewall allows Cloudflare IPs 3. Verify SSL certificate on origin 4. Check Cloudflare SSL mode is not "Flexible" ### Issue: CORS Errors Still Occurring **Cause**: Conflicting CORS headers from multiple sources **Solutions**: 1. Remove CORS headers from Cloudflare Transform Rules if nginx handles them 2. Check both nginx and Flask CORS configs 3. Use browser DevTools to see which headers are present ### Issue: Assets Not Caching **Cause**: Cache rules not properly configured **Solutions**: 1. Verify page rules are in correct order (more specific first) 2. Check cache level is appropriate 3. Enable Development Mode temporarily to bypass cache 4. Purge cache and retry ### Issue: API Requests Being Blocked **Cause**: Bot Fight Mode or firewall rules **Solutions**: 1. Disable Bot Fight Mode for backend domain 2. Check firewall events for blocked requests 3. Whitelist your IP or API client user-agent 4. Disable Browser Integrity Check for API ## Recommended Setup Order 1. ✅ Set up DNS records (A records for both domains) 2. ✅ Configure SSL/TLS (Full or Full Strict mode) 3. ✅ Enable HTTPS redirects and HSTS 4. ✅ Configure firewall rules (if needed) 5. ✅ Set up page rules for caching 6. ✅ Configure health checks 7. ✅ Enable speed optimizations 8. ✅ Test thoroughly before going live 9. ✅ Monitor analytics and logs ## Additional Resources - [Cloudflare Support](https://support.cloudflare.com/) - [Cloudflare Community](https://community.cloudflare.com/) - [Cloudflare Developers Docs](https://developers.cloudflare.com/) - [Cloudflare Status](https://www.cloudflarestatus.com/)