メニュー
This skill guides Cloudflare Workers and Pages development with Wrangler CLI. Use when creating Workers, configuring D1 databases, R2 storage, KV namespaces, Queues, or deploying to Cloudflare Pages.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/majesticlabs-dev/majestic-marketplace --skill wrangler-coderコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Create distinctive, production-grade frontend interfaces with high design quality. Use when building web components, pages, or applications. Includes framework-specific guidance for Tailwind, React, Vue, and Rails/Hotwire ecosystems.
Skill file structure, naming conventions, directory layout, frontmatter requirements, and invocation control. Use when creating skill files or slash commands to ensure correct format and validation.
Forces adversarial reasoning before committing to decisions. Triggers on architectural choices, approach selection, and planning phases to prevent premature commitment bias.
SKILL.md を表示中
SOC 職業分類に基づく
| name | wrangler-coder |
| description | This skill guides Cloudflare Workers and Pages development with Wrangler CLI. Use when creating Workers, configuring D1 databases, R2 storage, KV namespaces, Queues, or deploying to Cloudflare Pages. |
| allowed-tools | Read Write Edit Grep Glob Bash |
Wrangler is Cloudflare's official CLI for Workers, Pages, D1, R2, KV, Queues, and AI.
# npm
npm install -g wrangler
# pnpm
pnpm add -g wrangler
# Verify installation
wrangler --version
# Interactive login (opens browser)
wrangler login
# Check authentication status
wrangler whoami
# Logout
wrangler logout
Environment Variables:
# API Token (preferred for CI/CD)
export CLOUDFLARE_API_TOKEN="your-api-token"
# Or with 1Password
CLOUDFLARE_API_TOKEN=op://Infrastructure/Cloudflare/wrangler_token
# Account ID (optional, can be in wrangler.toml)
export CLOUDFLARE_ACCOUNT_ID="your-account-id"
wrangler init my-worker
wrangler init my-worker --template cloudflare/worker-template
wrangler init
name = "my-worker"
main = "src/index.ts"
compatibility_date = "2024-12-01"
# Account ID (can also use CLOUDFLARE_ACCOUNT_ID env var)
account_id = "your-account-id"
# Worker settings
workers_dev = true # Enable *.workers.dev subdomain
name = "api-worker"
main = "src/index.ts"
compatibility_date = "2024-12-01"
account_id = "your-account-id"
# Custom domain routes
routes = [
{ pattern = "api.example.com/*", zone_name = "example.com" },
{ pattern = "example.com/api/*", zone_name = "example.com" }
]
name = "my-worker"
main = "src/index.ts"
compatibility_date = "2024-12-01"
account_id = "your-account-id"
# Development (default)
workers_dev = true
# Staging environment
[env.staging]
name = "my-worker-staging"
routes = [
{ pattern = "staging-api.example.com/*", zone_name = "example.com" }
]
vars = { ENVIRONMENT = "staging" }
# Production environment
[env.production]
name = "my-worker-production"
routes = [
{ pattern = "api.example.com/*", zone_name = "example.com" }
]
vars = { ENVIRONMENT = "production" }
| Product | Resource |
|---|---|
| KV Namespaces | references/kv-namespaces.md |
| D1 Database & R2 Storage | references/d1-r2.md |
| Queues & Durable Objects | references/queues-durable-objects.md |
| Workers AI | references/workers-ai.md |
| Cloudflare Pages | references/pages.md |
# Add secret
wrangler secret put API_KEY
# (prompts for value)
# Add secret for specific environment
wrangler secret put API_KEY --env production
# List secrets
wrangler secret list
# Delete secret
wrangler secret delete API_KEY
# Bulk secrets from .dev.vars file (local dev only)
# Create .dev.vars file:
# API_KEY=xxx
# DB_PASSWORD=yyy
export interface Env {
API_KEY: string;
DB_PASSWORD: string;
}
export default {
async fetch(request: Request, env: Env): Promise<Response> {
// Access secrets from env
const apiKey = env.API_KEY;
return new Response(`Key length: ${apiKey.length}`);
}
};
# Start local dev server
wrangler dev
# With specific environment
wrangler dev --env staging
# Custom port
wrangler dev --port 8787
# Remote mode (uses Cloudflare's network)
wrangler dev --remote
# Local mode with persistent storage
wrangler dev --persist-to ./data
# Run tests with vitest (recommended)
npm install -D vitest @cloudflare/vitest-pool-workers
# vitest.config.ts
# import { defineWorkersConfig } from '@cloudflare/vitest-pool-workers/config';
# export default defineWorkersConfig({
# test: { poolOptions: { workers: { wrangler: { configPath: './wrangler.toml' } } } }
# });
# Deploy to workers.dev
wrangler deploy
# Deploy to specific environment
wrangler deploy --env production
# Dry run (show what would be deployed)
wrangler deploy --dry-run
# Deploy with custom name
wrangler deploy --name my-custom-worker
# Tail logs (real-time)
wrangler tail
# Tail specific environment
wrangler tail --env production
# Filter logs
wrangler tail --status error
wrangler tail --search "user-id-123"
wrangler tail --ip 1.2.3.4
# View deployment versions
wrangler versions list
# Rollback to previous version
wrangler rollback
See references/worker-example.md for a production-ready Worker with D1, KV, R2 bindings, multi-environment config, and CORS handling.
wrangler secret put--persist-to for consistent local dev statewrangler tail --status errorenv.DB.batch()