無料画像ホスティングの決定版:Cloudflare R2 + PicGoで構築する最強の個人用画像サーバー

イントロダクション
ブログを書くエンジニアにとって、「画像どこに置く問題」は永遠のテーマでした。
2023年頃、私はGitHubリポジトリに画像を置いてjsDelivr経由で配信していましたが、ある日突然DNS汚染で画像が表示されなくなり、真っ青になった経験があります。
無料の画像アップローダーはいつ消えるか分からないし、AWS S3やGoogle Cloud Storageは個人で使うには転送料金が怖い(いわゆる「パケ死」)。七牛雲(Qiniu)などの中国国内サービスはICP登録(备案)が必要で手続きが面倒です。
「無料枠が大きくて、転送料金がかからず、将来にわたって安定しているサービスはないものか……」
そんな虫のいい話があるわけないと思っていたら、ありました。Cloudflare R2です。
R2の衝撃的なスペック:
- 10GB ストレージ無料
- 100万回 アップロード(クラスA操作)/月 無料
- 1000万回 ダウンロード(クラスB操作)/月 無料
- そして何より、下り転送量(Egress)が完全に無料
個人のブログ運営なら、実質「永久無料」と言っても過言ではありません。しかもAWS S3互換APIを持っているので、既存のツール(PicGoなど)がそのまま使えます。
この記事では、Cloudflare R2をバックエンドに、PicGoをクライアントツールとして使い、快適な画像アップロード環境を構築する手順を完全ガイドします。もう画像ホスティングで悩む必要はありません。
なぜCloudflare R2一択なのか?
他の無料・格安プランとの比較
- GitHub + jsDelivr: 以前の鉄板でしたが、規約的にグレー(バイナリ倉庫としての利用は推奨されない)であり、国内からのアクセスが不安定になるリスクがあります。
- AWS S3: 王者ですが、転送料金が高いです。記事がバズってアクセスが集中すると、翌月の請求で泣くことになります。
- Imgurなどの無料アップローダー: サービス終了や規約変更のリスクと隣り合わせです。データの所有権を自分で持てないのが最大のネック。
R2の優位性
- エグレス料金(転送料金)無料: これが最強です。Cloudflareの巨大なCDN網を使っているため、自分でCDNを前段に置く設定をしなくても、標準で高速配信されます。
- S3互換: S3向けに作られたエコシステム(バックアップツール、CMSプラグイン、PicGoなど)がそのまま使えます。将来別のサービスに移行したくなっても容易です。
- 安定性: Cloudflareという巨大企業のインフラなので、突然サービス終了するリスクは極めて低いです。
ステップバイステップ構築ガイド
Step 1: R2の有効化とバケット作成
- Cloudflareアカウント登録: まだなら登録しましょう。無料です。
- R2の有効化: ダッシュボード左側の「R2」メニューをクリック。「Enable R2」を押します。
- 注意: 有効化にはクレジットカード(またはPayPal)の登録が必須です。これは身元確認用で、無料枠を超えない限り請求は発生しません。
- バケット作成: 「Create bucket」をクリック。
- Name: ユニークな名前を付けます(例:
my-blog-assets)。 - Location: 「Automatic」でOKです(またはNorth America Westなど。R2は通信料無料なので、グローバルCDNに乗ればリージョン差は吸収されます)。
- Name: ユニークな名前を付けます(例:
Step 2: アクセス設定(公開設定)
デフォルトではバケットは非公開です。画像をブログに貼るために公開設定をします。
- 作成したバケットの設定タブ(Settings)を開きます。
- Public Accessの設定を探します。2通りの方法があります。
- R2.dev Subdomain: 手軽ですが、レート制限があり、商用利用や大量アクセスには向きません。テスト用です。
- Custom Domain(推奨): 自分のドメイン(例:
img.example.com)を割り当てます。
- Custom Domainの「Connect Domain」をクリックし、Cloudflareに登録済みのドメインのサブドメインを入力します(例:
static.your-domain.com)。- 自動的にDNSレコードが追加され、少し待つと「Active」になります。これで
https://static.your-domain.com/画像名でアクセスできるようになります。
- 自動的にDNSレコードが追加され、少し待つと「Active」になります。これで
Step 3: APIトークンの発行
PicGoからアップロードするための「カギ」を作ります。
- R2のメイン画面(バケット一覧画面)に戻り、右側の「Manage R2 API Tokens」をクリック。
- 「Create API token」をクリック。
- Token name: わかりやすい名前(例:
Use for PicGo)。 - Permissions: 「Object Read & Write」を選択(読み書き必須)。
- Specify bucket(s): 「Apply to specific buckets only」を選び、先ほど作ったバケットだけを指定します(セキュリティのため)。
- 「Create API Token」をクリック。
- 表示される情報を必ずメモしてください! 一度しか表示されません。
- Access Key ID
- Secret Access Key
- Endpoint (
https://<アカウントID>.r2.cloudflarestorage.comという形式のURL)
Step 4: PicGoのインストールと設定
PicGoは、画像をドラッグ&ドロップするだけでアップロード→URLコピーまでやってくれる神ツールです。
- PicGoをインストールします。
- S3プラグインのインストール:
- PicGoはデフォルトでS3をサポートしていますが、R2との相性や細かい設定のためにプラグインを入れるのが一般的です。が、最新版のPicGo(2.3.1以降)なら標準の「Amazon S3」設定でR2に対応できます。
- もし挙動がおかしい場合は、プラグイン設定から
picgo-plugin-s3をインストールしてください。ここでは標準のAmazon S3設定で解説します。
- Amazon S3設定:
- AccessKeyId: さっきメモしたID
- SecretAccessKey: さっきメモしたKey
- Bucket: バケット名(例:
my-blog-assets) - UploadPath: アップロード先のフォルダ構成。
{year}/{month}/{md5}.{extName}のように設定すると、年月フォルダ分け&ファイル名ハッシュ化が自動でされて便利です。 - Region:
auto(R2はリージョン指定不要ですが、エラーになる場合はus-east-1と入力) - Endpoint: さっきメモしたEndpoint URL(
https://...から記述) - CustomDomain: 公開設定した独自ドメイン(例:
https://static.your-domain.com)。これを設定しないと、コピーされるURLがEndpointのままになり、アクセスできません。 - PathStyle:
Onにします(R2はPathStyle必須)。
Step 5: テストアップロード
設定を保存し、「デフォルトのアップローダー」にAmazon S3を選択。
適当な画像をPicGoにドラッグします。プログレスバーが100%になり、通知が出れば成功!
クリップボードには  というMarkdown形式のリンクが入っているはずです。ブラウザでそのURLを開いて画像が表示されれば完了です。
さらに賢く使う:キャッシュ設定とWAF
無料枠をさらに長持ちさせ、セキュリティを高める設定です。
R2へのリクエストを減らす(キャッシュ設定)
R2の無料枠は「読み込み1000万回」ですが、CloudflareのCDNキャッシュを効かせれば、R2への直接アクセス(オリジンフェッチ)を激減させられます。
- Cloudflareダッシュボードでドメインを選択。
- Caching > Cache Rules (またはPage Rules) へ。
- 新しいルールを作成:
- If: Hostname equals
static.your-domain.com - Then: Cache Level = Cache Everything (Edge Cache TTLを「1ヶ月」などに長めに設定)
これで、同じ画像へのアクセスはCloudflareのエッジサーバーが返し、R2の「読み込み回数」はカウントされなくなります。
- If: Hostname equals
他サイトでの直リンク禁止(防盗鏈)
画像が他のサイトで勝手に使われると、転送料金は無料でもリクエスト数を消費します。
- Security > WAF > Create rule。
- 条件: Hostnameが画像用ドメイン AND Refererが自分のブログドメインではない。
- アクション: Block。
これで、あなたのブログ以外からの画像アクセスを遮断できます。
R2 + PicGo 画像サーバー構築フロー
Cloudflare R2とPicGoを使った完全無料画像ホスティングのセットアップ手順
⏱️ Estimated time: 30 min
- 1
Step1: R2バケット作成
Cloudflare R2メニューからバケットを作成。名前はグローバルで一意である必要はありません(アカウント内で一意ならOK)。 - 2
Step2: 公開ドメイン割り当て
バケット設定 > Settings > Public Access > Custom Domains で、自分のドメインのサブドメイン(例: img.blog.com)を接続。 - 3
Step3: APIクレデンシャル取得
Manage R2 API Tokensから、対象バケットへの「Object Read & Write」権限を持つトークンを作成。Access Key ID, Secret Access Key, Endpointを保存。 - 4
Step4: PicGo設定
PicGoのAmazon S3設定を開く。Regionは「auto」、Endpointは「https://<accountid>.r2.cloudflarestorage.com」、CustomDomainは「https://<あなたのサブドメイン>」、PathStyleは「Yes」に設定。 - 5
Step5: アップロードテスト
画像をドラッグしてアップロード成功を確認。生成されたURLがブラウザで開けるかチェック。
FAQ
クレジットカードの登録は必須ですか?
R2.devドメインではだめですか?
AWS S3から移行できますか?
まとめ
Cloudflare R2は、個人開発者やブロガーにとって「画像ホスティングの最終解」と言えるサービスです。
導入のハードルは少し高く感じるかもしれませんが、一度設定してしまえば、あとはPicGoでドラッグ&ドロップするだけの快適な執筆環境が手に入ります。
もう画像の置き場所に悩むのはやめて、記事の中身に集中しましょう!
4 min read · 公開日: 2025年11月30日 · 更新日: 2026年1月22日
関連記事
Next.js ファイルアップロード完全ガイド:S3/Qiniu Cloud 署名付き URL 直接アップロード実践

Next.js ファイルアップロード完全ガイド:S3/Qiniu Cloud 署名付き URL 直接アップロード実践
Next.js Eコマース実践:カートと Stripe 決済の完全実装ガイド

Next.js Eコマース実践:カートと Stripe 決済の完全実装ガイド
Next.js ユニットテスト実践:Jest + React Testing Library 完全設定ガイド


コメント
GitHubアカウントでログインしてコメントできます