OG Worker ローカルテスト手順書

背景

OG Worker（apps/workers/og）は本番環境でOG_SECRETをCloudflareのシークレットとして設定しています。ローカルでテストするには、このシークレットをローカル環境にも設定する必要があります。

前提条件

• pnpmがインストールされていること
• wranglerがインストールされていること（pnpm installで自動インストール）
• OG_SECRETの値を知っていること

手順

1. ローカル用シークレットファイルの作成

apps/workers/og/.dev.varsファイルを作成し、シークレットを設定します。

# apps/workers/og/.dev.vars
OG_SECRET=あなたのシークレット値

注意: .dev.varsは.gitignoreに追加済みなので、リポジトリには含まれません。

2. Workerの起動

cd apps/workers/og
pnpm dev

起動すると以下のように表示されます：

Using vars defined in .dev.vars
Your Worker has access to the following bindings:
Binding                         Resource                  Mode
env.OG_IMAGES (og-images)       R2 Bucket                 local
env.OG_SECRET ("(hidden)")      Environment Variable      local

[wrangler:info] Ready on http://127.0.0.1:8787

env.OG_SECRET ("(hidden)")と表示されれば、シークレットが正しく読み込まれています。

3. テスト用署名の生成

OG Workerは署名付きリクエストのみを受け付けます。テスト用の署名を生成するには：

// Node.jsで実行
const crypto = require('crypto');
const secret = 'あなたのシークレット値';

// coding-standards用
const payload1 = 'coding-standards|rule-1-1|テストタイトル';
const sig1 = crypto.createHmac('sha256', secret).update(payload1).digest('hex').slice(0, 16);
console.log('coding-standards sig:', sig1);

// jleague用
const payload2 = 'jleague|urawa|浦和レッズ|#E60012';
const sig2 = crypto.createHmac('sha256', secret).update(payload2).digest('hex').slice(0, 16);
console.log('jleague sig:', sig2);

// general用
const payload3 = 'general|about|Aboutページ';
const sig3 = crypto.createHmac('sha256', secret).update(payload3).digest('hex').slice(0, 16);
console.log('general sig:', sig3);

署名ペイロードの形式：

• coding-standards: coding-standards|{ruleId}|{title}
• jleague: jleague|{clubId}|{clubName}|{clubColor}
• general: general|{pageId}|{title}

4. curlでテスト

生成した署名を使ってリクエストを送信します。

# coding-standards エンドポイント
curl -o test.png "http://127.0.0.1:8787/og/pages/coding-standards/rule-1-1.png?title=テストタイトル&sig=生成した署名"

# jleague エンドポイント
curl -o test.png "http://127.0.0.1:8787/og/pages/jleague/urawa.png?name=浦和レッズ&color=%23E60012&sig=生成した署名"

# general エンドポイント
curl -o test.png "http://127.0.0.1:8787/og/pages/general/about.png?title=Aboutページ&sig=生成した署名"

5. 確認項目

6. 画像の確認

生成されたPNGファイルを開いて、デザインが正しいことを確認します：

• coding-standards / general: ピンク→青グラデーション背景、白いカード、タイトル中央配置
• jleague: クラブカラーのグラデーション背景、盾アイコン、クラブ名

2026-01-01 テスト結果

実行したテスト

# coding-standards
curl -o /tmp/coding-test.png "http://127.0.0.1:8787/og/pages/coding-standards/rule-1-1.png?title=テストタイトル&sig=532747efa11067a1"
# 結果: 200 OK, PNG image data, 1200 x 630, 8-bit/color RGBA

# jleague
curl -o /tmp/jleague-test.png "http://127.0.0.1:8787/og/pages/jleague/urawa.png?name=浦和レッズ&color=%23E60012&sig=a86861dc89756b0a"
# 結果: 200 OK, PNG image data, 1200 x 630, 8-bit/color RGBA

# general
curl -o /tmp/general-test.png "http://127.0.0.1:8787/og/pages/general/about.png?title=Aboutページ&sig=4e06054cf1c762d0"
# 結果: 200 OK, PNG image data, 1200 x 630, 8-bit/color RGBA

# 不正な署名
curl "http://127.0.0.1:8787/og/pages/coding-standards/rule-1-1.png?title=Test&sig=invalid"
# 結果: 403 Forbidden

結果サマリ

全てのエンドポイントが正常に動作することを確認しました。

トラブルシューティング

エラー: HMAC key length (0)

DataError: Imported HMAC key length (0) must be a non-zero value...

原因: OG_SECRETが設定されていない、または空文字列

解決策: .dev.varsファイルにシークレットが正しく設定されているか確認

複数のプロセスがポート8787を使用

# 確認
netstat -ano | grep ":8787"

# 全プロセスを終了
taskkill //F //PID <PID1> //PID <PID2> ...

シンボリックリンクが機能しない

wranglerは.dev.varsのシンボリックリンクを正しく読み込めないことがあります。実ファイルを使用してください。

関連ドキュメント

• OG Worker拡張計画: Vueページ対応