実績・プロジェクト/Doc Agnes ブログ

WordPressPHPCloudflare WorkersCloudflare R2TypeScriptDockerMySQLTraefikLiteSpeed CacheModel Context Protocol (MCP)

Doc Agnes ブログ

live · maintained

言語を切り替える:

直接Cloudflare R2メディアオフロードとCloudflare Worker MCPサーバーを備えたWordPress旅行ブログ。

本番サイト ↗ソースコード ↗

doc-agnes.com

Cover

WordPress上に構築された本番稼働中の旅行ブログ。DockerとTraefikでコンテナ化され、AWS SigV4による直接Cloudflare R2メディアオフロード、そしてAIによるリモートコンテンツ・SEO管理のための自律型Cloudflare Worker MCPサーバーを特徴とする。

Featured Engineering & Architecture

How the Hardest Problems Were Solved

Key architectural decisions, concrete code implementations, and performance wins behind this project.

Explore repository →

Architecturepublic_html/wp-content/mu-plugins/r2-offload.php

Direct Cloudflare R2 Media Offloading via AWS SigV4

The Challenge

Offloading WordPress media to S3-compatible Cloudflare R2 storage without relying on heavy paid plugins or proxying large binary uploads through an intermediate Cloudflare Worker.

The Architectural Solution

Built a custom `mu-plugin` (`r2-offload.php`) implementing AWS Signature Version 4 HMAC-SHA256 signing natively in PHP. Hooked into `wp_handle_upload` and `wp_generate_attachment_metadata` to offload original uploads and thumbnails directly to R2, with automatic fallback to local disk if an upload fails.

Impact:Zero plugin cost, reduced server disk footprint, and global CDN asset delivery via Cloudflare R2 edge.

public_html/wp-content/mu-plugins/r2-offload.php

function r2_sign_request( string $method, string $key, string $payload, string $content_type ): array {

$host = R2_ACCOUNT_ID . '.r2.cloudflarestorage.com';

$datetime = gmdate( 'Ymd\THis\Z' );

$date = substr( $datetime, 0, 8 );

$canonical_uri = '/' . R2_BUCKET . '/' . implode( '/', array_map( 'rawurlencode', explode( '/', $key ) ) );

$payload_hash = hash( 'sha256', $payload );

$canonical_headers = "content-type:$content_type\nhost:$host\nx-amz-content-sha256:$payload_hash\nx-amz-date:$datetime\n";

$signed_headers = 'content-type;host;x-amz-content-sha256;x-amz-date';

$canonical_request = "$method\n$canonical_uri\n\n$canonical_headers\n$signed_headers\n$payload_hash";

$credential_scope = "$date/auto/s3/aws4_request";

$string_to_sign = "AWS4-HMAC-SHA256\n$datetime\n$credential_scope\n" . hash( 'sha256', $canonical_request );

$k_date = hash_hmac( 'sha256', $date, 'AWS4' . R2_SECRET_ACCESS_KEY, true );

$k_region = hash_hmac( 'sha256', 'auto', $k_date, true );

$k_service = hash_hmac( 'sha256', 's3', $k_region, true );

$k_signing = hash_hmac( 'sha256', 'aws4_request', $k_service, true );

$signature = hash_hmac( 'sha256', $string_to_sign, $k_signing );

$authorization = "AWS4-HMAC-SHA256 Credential=" . R2_ACCESS_KEY_ID . "/$credential_scope, SignedHeaders=$signed_headers, Signature=$signature";

return [

'Host' => $host,

'Content-Type' => $content_type,

'X-Amz-Content-Sha256' => $payload_hash,

'X-Amz-Date' => $datetime,

'Authorization' => $authorization,

];

}

Discuss this snippet (public_html/wp-content/mu-plugins/r2-offload.php)

Backendmcp-server/src/index.ts

Autonomous WordPress Management via Cloudflare Worker MCP Server

The Challenge

Enabling AI agents (Claude Code / claude.ai) to inspect site health, modify posts, manage Rank Math SEO meta, and upload R2 assets securely without exposing WordPress admin credentials or full database access.

The Architectural Solution

Built a TypeScript Model Context Protocol (MCP) server deployed on Cloudflare Workers using OAuth 2.0 PKCE. Designed targeted tools for Rank Math SEO, WP REST API, and native Cloudflare R2 bucket bindings with rate limiting and error boundaries.

Impact:Enabled secure, natural-language SEO audits, content updates, and media synchronization directly from Claude.

// community_discussion

Architecture Feedback & Questions

Have thoughts, questions, or ideas regarding this system's architecture? Leave a comment below with your GitHub account.