URL Shortener

Cloudflare Workersで構築された短縮URLサービスです。

機能

• 長いURLを短いURLに変換
• カスタム短縮コードの指定（オプション）
• シンプルで使いやすいWebインターフェース
• Cloudflare KVを使用した高速なURL解決
• 自動的な301リダイレクト

セットアップ

1. 依存関係のインストール

npm install

2. Cloudflareにログイン

npx wrangler login

3. KVネームスペースの作成

npx wrangler kv:namespace create "URL_STORE"

出力されたKV Namespace IDをコピーして、wrangler.tomlのidフィールドに設定してください。

[[kv_namespaces]]
binding = "URL_STORE"
id = "YOUR_KV_NAMESPACE_ID"  # ここに設定

4. ローカルで開発

npm run dev

ブラウザで http://localhost:8787 を開いてテストできます。

5. デプロイ

npm run deploy

カスタムドメインの設定

1. Cloudflareダッシュボードにアクセス
2. Workers & Pages → あなたのWorker → Settings → Triggers
3. Custom Domains → Add Custom Domain
4. 所有しているCloudflareドメイン（例: short.yourdomain.com）を入力

API仕様

短縮URL作成

エンドポイント: POST /api/create

リクエスト:

{
  "longUrl": "https://example.com/very/long/url",
  "customCode": "my-link"  // オプション
}

レスポンス:

{
  "shortUrl": "https://your-domain.com/abc123",
  "shortCode": "abc123",
  "longUrl": "https://example.com/very/long/url"
}

リダイレクト

エンドポイント: GET /{shortCode}

短縮コードに対応する元のURLへ301リダイレクトします。

プロジェクト構造

url-shorter/
├── src/
│   ├── index.ts      # メインWorkerスクリプト
│   └── types.ts      # TypeScript型定義
├── wrangler.toml     # Cloudflare Workers設定
├── package.json      # 依存関係
├── tsconfig.json     # TypeScript設定
└── README.md         # このファイル

技術スタック

• Cloudflare Workers: サーバーレス実行環境
• Cloudflare KV: URLマッピングの永続化ストレージ
• TypeScript: 型安全な開発

ライセンス

MIT