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:
parent
9426be7801
commit
a23c94ad1f
3 changed files with 164 additions and 0 deletions
59
scripts/deploy-pages.sh
Normal file
59
scripts/deploy-pages.sh
Normal 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 ""
|
||||
100
web/CLOUDFLARE_DEPLOYMENT.md
Normal file
100
web/CLOUDFLARE_DEPLOYMENT.md
Normal 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
5
wrangler.toml
Normal 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"
|
||||
Loading…
Add table
Reference in a new issue