@c-time/frelio-cli 0.1.0

package/README.md

@@ -0,0 +1,435 @@
+# @frelio/cli
+
+Frelio CMS のプロジェクトセットアップと管理を行う CLI ツール。
+
+対話式のプロンプトに従うだけで、GitHub リポジトリの作成からコンテンツ構造の初期化、Cloudflare のセットアップまで、すべてを自動化する。
+
+---
+
+## 前提条件
+
+### 1. Node.js のインストール
+
+Node.js 20 以上が必要。
+
+**Windows:**
+
+[Node.js 公式サイト](https://nodejs.org/) から LTS 版をダウンロードしてインストール。
+
+または winget:
+
+```bash
+winget install OpenJS.NodeJS.LTS
+```
+
+**macOS:**
+
+```bash
+brew install node@20
+```
+
+**Linux (Ubuntu/Debian):**
+
+```bash
+curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
+sudo apt-get install -y nodejs
+```
+
+インストール確認:
+
+```bash
+node --version   # v20.x.x 以上
+npm --version    # 10.x.x 以上
+```
+
+### 2. Git のインストール
+
+**Windows:**
+
+```bash
+winget install Git.Git
+```
+
+**macOS:**
+
+```bash
+# Xcode Command Line Tools に含まれる
+xcode-select --install
+```
+
+**Linux:**
+
+```bash
+sudo apt-get install git
+```
+
+### 3. GitHub CLI (`gh`) のインストール
+
+GitHub リポジトリの作成、ブランチ管理、デフォルトブランチ設定などに使用する。
+
+**Windows:**
+
+```bash
+winget install GitHub.cli
+```
+
+**macOS:**
+
+```bash
+brew install gh
+```
+
+**Linux:**
+
+```bash
+# https://github.com/cli/cli/blob/trunk/docs/install_linux.md を参照
+```
+
+インストール後、GitHub にログイン:
+
+```bash
+gh auth login
+```
+
+プロンプトに従い、ブラウザで認証を完了する。
+
+### 4. Wrangler CLI のインストール
+
+Cloudflare の R2 バケット作成、Pages プロジェクト作成、シークレット設定に使用する。
+
+```bash
+npm install -g wrangler
+```
+
+Cloudflare にログイン:
+
+```bash
+wrangler login
+```
+
+ブラウザが開くので、Cloudflare アカウントで認証する。
+
+---
+
+## インストール
+
+```bash
+npx @frelio/cli init
+```
+
+npm でグローバルインストールする場合:
+
+```bash
+npm install -g @frelio/cli
+frelio init
+```
+
+---
+
+## コマンド
+
+### `frelio init` — プロジェクトの新規作成
+
+対話式プロンプトで必要な情報を入力し、プロジェクトをセットアップする。
+
+```bash
+frelio init
+```
+
+#### やること
+
+1. **前提チェック** — `gh`, `wrangler`, `git` がインストールされ、ログイン済みか確認
+2. **対話式プロンプト** — リポジトリ名、サイトタイトル、R2 設定などを入力
+3. **GitHub OAuth App の案内** — OAuth App の作成手順を表示し、Client ID / Secret を入力
+4. **GitHub リポジトリ作成** — `gh repo create` でプライベートリポジトリを作成・クローン
+5. **コンテンツ初期構造の作成** — `frelio-data/` ディレクトリとメタデータファイルを生成
+6. **GitHub Actions ワークフロー配置** — ステージングビルド、本番プロモート、直接デプロイの3つ
+7. **CMS Admin バンドルの展開** — 最新リリースから `admin/`、`functions/`、`workers/` を配置
+8. **設定ファイル生成** — `admin/config.json`、`wrangler.toml`、`_redirects`、`_routes.json`
+9. **Cloudflare セットアップ** — R2 バケット作成、本番用 Pages プロジェクト作成、ステージング用 Pages プロジェクト作成、OAuth シークレット設定
+10. **ブランチ構造の作成** — `main`、`develop`、`staging` ブランチを作成・プッシュ、デフォルトブランチを `develop` に設定
+
+#### プロンプトで聞かれること
+
+| 項目 | 説明 | 例 |
+|------|------|----|
+| リポジトリ名 | `owner/repo` 形式 | `my-org/my-site` |
+| サイトタイトル | 管理画面に表示される名前 | `My Website` |
+| 本番 URL | 公開サイトの URL（任意） | `https://example.com` |
+| プレビュー URL | ステージング確認用 URL（任意） | `https://staging.example.com` |
+| R2 バケット名 | ファイルストレージ用バケット | `my-site-files` |
+| R2 公開 URL | ファイル配信の URL | `https://storage.example.com` |
+| 管理者 GitHub ユーザー名 | 最初の管理者ユーザー | `your-username` |
+| OAuth Client ID | GitHub OAuth App の Client ID | `Ov23li...` |
+| OAuth Client Secret | GitHub OAuth App の Client Secret | `********` |
+
+#### オプション
+
+```bash
+frelio init --skip-github       # GitHub 操作をスキップ（手動でリポジトリを用意する場合）
+frelio init --skip-cloudflare   # Cloudflare 操作をスキップ（後から設定する場合）
+```
+
+#### 生成されるリポジトリ構造
+
+```
+my-site/
+├── admin/                        # CMS 管理画面（ビルド済み）
+│   ├── index.html
+│   ├── config.json               # 実行時設定
+│   └── assets/
+├── public/                       # 公開サイトルート（SSG 出力先）
+│   └── _routes.json              # ファイル配信ルーティング（/storage/*）
+├── functions/                    # Cloudflare Pages Functions
+│   ├── api/
+│   │   ├── auth/                 # OAuth 認証エンドポイント
+│   │   └── storage/              # CMS ファイルアップロード API
+│   └── storage/[[path]].ts       # R2 ファイル配信（/storage/*）
+├── workers/                      # Pages Functions が参照する Worker ソース
+│   └── file-upload/
+├── frelio-data/                  # コンテンツデータ
+│   ├── site/
+│   │   ├── content_types/        # スキーマ定義
+│   │   ├── contents/
+│   │   │   ├── published/        # 公開済み
+│   │   │   └── private/          # 下書き
+│   │   ├── templates/            # HTML テンプレート
+│   │   │   └── assets/
+│   │   │       ├── scss/         # スタイルソース
+│   │   │       └── ts/           # スクリプトソース
+│   │   └── data/data-json/       # SSG 中間データ
+│   └── admin/
+│       ├── metadata/             # メタデータ
+│       ├── recipes/              # ビルドレシピ
+│       └── users/                # ユーザー管理
+├── .github/workflows/            # GitHub Actions
+├── vite.config.ts                # テンプレートアセットビルド（SCSS/TS）
+├── package.json                  # vite + sass + typescript
+├── tsconfig.json
+├── wrangler.toml                 # Cloudflare 設定（R2 バインディング）
+├── _redirects                    # /admin/* → SPA, /* → /public/:splat
+├── _routes.json                  # /api/*, /storage/* → Functions
+├── CLAUDE.md                     # AI アシスタント用プロジェクト説明
+└── version.json                  # バージョン管理
+```
+
+---
+
+### `frelio add-staging` — ステージング環境の追加
+
+カスタムステージング環境（プレビュー用ブランチ + Cloudflare Pages プロジェクト）を追加する。プロジェクトのルートディレクトリで実行する。
+
+```bash
+cd my-site
+frelio add-staging
+```
+
+#### やること
+
+1. **前提チェック** — `git`, `wrangler` がインストール済みか確認
+2. **対話式プロンプト** — ステージング名、Pages プロジェクト名、カスタムドメインを入力
+3. **Git ブランチ作成** — `develop` から `staging-{name}` ブランチを作成・プッシュ
+4. **Pages プロジェクト作成** — `wrangler pages project create` で作成（Production branch: `staging-{name}`）
+5. **ワークフロー確認** — `build-staging.yml` のブランチリストに対応済みか確認、未対応なら案内を表示
+
+#### プロンプトで聞かれること
+
+| 項目 | 説明 | 例 |
+|------|------|----|
+| ステージング名 | ブランチ名に使われる識別子 | `design`, `alice` |
+| Pages プロジェクト名 | Cloudflare Pages プロジェクト名 | `my-site-staging-design` |
+| カスタムドメイン | 任意。空欄なら `<project>.pages.dev` | `staging-design.example.com` |
+
+#### オプション
+
+```bash
+frelio add-staging --name design              # 名前を事前指定
+frelio add-staging --skip-cloudflare          # Pages プロジェクト作成をスキップ
+```
+
+#### 完了後の手動作業
+
+| 作業 | 必須 |
+|------|:----:|
+| Cloudflare Pages でリポジトリを接続 | ○ |
+| カスタムドメインの設定 | - |
+| Cloudflare Access でアクセス制限 | 推奨 |
+| CMS 管理画面の `/staging` ページでブランチを登録 | ○ |
+
+---
+
+### `frelio update` — CMS Admin の更新
+
+CMS Admin バンドルを最新バージョン（または指定バージョン）に更新する。
+
+```bash
+cd my-site
+frelio update
+```
+
+#### やること
+
+1. `admin/config.json` をバックアップ
+2. 指定バージョン（またはLatest）のリリースをダウンロード
+3. `admin/`、`functions/`、`workers/` を新しいバンドルで置き換え
+4. `admin/config.json` を復元
+
+`config.json` は自動的に保護されるため、設定が上書きされることはない。
+
+#### オプション
+
+```bash
+frelio update                     # 最新バージョンに更新
+frelio update --version v1.2.0    # 特定バージョンに更新
+```
+
+---
+
+## セットアップ後の手動作業
+
+CLI 完了後、Cloudflare Dashboard での設定が必要。
+
+### 1. 本番 Pages: GitHub リポジトリの接続
+
+CLI が作成した Pages プロジェクトに GitHub リポジトリを接続する。
+
+1. [Cloudflare Dashboard](https://dash.cloudflare.com/) → Pages → **本番プロジェクト**（例: `my-site`）を選択
+2. **Settings** → **Builds & deployments** → **Connect to Git**
+3. GitHub リポジトリを選択
+4. ビルド設定:
+   - **Production branch**: `main`
+   - **Build command**: （空欄）
+   - **Build output directory**: `/`
+
+### 2. ステージング Pages: GitHub リポジトリの接続
+
+CLI が作成したステージング用 Pages プロジェクトに同じリポジトリを接続する。
+
+1. Cloudflare Dashboard → Pages → **ステージングプロジェクト**（例: `my-site-staging`）を選択
+2. **Settings** → **Builds & deployments** → **Connect to Git**
+3. 同じ GitHub リポジトリを選択
+4. ビルド設定:
+   - **Production branch**: `staging`
+   - **Build command**: （空欄）
+   - **Build output directory**: `public/`
+
+### 3. ステージング: カスタムドメインの設定（任意）
+
+デフォルトでは `<project-name>.pages.dev` でアクセスできるが、独自ドメインを使う場合:
+
+1. ステージング Pages プロジェクト → **Custom domains** → **Set up a custom domain**
+2. ドメインを入力（例: `staging.example.com`）
+3. DNS レコードの自動追加を確認・承認
+
+### 4. ステージング: アクセス制限の設定（推奨）
+
+ステージングサイトは公開前のプレビュー用なので、アクセスを制限することを推奨する。
+
+#### 方法 A: Cloudflare Access（推奨）
+
+メールアドレスベースのアクセス制限。ワンタイムコードまたは Google OAuth で認証する。
+
+1. Cloudflare Dashboard → **Zero Trust** → **Access** → **Applications** → **Add an application**
+2. **Self-hosted** を選択
+3. 以下を設定:
+
+| 設定項目 | 値 |
+|---------|-----|
+| Application name | `staging` |
+| Application domain | ステージングのドメイン（例: `staging.example.com` or `my-site-staging.pages.dev`） |
+| Policy name | `allowed-users` |
+| Action | Allow |
+| Include rule | **Emails** — アクセスを許可するメールアドレスを列挙 |
+
+Cloudflare Access は 50 ユーザーまで無料。
+
+#### 方法 B: Cloudflare Pages のアクセス制限
+
+Pages プロジェクトの設定でプレビューデプロイメントのアクセスを制限できる（簡易的）。
+
+1. ステージング Pages プロジェクト → **Settings** → **General** → **Access Policy**
+2. アクセスポリシーを有効化
+
+### 5. R2 カスタムドメインの設定（任意）
+
+`wrangler.toml` で `R2_PUBLIC_URL` を設定した場合、R2 バケットにカスタムドメインを紐付ける:
+
+1. Cloudflare Dashboard → **R2** → バケットを選択 → **Settings** → **Custom Domains**
+2. カスタムドメインを追加（例: `storage.example.com`）
+
+### まとめ: 手動作業チェックリスト
+
+| # | 作業 | 必須 |
+|---|------|:----:|
+| 1 | 本番 Pages ↔ GitHub 接続 | ○ |
+| 2 | ステージング Pages ↔ GitHub 接続 | ○ |
+| 3 | ステージング アクセス制限 | 推奨 |
+| 4 | カスタムドメイン設定 | - |
+| 5 | R2 カスタムドメイン | - |
+
+---
+
+## GitHub OAuth App の作成手順
+
+`frelio init` 実行中に案内が表示されるが、事前に作成しておくこともできる。
+
+1. [GitHub Developer Settings](https://github.com/settings/developers) にアクセス
+2. **OAuth Apps** → **New OAuth App**
+3. 以下を入力:
+   - **Application name**: `My Site CMS`（任意）
+   - **Homepage URL**: `https://<pages-project>.pages.dev`
+   - **Authorization callback URL**: `https://<pages-project>.pages.dev/api/auth/callback`
+4. **Register application** をクリック
+5. **Client ID** をメモ
+6. **Generate a new client secret** → **Client Secret** をメモ
+
+---
+
+## ファイル配信の設定
+
+アップロードした画像やファイルを公開配信するには、R2 バケットにカスタムドメインを設定する。
+
+1. Cloudflare Dashboard → R2 → バケットを選択 → **Settings** → **Custom Domains**
+2. カスタムドメインを追加（例: `storage.example.com`）
+3. `admin/config.json` の `fileUploadUrl` は `/api/storage` のままでよい（API は Pages Functions が処理する）
+
+公開配信 URL（`R2_PUBLIC_URL`）は `wrangler.toml` の `[vars]` で設定済み。
+
+---
+
+## トラブルシューティング
+
+### `gh: command not found`
+
+GitHub CLI がインストールされていない。[前提条件](#3-github-cli-gh-のインストール) を参照。
+
+### `wrangler: command not found`
+
+Wrangler CLI がインストールされていない。[前提条件](#4-wrangler-cli-のインストール) を参照。
+
+### `gh auth status` でエラー
+
+`gh auth login` を実行してログインする。
+
+### OAuth エラー: "redirect_uri mismatch"
+
+GitHub OAuth App の **Authorization callback URL** を確認:
+
+- 正: `https://<project>.pages.dev/api/auth/callback`
+- 誤: `https://<project>.pages.dev/auth/callback`（`/api` が抜けている）
+
+### R2 バケット作成で "already exists"
+
+同名のバケットが既に存在する。CLI は自動的にスキップするので問題ない。
+
+### Pages プロジェクト作成で "already exists"
+
+同名のプロジェクトが既に存在する。CLI は自動的にスキップするので問題ない。
+
+### `config.json` の読み込みに失敗する
+
+`admin/config.json` が存在し、正しい JSON であることを確認。`frelio update` で config.json が消えた場合は、バックアップから復元するか手動で再作成する。
+
+### 組織リポジトリへのアクセスで 403 エラー
+
+GitHub OAuth App に対して組織のアクセス権が付与されていない可能性がある。GitHub → Settings → Applications → Authorized OAuth Apps から対象アプリの組織アクセスを許可（Grant）する。

package/dist/commands/add-staging.d.ts

@@ -0,0 +1,9 @@
+/**
+ * frelio add-staging - ステージング環境（プレビュー用ブランチ）の追加
+ */
+type AddStagingOptions = {
+    name?: string;
+    skipCloudflare?: boolean;
+};
+export declare function addStagingCommand(options: AddStagingOptions): Promise<void>;
+export {};

package/dist/commands/add-staging.js

@@ -0,0 +1,202 @@
+/**
+ * frelio add-staging - ステージング環境（プレビュー用ブランチ）の追加
+ */
+import prompts from 'prompts';
+import { exec, commandExists, log, logStep, logSuccess, logError } from '../lib/shell.js';
+import { generateHash } from '../lib/templates.js';
+export async function addStagingCommand(options) {
+    log('');
+    log('🌿 ステージング環境の追加');
+    log('');
+    // 前提チェック
+    if (!commandExists('git')) {
+        logError('git が見つかりません。');
+        process.exit(1);
+    }
+    // Git リポジトリ内か確認
+    try {
+        exec('git rev-parse --is-inside-work-tree', { silent: true });
+    }
+    catch {
+        logError('Git リポジトリ内で実行してください。');
+        process.exit(1);
+    }
+    // wrangler チェック
+    if (!options.skipCloudflare) {
+        if (!commandExists('wrangler')) {
+            logError('wrangler CLI が見つかりません。`npm i -g wrangler` でインストールしてください。');
+            process.exit(1);
+        }
+        try {
+            exec('wrangler whoami', { silent: true });
+        }
+        catch {
+            logError('wrangler にログインしていません。`wrangler login` を実行してください。');
+            process.exit(1);
+        }
+    }
+    // 本番 Pages プロジェクト名とドメインを推定
+    let basePagesProject = '';
+    let baseDomain = '';
+    try {
+        const wranglerToml = exec('cat wrangler.toml', { silent: true });
+        const nameMatch = wranglerToml.match(/^name\s*=\s*"([^"]+)"/m);
+        if (nameMatch) {
+            basePagesProject = nameMatch[1];
+        }
+    }
+    catch {
+        // wrangler.toml がなくても続行
+    }
+    try {
+        const configJson = exec('cat admin/config.json', { silent: true });
+        const config = JSON.parse(configJson);
+        if (config.productionUrl) {
+            const url = new URL(config.productionUrl);
+            baseDomain = url.hostname;
+        }
+        else if (config.previewUrl) {
+            // previewUrl から親ドメインを推定（staging-xxx.example.com → example.com）
+            const url = new URL(config.previewUrl);
+            const parts = url.hostname.split('.');
+            if (parts.length > 2) {
+                baseDomain = parts.slice(-2).join('.');
+            }
+        }
+    }
+    catch {
+        // config.json がなくても続行
+    }
+    // 対話式プロンプト
+    const response = await prompts([
+        {
+            type: options.name ? null : 'text',
+            name: 'name',
+            message: 'ステージング名（staging-{name} のブランチが作成されます）:',
+            validate: (v) => {
+                if (!v)
+                    return 'ステージング名を入力してください';
+                if (!/^[a-z0-9][a-z0-9-]*$/.test(v))
+                    return '小文字英数字とハイフンのみ使用可能です';
+                if (v === 'staging')
+                    return '"staging" は予約済みです。別の名前を使用してください';
+                return true;
+            },
+        },
+        {
+            type: 'text',
+            name: 'pagesProject',
+            message: 'ステージング用 Pages プロジェクト名:',
+            initial: (_prev, values) => {
+                const name = options.name || values.name || '';
+                return basePagesProject ? `${basePagesProject}-staging-${name}` : '';
+            },
+            validate: (v) => v.length > 0 || 'プロジェクト名を入力してください',
+        },
+        {
+            type: 'text',
+            name: 'domain',
+            message: 'カスタムドメイン（推測困難なハッシュ付き推奨）:',
+            initial: (_prev, values) => {
+                const name = options.name || values.name || '';
+                const hash = generateHash();
+                if (baseDomain) {
+                    return `${name}-${hash}.${baseDomain}`;
+                }
+                const project = basePagesProject || 'site';
+                return `${project}-${name}-${hash}.pages.dev`;
+            },
+        },
+    ], { onCancel: () => process.exit(0) });
+    const stagingName = options.name || response.name;
+    if (!stagingName) {
+        log('キャンセルしました。');
+        process.exit(0);
+    }
+    const branchName = `staging-${stagingName}`;
+    const pagesProject = response.pagesProject;
+    log('');
+    const totalSteps = options.skipCloudflare ? 2 : 3;
+    let step = 0;
+    // Step 1: Git ブランチ作成
+    step++;
+    logStep(step, totalSteps, `ブランチ "${branchName}" を作成...`);
+    try {
+        // develop から分岐
+        exec('git fetch origin', { silent: true });
+        // ブランチが既に存在するか確認
+        try {
+            exec(`git rev-parse --verify origin/${branchName}`, { silent: true });
+            logSuccess(`ブランチ "${branchName}" はリモートに既に存在します`);
+        }
+        catch {
+            // ローカルブランチ作成 & プッシュ
+            exec(`git branch ${branchName} origin/develop`, { silent: true });
+            exec(`git push -u origin ${branchName}`, { silent: true });
+            logSuccess(`ブランチ "${branchName}" を作成・プッシュしました`);
+        }
+    }
+    catch (error) {
+        logError(`ブランチ作成失敗: ${error.message}`);
+        process.exit(1);
+    }
+    // Step 2: Cloudflare Pages プロジェクト作成
+    if (!options.skipCloudflare) {
+        step++;
+        logStep(step, totalSteps, `Pages プロジェクト "${pagesProject}" を作成...`);
+        try {
+            exec(`wrangler pages project create ${pagesProject} --production-branch ${branchName}`, {
+                silent: true,
+            });
+            logSuccess(`Pages プロジェクト "${pagesProject}" を作成しました`);
+        }
+        catch (error) {
+            const msg = error.message;
+            if (msg.includes('already exists')) {
+                logSuccess(`Pages プロジェクト "${pagesProject}" は既に存在します`);
+            }
+            else {
+                logError(`Pages プロジェクト作成失敗: ${msg}`);
+            }
+        }
+    }
+    // Step 3: build-staging.yml のブランチリスト確認
+    step++;
+    logStep(step, totalSteps, 'GitHub Actions ワークフローを確認...');
+    try {
+        const workflow = exec('cat .github/workflows/build-staging.yml', { silent: true });
+        if (workflow.includes('staging-*') || workflow.includes(`staging-${stagingName}`)) {
+            logSuccess('ワークフローは既に対応済みです（ワイルドカードまたは明示列挙）');
+        }
+        else {
+            log(`  ⚠ .github/workflows/build-staging.yml の branches に "${branchName}" を追加してください:`);
+            log('');
+            log('    branches:');
+            log('      - staging');
+            log(`      - ${branchName}  # ← 追加`);
+            log('');
+            log('    または、ワイルドカード "staging-*" を使用するとすべてのカスタム staging に対応できます。');
+        }
+    }
+    catch {
+        log('  ⚠ .github/workflows/build-staging.yml が見つかりません。手動で確認してください。');
+    }
+    // 完了
+    log('');
+    log('✅ ステージング環境の追加が完了しました！');
+    log('');
+    log(`  ブランチ: ${branchName}`);
+    if (!options.skipCloudflare) {
+        const domain = response.domain || `${pagesProject}.pages.dev`;
+        log(`  URL: https://${domain}`);
+    }
+    log('');
+    log('  残りの手動作業:');
+    log('  - Cloudflare Pages でリポジトリを接続（GitHub integration）');
+    if (response.domain) {
+        log(`  - Pages プロジェクトにカスタムドメイン "${response.domain}" を設定`);
+    }
+    log('  - Cloudflare Access でアクセス制限を設定（推奨）');
+    log('  - CMS 管理画面の /staging ページでステージングブランチを登録');
+    log('');
+}

package/dist/commands/init.d.ts

@@ -0,0 +1,9 @@
+/**
+ * frelio init - 新規プロジェクトの対話式セットアップ
+ */
+type InitOptions = {
+    skipGithub?: boolean;
+    skipCloudflare?: boolean;
+};
+export declare function initCommand(options: InitOptions): Promise<void>;
+export {};