Intro
これまで私の画像ホスティングは、Cloudflare と Telegraph という“太っ腹な2つのサービス”に頼っていました。この2つなら自分のブログより長く生きるだろうと思い、長期的な解決策として十分に信頼できて使いやすく、何より無料だと考えていました。
だが最近、Telegram の CEO が逮捕されたり、韓国も検閲をめぐって Telegram と対立したりしています。その影響かもしれませんが、Telegraph の画像ホスティングには新しい画像をアップロードできなくなっていました。古い画像はまだ閲覧できますが、いつ使えなくなるかわかりません。
そこで新しい画像ホスティングを探し始めました。私の希望は信頼できて使いやすく、できれば無料です。Cloudflare R2+PicGo+WebP Cloud は、まさにそんな解決策です。
主に参考にしたのはこの記事です。そのほかに、WebP Cloud のカスタムドメイン設定とTelegraph から R2 への画像移行の内容も含みます。
セットアップ
2024年9月時点で、このセットアップ手順が有効であることは保証できます。
必要なもの
- Cloudflare アカウントと、クレジットカードの登録（R2 を有効化するために必須）
- ドメイン（必須ではないが、あったほうがかっこいい）
では、始めましょう...
Cloudflare R2 を有効にする
- Cloudflare コンソール を開き、
R2を選択します。ここでR2の無料枠を確認できるので、同意して有効化します。 - 新しいバケットを作成します（
Create bucket）- 好きな名前を入力します（例：
image）。 - 希望するリージョンを選択します（例：
APAC）。 Create bucketをクリックして作成します。
- 好きな名前を入力します（例：
- 作成した
imageというバケットをクリックします。- ドメインを持っている場合は、
settingからCustom Domainsを設定します（Cloudflare でドメインを管理していれば、すぐに追加できます）。 - ドメインを持っていない場合は、
settingにあるR2.dev subdomainの横のAllow Accessをクリックし、allowと入力します。するとxxxxxx.r2.devというアドレスが発行されます。 - ここまでできれば、画像をアップロードできるはずです。
imageバケットのObjectsセクションから画像をアップロードして試せます。
- ドメインを持っている場合は、
- ページ左側の R2 をクリックして
Overviewに戻り、Account detailsのAccount IDの下にあるManage R2 API Tokensをクリックします。Create API tokenをクリックして、新しい API トークンを作成します。- 名前を付けます（例：
image-R2）。 PermissionでObject Read & Writeを選択します。Specify bucketsで、先ほど作成したimageを選択します。Create API Tokenをクリックして作成します。- PicGo に必要な情報（
Access Key ID、Secret Access Key、endpoints）が表示されます。表示されるのは一度だけなので、先に保存しておいてください。
- これで Cloudflare ダッシュボードでの操作はすべて完了です。
PicGo を設定する
- PicGo をダウンロードします。
- インストールしたら、プラグイン設定を開き、
s3と検索します。作者がWayJam Soのプラグインを見つけてインストールします。 - 画像ホスティングの設定を開き、
Amazon S3を見つけて、デフォルト設定を追加または変更します。- 設定名は何でも構いません（例：
r2）。 应用密钥 IDにAccess Key IDを入力します。应用密钥にSecret Access Keyを入力します。桶名に設定したバケット名を入力します（ここではimage）。自定义节点にendpointsを入力します。自定义域名に設定したCustom Domainsまたは Cloudflare が割り当てたxxxxxx.r2.devアドレスを入力します。- OK をクリックします。
- 設定名は何でも構いません（例：
- これで、
PicGoから画像をアップロードできるはずです。
WebP Cloud で URL をプロキシする
- WebP Cloud ダッシュボード にアクセスしてログインします。
- 左側の
Priceセクションを開くと、無料枠が確認できます。 - 左側の
Homeセクションを開き、下にスクロールしてCreate Proxyをクリックします。- 好きなリージョンを選択します（ここでは
Hillsboro, ORを選びました）。 Proxy Nameは何でも構いません（例：R2-image）。Proxy Origin URLには、設定したCustom Domainsまたは Cloudflare が割り当てたxxxxxx.r2.devアドレスを入力します。Createをクリックして作成します。- すると、
xxxxxx.webp.liというアドレスが割り当てられます。
- 好きなリージョンを選択します（ここでは
- カスタムドメインを設定したい場合は、作成した Proxy を開いて
Custom domainをクリックします。表示される手順に従って DNS に該当するレコードを追加すれば、少し待つだけでCustom domainからカスタムドメインを有効化できます。 - 次に、
PicGoの自定义域名を、WebP Cloudで設定したカスタムドメインか、WebP Cloudが割り当てたxxxxxx.webp.liアドレスに変更します。
移行
Telegraph の画像ホスティングには、まだ大量の画像が残っています。全部 R2 に移行したいのですが、PicGo のプラグイン pic-migrater（作者：Molunerfinn）がよい選択肢です。
- プラグインをダウンロードしたら、プラグイン設定を開き、プラグイン右下の歯車アイコンをクリックして、
配置 plugin - picgo-plugin-pic-migraterをクリックします。 - 新しいファイル名の接尾辞は何でも構いません（例：
_new）。 旧内容写入新文件を no に設定すると、変換されたファイルは源文件名_new.mdという名前になるので、あとで確認しやすくなります。
ただ、一部の Markdown ファイルでは pic-migrater で移行できないことがあります。解決方法はまだわかっていません。そういう取り残されたファイルは、ひとつずつ手動で処理しています。
Outro
以上です。