RetroCraft
Github Twitter Linkedin

microfeed on Cloudflare

microfeed on Cloudflare

目的：Cloudflareの無料枠(Pages, Workers, D1, R2)で使用できる、ヘッドレスCMSを探して実装してみる。Gemini CLI に比較してもらったところ、microfeedをつかってみては？と提案されたので使用してみる事にした。


  1. 初期状況の確認とプロジェクトの構築:

    * Cloudflare Workers & Pages プロジェクトをゼロから構築することになりました。create-cloudflareコマンドでの自動生成が環境の制約で難しかったため、package.json、wrangler.toml、src/index.tsを手動で作成し、必要な依存関係をインストールしました。この際 wrangler.toml には D1 データベースと R2バケットのバインディングを設定しました。


  2. Cloudflare API トークンとリソースの準備:

    * Microfeed のデプロイに必要な Cloudflare API トークン、D1 データベース (microfeed-db)、R2 バケット (microfeed)を手動で作成

    * D1: ダッシュボード > 左のメニュー > ストレージとデータベース > D1 データベース > データベースを作成

R2: ダッシュボード > 左のメニュー > R2 オブジェクト ストレージ > バケットを作成

    * この時にはまだ、環境変数で必要な項目を把握していなかった。


  3. Cloudflare Workers のデプロイ試行とトラブルシューティング:

    * 作成した Worker のデプロイを試みましたが、CLOUDFLARE_API_TOKEN 環境変数が認識されない問題が発生しました。

    * 最終的に、APIトークンの権限不足（User->User Details->Read、Account -> Account Settings -> Readなど）が原因であることが判明し、権限を段階的に追加することで、汎用的な「Hello World」Workerのデプロイに成功しました。

    * 上記の認識がダメな場合、Cloudflareのウェブログインで認識可能でした。


  4. Microfeed アプリケーションのデプロイ:

    * Microfeed は Cloudflare Pages を介してデプロイされることが判明

    * Cloudflare のAPI設定が必要になるという事で設定

    Cloudflare Account の権限:マイプロフィール > APIトークン > カスタムトークン   

  - `Account -> Workers R2 Storage -> Edit`（添付ファイルや画像保存用）

  - `Account -> Workers KV Storage -> Edit`（キャッシュや設定保存用）

  - `Account -> D1 -> Edit`（DBとして利用）

  - `Account -> Cloudflare Pages -> Edit`（フロントエンド配信）

  - `Account -> Workers Script -> Edit`（バックエンド API/処理）

  - `Account -> Workers Tail -> Read`（ログ確認用、必須ではないが便利）

- **便利だが必須ではない**

  - `Account -> Account Settings -> Read`（通常は不要）

  - `User -> User detail -> Read`（通常は不要）

- **ゾーン関連（DNS/SSL）**

  - microfeed 自体は Cloudflare Pages/Workers で公開できるので、

  - **カスタムドメインを使う場合のみ必要**

    - `Zone -> DNS -> Edit`（独自ドメインのレコード追加用）

    - `Zone -> SSL and Certificates -> Edit`（独自ドメインの証明書設定用）

    - `Zone -> Zone Settings -> Read`（おまけ程度）

    

    * Microfeed の GitHub リポジトリをフォーク

    * GitHub Actions でのデプロイを可能にするため、以下のシークレットを GitHub リポジトリに設定

    * Github forked microfeed > Settings > Secrets and variables > Actions > Repository secrets

      * CLOUDFLARE_API_TOKEN > マイプロフィール > APIトークン > カスタムトークン

      * CLOUDFLARE_ACCOUNT_ID > ダッシュボード > コンピューティング > Workers & Pages > アカウント ID

      * R2_ACCESS_KEY_ID > R2 オブジェクト ストレージバケット上

      * R2_SECRET_ACCESS_KEY > R2 オブジェクト ストレージバケット上

      * D1_DATABASE_NAME > D1 データベース > D1データベース名上

      * D1_DATABASE_ID > D1 データベース > D1データベース名上

      * CLOUDFLARE_PROJECT_NAME > Workers & Pages > プロジェクト名: microfeed


  GitHub ActionsのTypeError が発生しましたが、これはワークフローファイル (deploy.yml) に D1 データベース名と R2バケット名を環境変数を全部を設定する必要がある為でした。GitHubに全部の環境変数を登録することで GitHub Actions が再実行されました。

    * 最終的に、Microfeed アプリケーションの Cloudflare Pages へのデプロイが成功し、そのURLを特定できました。これで、Microfeed アプリケーションのデプロイが完了し、管理画面にアクセスできる状態になりました。


Cloudflare Zero Trust 設定

・ダッシュボード > ZeroTrust > Access > アプリケーション > アプリケーションを追加する。

アプリケーション名：yourdomain.com/admin　セッション時間：24時間　セルフホスト

・パブリックホスト名

入力方法：デフォルト　サブドメイン：なし　ドメイン：yourdomain.com パス：admin


・ルールグループ基本情報

ルールグループ名：Admin group　ルール・包含・セレクター：Emails　値：your@adminmail


・ポリシー基本情報

ポリシー名：Admin only　アクション：Allow　セッション時間：24時間

ルールを追加する・包含・セレクター：Rule group　値：Admin group