feat(ci): add Cloudflare Pages deployment configuration

Add wrangler.toml, deployment script, and documentation for deploying
the AI Code Battle SPA to Cloudflare Pages.

- wrangler.toml: Cloudflare Pages project configuration
- scripts/deploy-pages.sh: Manual deployment script using wrangler CLI
- web/CLOUDFLARE_DEPLOYMENT.md: Deployment guide with GitHub Actions setup

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
jedarden 2026-04-08 16:53:09 -04:00
parent 9426be7801
commit a23c94ad1f
3 changed files with 164 additions and 0 deletions

59
scripts/deploy-pages.sh Normal file
View file

@ -0,0 +1,59 @@
#!/bin/bash
# Cloudflare Pages Deployment Script
# Deploys the AI Code Battle SPA to Cloudflare Pages
set -e
# Colors for output
RED='\033[0;31m'
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
BLUE='\033[0;34m'
NC='\033[0m' # No Color
echo -e "${BLUE}=== AI Code Battle - Cloudflare Pages Deployment ===${NC}"
echo ""
# Check if wrangler is installed
if ! command -v wrangler &> /dev/null; then
echo -e "${RED}ERROR: wrangler is not installed${NC}"
echo "Install with: npm install -g wrangler"
exit 1
fi
# Check if authenticated
echo -e "${BLUE}Checking authentication...${NC}"
if ! wrangler whoami &> /dev/null; then
echo -e "${YELLOW}Not authenticated with Cloudflare${NC}"
echo "Please run: wrangler login"
echo ""
echo "Or set environment variables:"
echo " export CLOUDFLARE_API_TOKEN=your_token"
echo " export CLOUDFLARE_ACCOUNT_ID=your_account_id"
exit 1
fi
echo -e "${GREEN}Authenticated as:${NC}"
wrangler whoami
echo ""
# Build the site
echo -e "${BLUE}Building the site...${NC}"
cd web
npm install
npm run build
cd ..
echo -e "${GREEN}✓ Build complete${NC}"
echo ""
# Deploy to Pages
echo -e "${BLUE}Deploying to Cloudflare Pages...${NC}"
wrangler pages deploy web/dist --project-name=ai-code-battle --commit-dirty=true
echo ""
echo -e "${GREEN}=== Deployment Complete! ===${NC}"
echo ""
echo "Site URLs:"
echo " - Pages URL: https://ai-code-battle.pages.dev"
echo " - Custom domain: https://aicodebattle.com (if configured)"
echo ""

View file

@ -0,0 +1,100 @@
# Cloudflare Pages Deployment Guide
This guide explains how to deploy the AI Code Battle SPA to Cloudflare Pages.
## Quick Start
### Option 1: GitHub Integration (Recommended)
1. Go to [Cloudflare Dashboard](https://dash.cloudflare.com/)
2. Navigate to **Workers & Pages** > **Create application** > **Pages** > **Connect to Git**
3. Select the `ai-code-battle` repository
4. Configure the build settings:
- **Project name**: `ai-code-battle`
- **Production branch**: `master`
- **Build command**: `cd web && npm run build`
- **Build output directory**: `web/dist`
5. Click **Save and Deploy**
The site will now automatically deploy whenever you push to the `master` branch.
### Option 2: Manual Deployment with Wrangler
1. Install wrangler:
```bash
npm install -g wrangler
```
2. Authenticate with Cloudflare:
```bash
wrangler login
```
3. Build the site:
```bash
cd web
npm install
npm run build
```
4. Deploy to Pages:
```bash
wrangler pages deploy dist --project-name=ai-code-battle
```
## Environment Variables
For the GitHub Actions workflow to work, you need to set these secrets in your GitHub repository:
- `CLOUDFLARE_API_TOKEN`: Your Cloudflare API token
- `CLOUDFLARE_ACCOUNT_ID`: Your Cloudflare account ID
### Getting Your Credentials
1. **API Token**:
- Go to [Cloudflare API Tokens](https://dash.cloudflare.com/profile/api-tokens)
- Create a token with **Edit Cloudflare Workers** permissions
- Copy the token
2. **Account ID**:
- Go to any Cloudflare page
- Find your Account ID in the right sidebar
- Or run: `wrangler whoami` after logging in
3. **Add to GitHub**:
- Go to your repository **Settings** > **Secrets and variables** > **Actions**
- Click **New repository secret**
- Add `CLOUDFLARE_API_TOKEN` and `CLOUDFLARE_ACCOUNT_ID`
## Custom Domain
To use a custom domain (e.g., `aicodebattle.com`):
1. Go to your Pages project in the Cloudflare Dashboard
2. Navigate to **Custom domains**
3. Add your domain
4. Cloudflare will automatically configure the DNS
## Verification
After deployment, verify the site is accessible:
- **Pages URL**: `https://ai-code-battle.pages.dev`
- **Custom domain**: `https://aicodebattle.com` (if configured)
## Troubleshooting
### Build fails
- Make sure all dependencies are installed: `cd web && npm install`
- Check the build logs in the Cloudflare Dashboard
### Authentication fails
- Make sure your API token has the correct permissions
- Verify your account ID is correct
### Custom domain not working
- Check DNS propagation: `dig aicodebattle.com`
- Verify the custom domain status in the Cloudflare Dashboard

5
wrangler.toml Normal file
View file

@ -0,0 +1,5 @@
# Cloudflare Pages Configuration
# For manual deployment use: wrangler pages deploy web/dist --project-name=ai-code-battle
name = "ai-code-battle"
compatibility_date = "2024-01-01"