@trieungoctam/vibekit 1.0.0

package/skills/dev/devops/references/cloudflare-r2-storage.md

@@ -0,0 +1,280 @@
+# Cloudflare R2 Storage
+
+S3-compatible object storage with zero egress fees.
+
+## Quick Start
+
+### Create Bucket
+```bash
+wrangler r2 bucket create my-bucket
+wrangler r2 bucket create my-bucket --location=wnam
+```
+
+Locations: `wnam`, `enam`, `weur`, `eeur`, `apac`
+
+### Upload Object
+```bash
+wrangler r2 object put my-bucket/file.txt --file=./local-file.txt
+```
+
+### Workers Binding
+
+**wrangler.toml:**
+```toml
+[[r2_buckets]]
+binding = "MY_BUCKET"
+bucket_name = "my-bucket"
+```
+
+**Worker:**
+```typescript
+// Put
+await env.MY_BUCKET.put('user-uploads/photo.jpg', imageData, {
+  httpMetadata: {
+    contentType: 'image/jpeg',
+    cacheControl: 'public, max-age=31536000'
+  },
+  customMetadata: {
+    uploadedBy: userId,
+    uploadDate: new Date().toISOString()
+  }
+});
+
+// Get
+const object = await env.MY_BUCKET.get('large-file.mp4');
+if (!object) {
+  return new Response('Not found', { status: 404 });
+}
+
+return new Response(object.body, {
+  headers: {
+    'Content-Type': object.httpMetadata.contentType,
+    'ETag': object.etag
+  }
+});
+
+// List
+const listed = await env.MY_BUCKET.list({
+  prefix: 'user-uploads/',
+  limit: 100
+});
+
+// Delete
+await env.MY_BUCKET.delete('old-file.txt');
+
+// Head (check existence)
+const object = await env.MY_BUCKET.head('file.txt');
+if (object) {
+  console.log('Size:', object.size);
+}
+```
+
+## S3 API Integration
+
+### AWS CLI
+```bash
+# Configure
+aws configure
+# Access Key ID: <your-key-id>
+# Secret Access Key: <your-secret>
+# Region: auto
+
+# Operations
+aws s3api list-buckets --endpoint-url https://<accountid>.r2.cloudflarestorage.com
+
+aws s3 cp file.txt s3://my-bucket/ --endpoint-url https://<accountid>.r2.cloudflarestorage.com
+
+# Presigned URL
+aws s3 presign s3://my-bucket/file.txt --endpoint-url https://<accountid>.r2.cloudflarestorage.com --expires-in 3600
+```
+
+### JavaScript (AWS SDK v3)
+```javascript
+import { S3Client, PutObjectCommand } from "@aws-sdk/client-s3";
+
+const s3 = new S3Client({
+  region: "auto",
+  endpoint: `https://${accountId}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: process.env.R2_ACCESS_KEY_ID,
+    secretAccessKey: process.env.R2_SECRET_ACCESS_KEY
+  }
+});
+
+await s3.send(new PutObjectCommand({
+  Bucket: "my-bucket",
+  Key: "file.txt",
+  Body: fileContents
+}));
+```
+
+### Python (Boto3)
+```python
+import boto3
+
+s3 = boto3.client(
+    service_name='s3',
+    endpoint_url=f'https://{account_id}.r2.cloudflarestorage.com',
+    aws_access_key_id=access_key_id,
+    aws_secret_access_key=secret_access_key,
+    region_name='auto'
+)
+
+s3.upload_fileobj(file_obj, 'my-bucket', 'file.txt')
+s3.download_file('my-bucket', 'file.txt', './local-file.txt')
+```
+
+## Multipart Uploads
+
+For files >100MB:
+
+```typescript
+const multipart = await env.MY_BUCKET.createMultipartUpload('large-file.mp4');
+
+// Upload parts (5MiB - 5GiB each, max 10,000 parts)
+const part1 = await multipart.uploadPart(1, chunk1);
+const part2 = await multipart.uploadPart(2, chunk2);
+
+// Complete
+const object = await multipart.complete([part1, part2]);
+```
+
+### Rclone (Large Files)
+```bash
+rclone config  # Configure Cloudflare R2
+
+# Upload with optimization
+rclone copy large-video.mp4 r2:my-bucket/ \
+  --s3-upload-cutoff=100M \
+  --s3-chunk-size=100M
+```
+
+## Public Buckets
+
+### Enable Public Access
+1. Dashboard → R2 → Bucket → Settings → Public Access
+2. Add custom domain (recommended) or use r2.dev
+
+**r2.dev (rate-limited):**
+```
+https://pub-<hash>.r2.dev/file.txt
+```
+
+**Custom domain (production):**
+Cloudflare handles DNS/TLS automatically
+
+## CORS Configuration
+
+```bash
+wrangler r2 bucket cors put my-bucket --rules '[
+  {
+    "AllowedOrigins": ["https://example.com"],
+    "AllowedMethods": ["GET", "PUT", "POST"],
+    "AllowedHeaders": ["*"],
+    "ExposeHeaders": ["ETag"],
+    "MaxAgeSeconds": 3600
+  }
+]'
+```
+
+## Lifecycle Rules
+
+```bash
+wrangler r2 bucket lifecycle put my-bucket --rules '[
+  {
+    "action": {"type": "AbortIncompleteMultipartUpload"},
+    "filter": {},
+    "abortIncompleteMultipartUploadDays": 7
+  },
+  {
+    "action": {"type": "Transition", "storageClass": "InfrequentAccess"},
+    "filter": {"prefix": "archives/"},
+    "daysFromCreation": 90
+  }
+]'
+```
+
+## Event Notifications
+
+```bash
+wrangler r2 bucket notification create my-bucket \
+  --queue=my-queue \
+  --event-type=object-create
+```
+
+Supported events: `object-create`, `object-delete`
+
+## Data Migration
+
+### Sippy (Incremental)
+```bash
+wrangler r2 bucket sippy enable my-bucket \
+  --provider=aws \
+  --bucket=source-bucket \
+  --region=us-east-1 \
+  --access-key-id=$AWS_KEY \
+  --secret-access-key=$AWS_SECRET
+```
+
+Objects migrate on first request.
+
+### Super Slurper (Bulk)
+Use dashboard for one-time complete migration from AWS, GCS, Azure.
+
+## Best Practices
+
+### Performance
+- Use Cloudflare Cache with custom domains
+- Multipart uploads for files >100MB
+- Rclone for batch operations
+- Location hints match user geography
+
+### Security
+- Never commit Access Keys
+- Use environment variables
+- Bucket-scoped tokens for least privilege
+- Presigned URLs for temporary access
+- Enable Cloudflare Access for protection
+
+### Cost Optimization
+- Infrequent Access storage for archives (30+ days)
+- Lifecycle rules to auto-transition/delete
+- Larger multipart chunks = fewer Class A operations
+- Monitor usage via dashboard
+
+### Naming
+- Bucket names: lowercase, hyphens, 3-63 chars
+- Avoid sequential prefixes (use hashed for performance)
+- No dots in bucket names if using custom domains with TLS
+
+## Limits
+
+- Buckets per account: 1,000
+- Object size: 5TB max
+- Lifecycle rules: 1,000 per bucket
+- Event notification rules: 100 per bucket
+- r2.dev rate limit: 1,000 req/min (use custom domains)
+
+## Troubleshooting
+
+**401 Unauthorized:**
+- Verify Access Keys
+- Check endpoint URL includes account ID
+- Ensure region is "auto"
+
+**403 Forbidden:**
+- Check bucket permissions
+- Verify CORS configuration
+- Confirm bucket exists
+
+**Presigned URLs not working:**
+- Verify CORS configuration
+- Check URL expiry time
+- Ensure origin matches CORS rules
+
+## Resources
+
+- Docs: https://developers.cloudflare.com/r2/
+- Wrangler: https://developers.cloudflare.com/r2/reference/wrangler-commands/
+- S3 Compatibility: https://developers.cloudflare.com/r2/api/s3/api/
+- Workers API: https://developers.cloudflare.com/r2/api/workers/

package/skills/dev/devops/references/cloudflare-workers-advanced.md

@@ -0,0 +1,312 @@
+# Cloudflare Workers Advanced Patterns
+
+Advanced techniques for optimization, performance, and complex workflows.
+
+## Session Reuse and Connection Pooling
+
+### Durable Objects for Persistent Sessions
+```typescript
+export class Browser {
+  state: DurableObjectState;
+  browser: any;
+  lastUsed: number;
+
+  constructor(state: DurableObjectState, env: Env) {
+    this.state = state;
+    this.lastUsed = Date.now();
+  }
+
+  async fetch(request: Request, env: Env) {
+    if (!this.browser) {
+      this.browser = await puppeteer.launch(env.MYBROWSER);
+    }
+
+    this.lastUsed = Date.now();
+    await this.state.storage.setAlarm(Date.now() + 10000);
+
+    const page = await this.browser.newPage();
+    await page.goto(new URL(request.url).searchParams.get('url'));
+    const screenshot = await page.screenshot();
+    await page.close();
+
+    return new Response(screenshot);
+  }
+
+  async alarm() {
+    if (Date.now() - this.lastUsed > 60000) {
+      await this.browser?.close();
+      this.browser = null;
+    } else {
+      await this.state.storage.setAlarm(Date.now() + 10000);
+    }
+  }
+}
+```
+
+## Multi-Tier Caching Strategy
+
+```typescript
+const CACHE_TTL = 3600;
+
+export default {
+  async fetch(request: Request, env: Env, ctx: ExecutionContext): Promise<Response> {
+    const cache = caches.default;
+    const cacheKey = new Request(request.url);
+
+    // 1. Check edge cache
+    let response = await cache.match(cacheKey);
+    if (response) return response;
+
+    // 2. Check KV cache
+    const kvCached = await env.MY_KV.get(request.url);
+    if (kvCached) {
+      response = new Response(kvCached);
+      ctx.waitUntil(cache.put(cacheKey, response.clone()));
+      return response;
+    }
+
+    // 3. Fetch from origin
+    response = await fetch(request);
+
+    // 4. Store in both caches
+    ctx.waitUntil(Promise.all([
+      cache.put(cacheKey, response.clone()),
+      env.MY_KV.put(request.url, await response.clone().text(), {
+        expirationTtl: CACHE_TTL
+      })
+    ]));
+
+    return response;
+  }
+};
+```
+
+## WebSocket with Durable Objects
+
+```typescript
+export class ChatRoom {
+  state: DurableObjectState;
+  sessions: Set<WebSocket>;
+
+  constructor(state: DurableObjectState) {
+    this.state = state;
+    this.sessions = new Set();
+  }
+
+  async fetch(request: Request) {
+    const pair = new WebSocketPair();
+    const [client, server] = Object.values(pair);
+
+    this.state.acceptWebSocket(server);
+    this.sessions.add(server);
+
+    return new Response(null, { status: 101, webSocket: client });
+  }
+
+  async webSocketMessage(ws: WebSocket, message: string) {
+    // Broadcast to all connected clients
+    for (const session of this.sessions) {
+      session.send(message);
+    }
+  }
+
+  async webSocketClose(ws: WebSocket) {
+    this.sessions.delete(ws);
+  }
+}
+```
+
+## Queue-Based Crawler
+
+```typescript
+export default {
+  async queue(batch: MessageBatch<any>, env: Env): Promise<void> {
+    const browser = await puppeteer.launch(env.MYBROWSER);
+
+    for (const message of batch.messages) {
+      const page = await browser.newPage();
+      await page.goto(message.body.url);
+
+      // Extract links
+      const links = await page.evaluate(() => {
+        return Array.from(document.querySelectorAll('a'))
+          .map(a => a.href);
+      });
+
+      // Queue new links
+      for (const link of links) {
+        await env.QUEUE.send({ url: link });
+      }
+
+      await page.close();
+      message.ack();
+    }
+
+    await browser.close();
+  }
+};
+```
+
+## Authentication Pattern
+
+```typescript
+import { sign, verify } from 'hono/jwt';
+
+async function authenticate(request: Request, env: Env): Promise<any> {
+  const authHeader = request.headers.get('Authorization');
+
+  if (!authHeader?.startsWith('Bearer ')) {
+    throw new Error('Missing token');
+  }
+
+  const token = authHeader.substring(7);
+  const payload = await verify(token, env.JWT_SECRET);
+
+  return payload;
+}
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    try {
+      const user = await authenticate(request, env);
+      return new Response(`Hello ${user.name}`);
+    } catch (error) {
+      return new Response('Unauthorized', { status: 401 });
+    }
+  }
+};
+```
+
+## Code Splitting
+
+```typescript
+// Lazy load large dependencies
+export default {
+  async fetch(request: Request): Promise<Response> {
+    const url = new URL(request.url);
+
+    if (url.pathname === '/heavy') {
+      const { processHeavy } = await import('./heavy');
+      return processHeavy(request);
+    }
+
+    return new Response('OK');
+  }
+};
+```
+
+## Batch Operations with D1
+
+```typescript
+// Efficient bulk inserts
+const statements = users.map(user =>
+  env.DB.prepare('INSERT INTO users (name, email) VALUES (?, ?)')
+    .bind(user.name, user.email)
+);
+
+await env.DB.batch(statements);
+```
+
+## Stream Processing
+
+```typescript
+const { readable, writable } = new TransformStream({
+  transform(chunk, controller) {
+    // Process chunk
+    controller.enqueue(chunk);
+  }
+});
+
+response.body.pipeTo(writable);
+return new Response(readable);
+```
+
+## AI-Powered Web Scraper
+
+```typescript
+import { Ai } from '@cloudflare/ai';
+
+export default {
+  async fetch(request: Request, env: Env): Promise<Response> {
+    // Render page
+    const browser = await puppeteer.launch(env.MYBROWSER);
+    const page = await browser.newPage();
+    await page.goto('https://news.ycombinator.com');
+    const content = await page.content();
+    await browser.close();
+
+    // Extract with AI
+    const ai = new Ai(env.AI);
+    const response = await ai.run('@cf/meta/llama-3-8b-instruct', {
+      messages: [
+        {
+          role: 'system',
+          content: 'Extract top 5 article titles and URLs as JSON array'
+        },
+        { role: 'user', content: content }
+      ]
+    });
+
+    return Response.json(response);
+  }
+};
+```
+
+## Performance Optimization
+
+### Bundle Size
+- Keep Workers <1MB bundled
+- Remove unused dependencies
+- Use code splitting
+- Check with: `wrangler deploy --dry-run --outdir=dist`
+
+### Cold Starts
+- Minimize initialization code
+- Use bindings over fetch
+- Avoid large imports at top level
+
+### Memory Management
+- Close pages when done: `await page.close()`
+- Disconnect browsers: `await browser.disconnect()`
+- Implement cleanup alarms in Durable Objects
+
+### Request Optimization
+- Use server-side filtering with `--filter`
+- Batch operations with D1 `.batch()`
+- Stream large responses
+- Implement proper caching
+
+## Monitoring & Debugging
+
+```bash
+# Real-time logs
+wrangler tail --format pretty
+
+# Filter by status
+wrangler tail --status error
+
+# Check deployments
+wrangler deployments list
+
+# Rollback
+wrangler rollback [version-id]
+```
+
+## Production Checklist
+
+- [ ] Multi-stage error handling implemented
+- [ ] Rate limiting configured
+- [ ] Caching strategy in place
+- [ ] Secrets managed with `wrangler secret`
+- [ ] Health checks implemented
+- [ ] Monitoring alerts configured
+- [ ] Session reuse for browser rendering
+- [ ] Resource cleanup (pages, browsers)
+- [ ] Proper timeout configurations
+- [ ] CI/CD pipeline set up
+
+## Resources
+
+- Advanced Patterns: https://developers.cloudflare.com/workers/examples/
+- Durable Objects: https://developers.cloudflare.com/workers/runtime-apis/durable-objects/
+- Performance: https://developers.cloudflare.com/workers/platform/limits/