無料で10GBまで音声やムービーも投稿OKなブログをセルフホストできる「microfeed」レビュー、Cloudflareを使ってサーバー不要に

ブログを開設する際に利用できるサービスは多数存在していますが、その中でも「サーバーを用意せずにセルフホストしたい」という場合に活用できるのが「microfeed」というシステムです。Cloudflare上で動いて音声や画像、ムービーなどを投稿可能とのことなので、早速使ってみて実力を確認しました。

GitHub - microfeed/microfeed: a lightweight cms self-hosted on cloudflare, for podcasts, blogs, photos, videos, documents, and curated urls.
https://github.com/microfeed/microfeed

microfeedを利用するにはGithubのアカウントおよびCloudflareのアカウントが必要です。

Join GitHub · GitHub
https://github.com/signup

Cloudflare | Web Performance & Security
https://dash.cloudflare.com/sign-up

Githubのmicrofeedのページを開き、「Fork」をクリック。

設定はそのままで「Create fork」をクリックします。

自分のアカウント上にfork版のリポジトリが作成されるので、fork版を開いている事を確認して「Settings」をクリック。

左のメニューで「Secrets and variables」を開き、「Actions」をクリックします。

シークレットを5個セットするので、Ctrlキーを押しながら「New repository secret」を5回クリックして別のタブで開いておきます。ここから必要なAPIのデータを集めていきます。

別のウィンドウを開いてCloudflareにログインし、ダッシュボードの「dash.cloudflare.com/」以下の部分をコピー。

先ほどのシークレット入力画面に戻り、Name欄に「CLOUDFLARE_ACCOUNT_ID」と入力。SecretにコピーしておいたIDを貼り付けて「Add secret」をクリックします。

続いてAPIトークンを用意します。CloudflareのAPIトークンのページを開き、「トークンを作成する」をクリック。

「カスタムトークンを作成する」の欄の「始める」をクリックします。

トークン名はなんでもOK。今回は「microfeed token」にしました。アクセス許可の欄で「Cloudflare Pages」と「D1」を選び、右の欄で両方「編集」を選択します。

その他の設定は変更せず「概要に進む」をクリック。

「トークンを作成する」をクリックします。

APIトークンをコピーして……

Githubの2個目のシークレット欄に入力します。Name欄に「CLOUDFLARE_API_TOKEN」と入力して「Add secret」をクリック。

続いてR2の設定を行います。CloudflareのR2のページを開き、「R2プランを購入する」をクリック。

料金を確認して「お支払いの概要に進む」をクリックします。記事作成時点では書き込み100万回、読み取り1000万回、容量10GBまで無料とのこと。

確認画面が表示されるので「購入完了」をクリック。

「R2に進む」をクリックします。

右上にある「R2 APIトークンの管理」をクリック。

「APIトークンを作成する」をクリックします。

アクセス許可の欄を「編集」にセット。

その他の設定は変更せず「APIトークンを作成する」をクリックします。

アクセスキーIDをコピーして……

Githubのシークレット入力欄にペーストし、Name欄に「R2_ACCESS_KEY_ID」と入力して「Add secret」をクリック。

シークレットアクセスキーの方も同様にコピーして……

今度はName欄に「R2_SECRET_ACCESS_KEY」と入力し、Secret欄にシークレットアクセスキーをペーストして「Add secret」をクリックします。

5個目のシークレット設定ではName欄に「CLOUDFLARE_PROJECT_NAME」と入力し、Secret欄に適当な名前を入力します。カスタムドメインを利用しない場合、ここに入力した名前がURLに利用されることになります。

GithubのSecrets欄がこんな感じになればOK。

リポジトリの「Actions」に移動し、「I understand my workflows, go ahead and enable them」をクリックします。

「Deploy to Cloudflare Pages」をクリックし、「Run workflow」を開いて緑色の「Run workflow」をクリック。

自動でデプロイが始まります。

5分ほど待つと完了マークが表示されました。

CloudflareのPagesページを開くと、先ほど設定したプロジェクト名でサイトが作成されているので「サイトにアクセス」をクリックして開きます。

