📁
MisskeyでCloudflare R2を使ってCDNを構築するお話

2025/07/28に公開
かなり今更感のある記事ですが、先日Misskeyの独自インスタンスを作成することになったのと、その際CDNサービスの構築にCloudflare R2を使ったら少しだけ手間取ったのでこれを備忘録も兼ねて書き残しておきます。

画像を乱用するのでテキストベースの記事が読みやすい方はブラウザバックを…
※画像・情報は編集時点でのもの

 0. Misskeyを構築するこれについては 公式サイト をそのままコピペしまくっただけなので割愛。

この辺が分からない人はほかの記事で確認してください。

※ついでに言うと、この時点で独自ドメインに設定している前提で話を進めていきます。

 1. Cloudflare R2を登録するここから本題です。

まず、CloudflareのアカウントホームからCloudflare R2（表示： "R2 オブジェクトストレージ"）を開きます。

開いたページで "バケットを作成" を押下。

出てきた画面で、
バケット名: 好きな名前
位置情報: 自動
デフォルトのストレージクラス: Standard
に設定します。 (特別な理由がない限りはこの通りで大丈夫です)
設定完了後、 "バケットを作成" を押下。
処理完了後に表示された画面で、 "設定" を開きます。

※パブリック開発URLは必須ではないです！

設定画面で、 "パブリック開発URL" を有効化します。

表示されるモーダルに "allow" と入力して、設定を有効化します。

最後に、 "S3 API" に表示されているURL (https://123456abcdef.r2.cloudflarestorage.com/example) と、 "パブリック開発URL" に表示されているURL (https://pub-123456abcdef.r2.dev) をメモしておいてください。

※パブリック開発URLは動作確認用に使用します。
ここまでの一連の操作が終わると、次にCloudflare R2 APIの設定を行います。

まず、R2 オブジェクトストレージのトップページに移動してください。

次に、"API" の項目から "APIトークンの管理" を開きます。

出てきた画面で、 Account API トークンを作成する を押下します。

※User API トークンではないです！

表示された画面で、トークン名（自由）を指定し、アクセス許可を "オブジェクト読み取りと書き込み" に変更します。



バケットの指定は、ほかのサービスでも流用する可能性があるのであれば上のままでいいかなと思います！
設定が完了したら "Account API トークンを作成する" を押下します。


画像のような画面で、各トークンが表示されたら下準備は完了です。

ここで表示されたトークンは、Misskey側の設定を変更する際に使用するのでメモしておいてください。

※トークンは再表示されませんので注意！

 2. MisskeyとCloudflare R2を紐づける２ステップ目にしてこれが最後の段階です。

Misskeyのサーバーコンパネから "オブジェクトストレージ" を開きます。
開いたページでは、次のように設定します：
Base URL: パブリック開発URLのURL
Bucket: ステップ１で登録したバケット名
Prefix: 好きな名前
Endpoint: S3 APIのURL (最後の /バケット名 は削除）
Region: us-east-1
Access KeyにはAPIトークンでコピーした画像青の文字列、

Secret Keyには画像緑の文字列を貼り付けます。
最後のチェックボックスは、
SSLを使用する： ON
Proxyを利用する： OFF
アップロード時に'public-read' を設定する： ON
s3ForcePathStyle: ON
で登録を完了します。
ここまで設定出来たら、一度適当なファイルをノートに添付して投稿してみます。

画像のように、ぼやけずはっきりと表示されていれば正常です！お疲れさまでした。

ほかにこのように表示されず、ぼやけていたり、画像をクリックすると "この画像はロードできません" というエラーメッセージが表示された場合は何か設定が間違っている可能性があります。
最後に、URLを独自ドメインにしたい（ https://cdn.example.com のようにしたい）場合、

R2 オブジェクトストレージの設定画面から "カスタムドメイン" の設定を変更します。

表示されたモーダルに、使用したいカスタムドメインを入力します。

(例えば、 https://cdn.example.com 。未確認ですが、たぶんドメインをCloudflareに登録していないと操作がワンステップ増えるかも…？）
入力完了後、 "続行" → "ドメインに接続" を押下します。

少し待つと、カスタムドメインの欄に設定したドメインが追加されています。

ステータスの欄が "初期化中" から "アクティブ" に変更されたら設定は完了です！

ここで設定したカスタムドメインを、Misskeyのオブジェクトストレージの "Base URL" の欄に入力します。

これで完成です！

 終わりにかなり乱雑に書いたので、もしかしたらわかりにくい点があるかもしれないです。

不明な点があればコメントに書いていただけると、気付いたタイミングで記事を再編するのでお気軽にお願いします。
0. Misskeyを構築する

1. Cloudflare R2を登録する

2. MisskeyとCloudflare R2を紐づける

終わりに

Discussion
