Back to Details

deploy-cloudflare

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Deploy to Cloudflare

部署至Cloudflare

Why Cloudflare?

为什么选择Cloudflare？

  • Global edge network (300+ cities)
  • Zero cold starts (Workers)
  • Automatic HTTPS and DDoS protection
  • Integrated CDN and DNS
  • Generous free tier
  • 全球边缘网络（覆盖300+城市）
  • 无冷启动（Workers）
  • 自动HTTPS与DDoS防护
  • 集成CDN与DNS
  • 丰厚的免费额度

Quick Start

快速开始

bash
undefined
bash
undefined

Install Wrangler

Install Wrangler

npm install -g wrangler
npm install -g wrangler

Login

Login

wrangler login
wrangler login

Deploy Pages

Deploy Pages

wrangler pages deploy ./dist
wrangler pages deploy ./dist

Deploy Worker

Deploy Worker

wrangler deploy
undefined
wrangler deploy
undefined

Cloudflare Pages

Cloudflare Pages

Deploy Static Site

部署静态网站

bash
undefined
bash
undefined

One-time deploy

One-time deploy

wrangler pages deploy ./dist --project-name=my-app
wrangler pages deploy ./dist --project-name=my-app

Connect Git repo (auto-deploy)

Connect Git repo (auto-deploy)

wrangler pages project create my-app --production-branch=main
undefined
wrangler pages project create my-app --production-branch=main
undefined

Build Configuration

构建配置

toml
undefined
toml
undefined

wrangler.toml (Pages Functions)

wrangler.toml (Pages Functions)

name = "my-app" compatibility_date = "2025-01-01"
[build] command = "npm run build"
undefined
name = "my-app" compatibility_date = "2025-01-01"
[build] command = "npm run build"
undefined

Cloudflare Workers

Cloudflare Workers

Worker Configuration

Worker配置

toml
undefined
toml
undefined

wrangler.toml

wrangler.toml

name = "my-worker" main = "src/index.ts" compatibility_date = "2025-01-01"
[vars] ENVIRONMENT = "production"
[[kv_namespaces]] binding = "MY_KV" id = "abc123"
undefined
name = "my-worker" main = "src/index.ts" compatibility_date = "2025-01-01"
[vars] ENVIRONMENT = "production"
[[kv_namespaces]] binding = "MY_KV" id = "abc123"
undefined

Basic Worker

基础Worker

typescript
export default {
  async fetch(request, env, ctx) {
    return new Response('Hello from the edge!', {
      headers: { 'Content-Type': 'text/plain' }
    });
  }
};
typescript
export default {
  async fetch(request, env, ctx) {
    return new Response('Hello from the edge!', {
      headers: { 'Content-Type': 'text/plain' }
    });
  }
};

Environment & Secrets

环境变量与密钥

bash
undefined
bash
undefined

Set secret (encrypted)

Set secret (encrypted)

wrangler secret put API_KEY
wrangler secret put API_KEY

Set variable (plain text)

Set variable (plain text)

wrangler pages secret put API_URL
wrangler pages secret put API_URL

Bulk upload

Bulk upload

echo "SECRET_KEY" | wrangler secret put SECRET_KEY
undefined
echo "SECRET_KEY" | wrangler secret put SECRET_KEY
undefined

DNS Management

DNS管理

bash
undefined
bash
undefined

List DNS records

List DNS records

wrangler dns list example.com
wrangler dns list example.com

Add A record

Add A record

wrangler dns create example.com --type A --name www --content 1.2.3.4
wrangler dns create example.com --type A --name www --content 1.2.3.4

Update record

Update record

wrangler dns update example.com --type A --name www --content 5.6.7.8
undefined
wrangler dns update example.com --type A --name www --content 5.6.7.8
undefined

Deployment Workflow

部署工作流

1. Initialize Project

1. 初始化项目

bash
wrangler init my-project
cd my-project
bash
wrangler init my-project
cd my-project

2. Develop Locally

2. 本地开发

bash
wrangler dev
bash
wrangler dev

3. Deploy

3. 部署

bash
undefined
bash
undefined

Production

Production

wrangler deploy
wrangler deploy

Preview

Preview

wrangler deploy --env staging
undefined
wrangler deploy --env staging
undefined

Best Practices

最佳实践

  1. Use Environments: Separate staging and production
  2. Versioning: Rollback via dashboard if needed
  3. Edge Caching: Leverage Cache API for performance
  4. Rate Limiting: Protect Workers with rate limits
  5. Monitoring: Enable Workers Analytics
  1. 使用环境隔离：区分预发布环境与生产环境
  2. 版本控制：必要时可通过控制台回滚版本
  3. 边缘缓存：利用Cache API提升性能
  4. 速率限制：为Workers配置速率限制以防护
  5. 监控：启用Workers分析功能

Common Commands

常用命令

bash
undefined
bash
undefined

View logs (tail)

View logs (tail)

wrangler tail
wrangler tail

List deployments

List deployments

wrangler deployments list
wrangler deployments list

Rollback

Rollback

wrangler rollback --message "Revert breaking change"
wrangler rollback --message "Revert breaking change"

KV operations

KV operations

wrangler kv:key put --binding=MY_KV "key" "value" wrangler kv:key get --binding=MY_KV "key"
undefined
wrangler kv:key put --binding=MY_KV "key" "value" wrangler kv:key get --binding=MY_KV "key"
undefined

Anti-Patterns

反模式

  • Don't store secrets in wrangler.toml (use 
    wrangler secret
    )
  • Don't deploy without testing locally (
    wrangler dev
    )
  • Don't ignore compatibility_date (affects runtime behavior)
  • Don't use Workers for long-running tasks (30s limit)
  • 请勿在wrangler.toml中存储密钥（请使用
    wrangler secret
    ）
  • 请勿未经过本地测试就部署（使用
    wrangler dev
    测试）
  • 请勿忽略compatibility_date（会影响运行时行为）
  • 请勿使用Workers执行长时间任务（存在30秒限制）