@c-time/frelio-cms

Frelio CMS の管理画面バンドル。GitHub をデータストアとするヘッドレス CMS の管理 UI を提供する。

このパッケージは、@c-time/frelio-cli の frelio init / frelio update コマンドから利用されるビルド済み静的アセットで、直接インストールして使うものではない。

概要

• React + Vite + MUI で構築された SPA 管理画面
• GitHub API 経由でコンテンツを CRUD
• GitHub OAuth によるログイン認証
• Cloudflare Pages Functions で OAuth + ファイルアップロード API を提供
• Cloudflare R2 にファイルを保存・配信

セットアップ

管理画面のセットアップには @c-time/frelio-cli を使用する。

npx @c-time/frelio-cli init

詳細は @c-time/frelio-cli の README を参照。

管理画面の更新

npx @c-time/frelio-cli update

最新バージョンの管理画面バンドルがダウンロードされ、admin/・functions/・workers/ が更新される。admin/config.json（設定ファイル）は自動的に保護される。

パッケージ構成

@c-time/frelio-cms
├── dist/           # ビルド済み管理画面 (HTML + JS + CSS)
└── workers/        # Cloudflare Workers ソース (file-upload)

設定

管理画面は admin/config.json から実行時設定を読み込む。このファイルは frelio init で自動生成され、管理画面の「基本設定」ページ (/general-settings) からも編集できる。

| フィールド | 説明 | |-----------|------| | contentRepo | コンテンツリポジトリ (owner/repo) — 読み取り専用 | | githubClientId | GitHub OAuth App の Client ID — 読み取り専用 | | siteTitle | サイトタイトル（管理画面に表示） | | productionUrl | 本番サイトの URL | | previewUrl | ステージングプレビューの URL | | fileUploadUrl | ファイルアップロード API のパス | | pagesProjectName | Cloudflare Pages プロジェクト名（本番） | | adminPagesProjectName | Cloudflare Pages プロジェクト名（管理画面） | | r2BucketName | R2 バケット名 | | r2PublicUrl | R2 ファイル公開 URL | | allowedOrigins | CORS 許可オリジン |

技術スタック

| カテゴリ | 技術 | |---------|------| | UI フレームワーク | React 19 | | ビルドツール | Vite | | UI コンポーネント | MUI (Material UI) v6 | | ルーティング | TanStack Router | | サーバー状態管理 | TanStack Query | | クライアント状態管理 | Zustand | | フォーム | React Hook Form + Zod | | エディタ | Monaco Editor | | ホスティング | Cloudflare Pages | | ファイルストレージ | Cloudflare R2 | | 認証 | GitHub OAuth | | データストア | GitHub API |

ライセンス

MIT