feat: add Cloudflare deployment configuration

- Add Cloudflare Worker script - Add Cloudflare deployment workflow - Add Cloudflare deployment documentation - Update wrangler configuration
CrzyHAX91 · Dec 22, 2024 · f8cd31a · f8cd31a
1 parent f56bdfe
commit f8cd31a
Show file tree

Hide file tree

Showing 5 changed files with 659 additions and 0 deletions.
diff --git a/.github/workflows/cloudflare-deploy.yml b/.github/workflows/cloudflare-deploy.yml
@@ -0,0 +1,125 @@
+name: Deploy to Cloudflare
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'npm'
+
+      - name: Install Dependencies
+        run: |
+          npm ci
+          cd dropship-frontend && npm ci
+          cd ../dropship-backend && npm ci
+          npm install -g wrangler
+
+      - name: Build Frontend
+        run: |
+          cd dropship-frontend
+          npm run build
+        env:
+          VITE_API_URL: ${{ secrets.CLOUDFLARE_API_URL }}
+          VITE_WS_URL: ${{ secrets.CLOUDFLARE_WS_URL }}
+
+      - name: Deploy Frontend to Cloudflare Pages
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: pages publish dropship-frontend/build --project-name=dropship-platform
+
+      - name: Deploy Worker
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: publish cloudflare/worker.js
+        env:
+          API_ENDPOINT: ${{ secrets.API_ENDPOINT }}
+          WS_ENDPOINT: ${{ secrets.WS_ENDPOINT }}
+          CF_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+
+      - name: Create KV Namespace (if not exists)
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: kv:namespace create DROPSHIP_KV || true
+
+      - name: Configure DNS
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: |
+            dns record create \
+              --type CNAME \
+              --name ${{ secrets.DOMAIN }} \
+              --content ${{ secrets.CLOUDFLARE_PAGES_URL }} \
+              --proxied true
+
+      - name: Configure Workers Routes
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: |
+            route add ${{ secrets.DOMAIN }}/* dropship-platform
+            route add ${{ secrets.DOMAIN }}/api/* dropship-platform-api
+            route add ${{ secrets.DOMAIN }}/ws dropship-platform-ws
+
+      - name: Deploy D1 Database
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: d1 create dropship-platform-db --location=WEUR
+
+      - name: Configure Cron Triggers
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: |
+            cron create "*/5 * * * *" dropship-platform-cron
+            cron enable dropship-platform-cron
+
+      - name: Deploy R2 Storage
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: r2 bucket create dropship-platform-storage
+
+      - name: Configure Analytics
+        uses: cloudflare/wrangler-action@v3
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          command: analytics enable
+
+      - name: Notify Deployment Status
+        if: always()
+        uses: 8398a7/action-slack@v3
+        with:
+          status: ${{ job.status }}
+          fields: repo,message,commit,author,action,eventName,ref,workflow
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+
+env:
+  CLOUDFLARE_API_TOKEN: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+  CLOUDFLARE_ACCOUNT_ID: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
diff --git a/CLOUDFLARE_DEPLOYMENT.md b/CLOUDFLARE_DEPLOYMENT.md
@@ -0,0 +1,261 @@
+# Cloudflare Deployment Guide
+
+This guide explains how to deploy the Dropship Platform to Cloudflare using Pages, Workers, and other Cloudflare services.
+
+## Prerequisites
+
+1. Cloudflare Account
+2. Domain registered with Cloudflare
+3. Node.js 18 or later
+4. Wrangler CLI (`npm install -g wrangler`)
+5. GitHub account
+
+## Setup Steps
+
+### 1. Cloudflare Account Setup
+
+1. Log in to your Cloudflare dashboard
+2. Note down your Account ID from the dashboard
+3. Create an API token with the following permissions:
+   - Account Settings: Read
+   - Workers Scripts: Edit
+   - Workers Routes: Edit
+   - Workers KV: Edit
+   - DNS: Edit
+   - Pages: Edit
+
+### 2. GitHub Repository Setup
+
+1. Add the following secrets to your GitHub repository:
+```bash
+CLOUDFLARE_API_TOKEN=your_api_token
+CLOUDFLARE_ACCOUNT_ID=your_account_id
+CLOUDFLARE_API_URL=https://api.your-domain.com
+CLOUDFLARE_WS_URL=wss://api.your-domain.com
+CLOUDFLARE_PAGES_URL=your-project.pages.dev
+DOMAIN=your-domain.com
+API_ENDPOINT=https://api.your-domain.com
+WS_ENDPOINT=wss://api.your-domain.com
+SLACK_WEBHOOK_URL=your_slack_webhook_url
+```
+
+### 3. Local Development Setup
+
+1. Install Wrangler CLI:
+```bash
+npm install -g wrangler
+```
+
+2. Login to Cloudflare:
+```bash
+wrangler login
+```
+
+3. Update wrangler.toml with your account details:
+```toml
+account_id = "your_account_id"
+zone_id = "your_zone_id"
+route = "your-domain.com/*"
+```
+
+### 4. Cloudflare Services Configuration
+
+#### Pages Setup
+1. Create a new Pages project:
+```bash
+wrangler pages project create dropship-platform
+```
+
+2. Configure build settings:
+   - Build command: `npm run build`
+   - Build output directory: `build`
+   - Root directory: `dropship-frontend`
+
+#### Workers Setup
+1. Create KV namespace:
+```bash
+wrangler kv:namespace create DROPSHIP_KV
+```
+
+2. Create D1 database:
+```bash
+wrangler d1 create dropship-platform-db
+```
+
+3. Create R2 bucket:
+```bash
+wrangler r2 bucket create dropship-platform-storage
+```
+
+#### DNS Setup
+1. Add DNS records:
+```bash
+wrangler dns record create --type CNAME --name @ --content your-project.pages.dev --proxied true
+```
+
+### 5. Deployment
+
+1. Push changes to the main branch to trigger automatic deployment:
+```bash
+git add .
+git commit -m "Update deployment configuration"
+git push origin main
+```
+
+2. Monitor deployment in GitHub Actions:
+   - Go to your repository's Actions tab
+   - Check the "Deploy to Cloudflare" workflow
+
+### 6. Post-Deployment Verification
+
+1. Check Pages deployment:
+   - Visit your domain
+   - Verify all pages load correctly
+   - Test navigation and features
+
+2. Verify Worker functionality:
+   - Test API endpoints
+   - Check WebSocket connections
+   - Verify caching behavior
+
+3. Monitor performance:
+   - Check Cloudflare Analytics
+   - Review Worker metrics
+   - Monitor error rates
+
+## Directory Structure
+
+```
+.
+├── cloudflare/
+│   └── worker.js         # Cloudflare Worker script
+├── wrangler.toml         # Wrangler configuration
+└── .github/
+    └── workflows/
+        └── cloudflare-deploy.yml  # Deployment workflow
+```
+
+## Environment Variables
+
+### Frontend (.env)
+```env
+VITE_API_URL=https://api.your-domain.com
+VITE_WS_URL=wss://api.your-domain.com
+```
+
+### Worker (Environment Variables in Cloudflare Dashboard)
+```env
+API_ENDPOINT=https://api.your-domain.com
+WS_ENDPOINT=wss://api.your-domain.com
+CF_API_TOKEN=your_cloudflare_api_token
+```
+
+## Monitoring and Maintenance
+
+### Analytics
+1. Enable Cloudflare Analytics:
+```bash
+wrangler analytics enable
+```
+
+2. Monitor in Cloudflare Dashboard:
+   - Request statistics
+   - Error rates
+   - Performance metrics
+
+### Logs
+1. View Worker logs:
+```bash
+wrangler tail
+```
+
+2. Check deployment logs in GitHub Actions
+
+### Scheduled Tasks
+1. View scheduled tasks:
+```bash
+wrangler cron list
+```
+
+2. Monitor task execution in Worker logs
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Deployment Failures**
+   - Check GitHub Actions logs
+   - Verify environment variables
+   - Ensure Cloudflare API token permissions
+
+2. **Worker Errors**
+   - Check Worker logs: `wrangler tail`
+   - Verify KV namespace bindings
+   - Check route configurations
+
+3. **Pages Build Failures**
+   - Review build logs in GitHub Actions
+   - Check build command and output directory
+   - Verify dependencies are installed
+
+### Debug Mode
+
+Enable debug mode in worker.js:
+```javascript
+const DEBUG = true;
+```
+
+This will provide detailed error messages in responses.
+
+## Scaling
+
+### KV Storage
+- Monitor KV usage in Cloudflare Dashboard
+- Implement caching strategies
+- Use bulk operations for large datasets
+
+### Worker Performance
+- Optimize API routes
+- Implement efficient caching
+- Use Web Workers for CPU-intensive tasks
+
+### R2 Storage
+- Monitor storage usage
+- Implement lifecycle policies
+- Use signed URLs for secure access
+
+## Security
+
+### Headers
+- CORS configuration in worker.js
+- Security headers in nginx.conf
+- CSP configuration
+
+### Authentication
+- JWT validation in Worker
+- Rate limiting
+- IP filtering
+
+### Data Protection
+- Enable encryption at rest
+- Implement backup strategies
+- Monitor access logs
+
+## Rollback Procedure
+
+1. Revert to previous version:
+```bash
+wrangler rollback
+```
+
+2. Verify DNS records:
+```bash
+wrangler dns record list
+```
+
+3. Check Worker routes:
+```bash
+wrangler route list
+```
+
+For more detailed information about specific deployment scenarios or troubleshooting, please refer to the [Cloudflare Workers documentation](https://developers.cloudflare.com/workers/).