Upstash Redis × Cloudflare Pages で作る動的機能

静的サイト（SSG）を使っていると、「いいねボタン」や「ビューカウンター」のような動的な機能は諦めがち。

でも、Upstash Redis と Cloudflare Functions を組み合わせれば、バックエンドサーバーなしで実現できます。

この記事では、実際にこのブログに実装した方法を解説します。

なぜこの構成？

静的サイトの課題

Next.jsのoutput: 'export'やCloudflare Pagesを使った静的サイトには、いくつかの制約があります。

つまり、「いいねを保存する」「ビュー数をカウントする」といった状態を持つ機能は、通常の方法では実装できません。

解決策：Upstash + Cloudflare Functions

この構成のメリット：

• サーバー管理不要 - すべてサーバーレス
• 無料枠が充実 - 小規模サイトなら無料で運用可能
• グローバル配信 - エッジで処理されるので高速
• 簡単デプロイ - GitHubと連携するだけ

Upstash Redisのセットアップ

1. アカウント作成

Upstash Consoleにアクセスしてアカウントを作成します。

GitHubアカウントでのサインアップが簡単です。

2. データベース作成

1. 「Create Database」をクリック
2. 名前を入力（例：my-blog-engagement）
3. リージョンを選択（日本向けならap-northeast-1がおすすめ）
4. 「Create」をクリック

3. 認証情報を取得

作成後、以下の情報をコピーします：

この情報は後でCloudflare Pagesの環境変数に設定します。

Cloudflare Functionsの実装

ディレクトリ構造

Cloudflare Pagesでは、functionsフォルダにファイルを置くだけでAPIエンドポイントになります。

パッケージのインストール

一括取得API（engagement.ts）

ブログ一覧ページで全記事のエンゲージメントを取得するAPIです。

ポイント: Redisのpipeline()を使うことで、複数のコマンドを1回のリクエストで実行できます。100記事あっても1回のAPI呼び出しで済みます。

個別記事API（[slug]/engagement.ts）

記事ページでビューをカウントしたり、いいねをトグルするAPIです。

フロントエンドの実装

カスタムフック

APIを呼び出すカスタムフックを作成します。

いいねボタンコンポーネント

記事ページでの使用

Cloudflare Pagesへのデプロイ

環境変数の設定

1. Cloudflare Pagesのダッシュボードにアクセス
2. プロジェクト → Settings → Environment variables
3. 以下を追加：

TypeScript設定

functionsフォルダはNext.jsのコンパイルから除外する必要があります。

Cloudflare Functions用の別のtsconfigを作成：

デプロイ

GitHubにプッシュするだけで自動デプロイされます。

人気順ソートの実装

取得したエンゲージメントデータを使って、人気順にソートできます。

いいねはビューより価値があるので、3倍の重みをつけています。

料金について

Upstash Redis

• 無料枠: 10,000コマンド/日
• 小規模ブログなら十分

Cloudflare Pages

• 無料枠: 100,000リクエスト/日
• Functions含む

個人ブログなら完全無料で運用できます。

まとめ

Upstash Redis × Cloudflare Functionsの組み合わせで、静的サイトに動的機能を追加できました。

この構成は、いいね機能以外にも応用できます：

• コメント機能
• ブックマーク
• アクセス解析
• リアルタイム通知

ぜひ試してみてください！