code-server/cursor-fullstack/cloudflare/CLOUDFLARE_SETUP.md

إعداد Cloudflare - Cursor Full Stack AI IDE

🌐 إعداد Cloudflare للعمل مع التطبيق

هذا الدليل يوضح كيفية إعداد التطبيق للعمل على Cloudflare Workers وPages.

🚀 المتطلبات

1. حساب Cloudflare

• سجل في Cloudflare
• تأكد من تفعيل Workers وPages

2. أدوات التطوير

# تثبيت Wrangler CLI
npm install -g wrangler

# تسجيل الدخول إلى Cloudflare
wrangler login

📦 إعداد المشروع

1. إعداد Backend (Workers)

# الانتقال إلى مجلد Backend
cd cloudflare/backend

# تثبيت التبعيات
npm install

# نشر Worker
wrangler deploy

2. إعداد Frontend (Pages)

# الانتقال إلى مجلد Frontend
cd cloudflare/frontend

# تثبيت التبعيات
npm install

# بناء المشروع
npm run build

# نشر إلى Pages
wrangler pages deploy dist

🔧 إعداد الخدمات

1. إعداد Durable Objects

# إنشاء Durable Object
wrangler durable-object create WebSocketDO

2. إعداد KV Storage

# إنشاء KV namespace
wrangler kv:namespace create "API_KEYS"
wrangler kv:namespace create "API_KEYS" --preview

# إضافة معرفات KV إلى wrangler.toml

3. إعداد R2 Storage

# إنشاء R2 bucket
wrangler r2 bucket create cursor-files
wrangler r2 bucket create cursor-files-preview

🌍 إعداد النطاق

1. إعداد Subdomain

# إعداد subdomain للBackend
wrangler subdomain set cursor-backend

# إعداد subdomain للFrontend
wrangler subdomain set cursor-frontend

2. إعداد Custom Domain (اختياري)

# إضافة custom domain
wrangler custom-domains add cursor-backend.yourdomain.com
wrangler custom-domains add cursor-frontend.yourdomain.com

⚙️ متغيرات البيئة

Backend Environment Variables

# إضافة متغيرات البيئة
wrangler secret put NODE_ENV
wrangler secret put CORS_ORIGIN
wrangler secret put API_KEYS_NAMESPACE_ID
wrangler secret put FILE_STORAGE_BUCKET_NAME

Frontend Environment Variables

# إضافة متغيرات البيئة للFrontend
wrangler pages secret put VITE_BACKEND_URL
wrangler pages secret put VITE_WS_URL

🚀 نشر التطبيق

1. نشر Backend

cd cloudflare/backend
wrangler deploy

2. نشر Frontend

cd cloudflare/frontend
npm run build
wrangler pages deploy dist

3. إعداد DNS

# إضافة DNS records
wrangler dns create cursor-backend.yourdomain.com A 192.0.2.1
wrangler dns create cursor-frontend.yourdomain.com A 192.0.2.1

🔗 روابط التطبيق

بعد النشر، سيكون التطبيق متاحاً على:

Backend (Workers)

• URL: https://cursor-backend.YOUR_SUBDOMAIN.workers.dev
• WebSocket: wss://cursor-backend.YOUR_SUBDOMAIN.workers.dev

Frontend (Pages)

• URL: https://cursor-frontend.YOUR_SUBDOMAIN.pages.dev
• Custom Domain: https://cursor-frontend.yourdomain.com

📊 مراقبة الأداء

1. Cloudflare Analytics

• انتقل إلى Cloudflare Dashboard
• اختر Workers & Pages
• عرض الإحصائيات والأداء

2. Logs

# عرض logs للBackend
wrangler tail cursor-backend

# عرض logs للFrontend
wrangler pages tail cursor-frontend

🔒 الأمان

1. CORS Configuration

// في wrangler.toml
[env.production.vars]
CORS_ORIGIN = "https://cursor-frontend.YOUR_SUBDOMAIN.pages.dev"

2. Rate Limiting

// إضافة rate limiting
const rateLimiter = new RateLimiter({
  limit: 100,
  windowMs: 60000
});

3. API Key Security

// تخزين API keys في KV Storage
await env.API_KEYS.put(`key_${provider}_${userId}`, apiKey);

🚀 التحسينات

1. Caching

// إضافة caching للاستجابات
const cache = caches.default;
const cacheKey = new Request(url, request);
const cachedResponse = await cache.match(cacheKey);

2. Compression

// ضغط الاستجابات
const response = new Response(compressedBody, {
  headers: {
    'Content-Encoding': 'gzip',
    'Content-Type': 'application/json'
  }
});

3. CDN

• Cloudflare CDN مفعل تلقائياً
• تحسين الأداء عالمياً
• تقليل زمن الاستجابة

🔧 استكشاف الأخطاء

1. مشاكل الاتصال

# فحص حالة Workers
wrangler whoami

# فحص logs
wrangler tail cursor-backend --format=pretty

2. مشاكل WebSocket

// فحص WebSocket connection
if (ws.readyState === WebSocket.OPEN) {
  console.log('WebSocket connected');
} else {
  console.log('WebSocket not connected');
}

3. مشاكل Storage

# فحص KV Storage
wrangler kv:key list --namespace-id=YOUR_NAMESPACE_ID

# فحص R2 Storage
wrangler r2 bucket list

📈 الأداء

1. Cold Start

• Workers: ~50ms
• Pages: ~100ms
• Durable Objects: ~200ms

2. Throughput

• Workers: 100,000 requests/second
• Pages: 10,000 requests/second
• WebSocket: 1,000 concurrent connections

3. Storage

• KV: 1GB per namespace
• R2: 10GB free tier
• Durable Objects: 128MB per object

🎯 أفضل الممارسات

1. Code Organization

// تنظيم الكود في modules
import { handleAIChat } from './ai-handlers.js';
import { executeTool } from './tool-handlers.js';

2. Error Handling

// معالجة الأخطاء
try {
  const result = await processRequest(request);
  return new Response(JSON.stringify(result));
} catch (error) {
  return new Response(JSON.stringify({ error: error.message }), {
    status: 500
  });
}

3. Monitoring

// إضافة monitoring
console.log('Request processed:', {
  method: request.method,
  url: request.url,
  timestamp: new Date().toISOString()
});

🎉 النشر النهائي

1. Production Deployment

# نشر Backend
cd cloudflare/backend
wrangler deploy --env production

# نشر Frontend
cd cloudflare/frontend
npm run build
wrangler pages deploy dist --project-name cursor-frontend

2. Custom Domain Setup

# إضافة custom domain
wrangler custom-domains add cursor-backend.yourdomain.com
wrangler custom-domains add cursor-frontend.yourdomain.com

3. SSL Certificate

• Cloudflare SSL مفعل تلقائياً
• دعم HTTP/2 وHTTP/3
• أمان عالي

📞 الدعم

1. Cloudflare Support

• Cloudflare Documentation
• Workers Documentation
• Pages Documentation

2. Community

• Cloudflare Community
• Discord Server
• GitHub Issues

---

تطبيق Cursor Full Stack AI IDE جاهز للعمل على Cloudflare! 🚀

استمتع بأداء عالي وأمان متقدم! 🌍