自動で管理画面にリダイレクトされました。

まずR2の設定をする必要があります。「Where to find your R2 public bucket url?」を開き、「Cloudflare Dashboard / R2 Bucket Settings →」をクリック。

R2の設定画面が開くので、「r2.devサブドメイン」の「アクセスを許可」をクリックします。

r2.devサブドメインはレート制限されており、本番環境ではカスタムドメインを利用するようにとの注意書きが出現します。今回はレート制限に引っかかるような利用をしないため、このまま「allow」と入力して「許可」をクリック。

項目名の隣に「許可」という表示が出てパブリックURLが出現しました。パブリックURLをコピーして……

microfeedの設定画面に貼り付け、「Update」をクリックします。

続いて管理画面に認証を設定します。「Add Login to Admin Dashboard」を開き、「Step 1: Add an access group」の項目にある「Cloudflare Dashboard / Add an access group →」をクリック。

Cloudflare Accessの設定画面が開くので、適当にチーム名を決めて「Next」をクリックします。

プランを選択するように言われますが、今回の利用方法だとFreeプランで問題ありません。下にスクロールして……

「Select plan」をクリック。

「Proceed to payment」をクリックします。

確認画面に移行するので「Purchase」をクリック。

Cloudflare Accessのトップページに戻ってしまうので、もう一度microfeedの設定画面から「Cloudflare Dashboard / Add an access group →」をクリックします。

Group name欄に「Admin group」と入力し、「Set as default group」にチェックを入れます。

さらに「Group configuration」の欄で「Selector」を「Emails」にし、自分のメールアドレスを入力して「Save」をクリック。

microfeedの画面に戻り、「Step 2: Create a self-hosted app to protect～」を開き、直下にある「Cloudflare Dashboard / Create a self-hosted app →」をクリックします。

「Self-hosted」の「Select」をクリック。

Application name欄を適当に入力します。今回は保護対象のURLにしました。Path欄に「admin」と入力し、Domain欄でmicrofeedのアドレスを選択。

その他の設定は変更せずに「Next」をクリックします。

Policy nameに「Admin only」と入力して……

「Next」をクリック。

「Add application」をクリックします。

microfeedの画面をリロードするとCloudflare Accessの認証画面になりました。メールアドレスを入力して「Send me a code」をクリック。

入力したメールアドレスにコードが届いているのでコピーして……

Cloudflare Accessに貼り付けて「Sign in」をクリック。

microfeedの管理画面ではカスタムドメインの設定方法についても解説されていますが、今回はカスタムドメインを利用しないのでmicrofeedの設定は完了です。

さっそくmicrofeedを使ってみます。「Add new item」で新しいコンテンツを投稿できる模様。上でアップロードするファイルを選択し、下にその説明を記入する形式です。

試しにmp3形式の音声ファイルをアップロードしてみました。

プレビューが表示され、アップロードした音声が正しいかどうかを確認可能です。「Create」をクリックすると投稿完了。

投稿したコンテンツは「See all items」タブで確認可能です。

投稿した内容は後からでも編集可能です。タイトルやサムネイルを差し替えるほか、音声ファイル自体の差し替えも可能となっています。変更したい場所を書き換えて「Update」をクリックすればOK。

また、ブログ記事を投稿する場合はタイトルを入力後、下のビジュアルエディタを利用すれば良さそうです。

投稿したコンテンツは編集画面の「Update」の下にある「Public access」の欄でURLを取得可能。「web item」をクリックしてみると……

こんな感じで表示されました。

続いてサムネイルを設定してみます。

サムネイルはAboutの下に表示される模様。「←ブログ記事」と書かれたリンクをクリックし、トップページの様子を確認すると……

ブログのタイトルを設定していないため、「untitled」となっていました。RSSやJSONが自動で生成されるため、読者が簡単に購読可能です。下部に記事一覧が載っていますが、ここにサムネイル画像は表示されない模様です。

ブログのタイトルや画像は「Edit channel」ページで設定できます。タイトル欄に「microfeedでブログを作ってみた！」と入力して「Update」をクリックすると……

無事タイトルが変更できました。