個人開発
2025-05-06
【手順書】
1. API層の追加（Cloudflare Workers用API）
目的：ブログ・動画のCRUD（作成・取得・更新・削除）APIを用意し、D1/R2と連携
追加場所例：
- app/api/blog/ … ブログ用APIエンドポイント
- app/api/works/ … 動画用APIエンドポイント
やること：
- Cloudflare WorkersでAPIを構築（TypeScript/JavaScript）
- D1（ブログ・動画メタ情報の保存）、R2（動画ファイルの保存）と連携
- API仕様：GET/POST/PUT/DELETE
2. 管理画面（CMS UI）の追加
目的：クライアントがノーコードでブログ・動画を管理できるUI
追加場所例：
- app/admin/ … 管理画面ページ（例：app/admin/blog.tsx, app/admin/works.tsx）
やること：
- UI部品はcomponents/ui/やAtomic Designの粒度で再利用
- フォーム（タイトル、本文、動画アップロード等）はcomponents/ui/form.tsxやinput.tsxなどを活用
- API（上記で作成）と連携し、CRUD操作を実装
- 必要に応じて認証（簡易的なパスワード認証やJWT等）
3. 動画アップロード機能の実装
目的：動画ファイルをR2へアップロードし、URLをD1に保存
やること：
- 管理画面の動画投稿フォームに「ファイルアップロード」UIを追加
- R2へのアップロードはPresigned URLやAPI経由で実装
- アップロード後、動画のURL・タイトル・説明などをD1に保存
4. ブログ・動画の表示側修正
目的：API経由で取得したデータをapp/blog/やapp/works/で表示
やること：
- 既存のapp/blog/page.tsxやapp/works/page.tsxでAPIからデータを取得するよう修正
- サーバーコンポーネント/クライアントコンポーネントの使い分け
- 動画はR2のURLを使って埋め込み再生
5. ストレージ・DBの設定（Cloudflare側）
目的：D1（DB）・R2（ストレージ）のセットアップ
やること：
- Cloudflare管理画面でD1インスタンス作成（テーブル設計：ブログ、動画メタ情報）
- R2バケット作成（動画ファイル保存用）
- APIからD1/R2へアクセスできるよう認証情報を設定
6. セキュリティ・認証
目的：管理画面へのアクセス制限
やること：
- シンプルなパスワード認証やJWT認証をAPI/管理画面に実装
- 必要に応じて.envやCloudflare Secretsで認証情報管理
【まとめ：修正・追加箇所一覧】
| 追加/修正内容 | 追加・修正場所例 | 目的・ポイント |
|----------------------|-------------------------|--------------------------------------|
| APIエンドポイント | app/api/blog/, works/ | WorkersでD1/R2連携APIを実装 |
| 管理画面 | app/admin/ | クライアント用CMS UI |
| 動画アップロードUI | components/ui/ | R2連携のファイルアップロード |
| 表示側のデータ取得 | app/blog/, app/works/ | API経由でデータ取得・表示 |
| Cloudflare設定 | D1, R2, Secrets | ストレージ・DB・認証のセットアップ |
| 認証 | app/admin/, api/ | 管理画面・APIのアクセス制限 |
補足
- 既存のAtomic Design構成・UI部品は再利用推奨
- API/DB/ストレージの設計は、今後の拡張（カテゴリ、タグ、会員制など）も見据えて柔軟に
- Cloudflare Workersのローカル開発にはwranglerが便利