banner
cos

cos

愿热情永存,愿热爱不灭,愿生活无憾
github
tg_channel
bilibili

Backblaze + Cloudflare + Picgoで無料でスムーズな画像ホスティング体験を作りましょう。

最近、OSS ストレージのニーズがあり、国内および国外の OSS を調査しましたが、適切な OSS を見つけるのは簡単ではありませんでした。国内では、Alibaba Cloud OSS、Qiniu Cloud、Tencent Cloud があり、国外では Backblaze、Cloudflare R2 などがあります。激しい議論の末、私は Backblaze + Cloudflare を使用することに決めました。この決定は実際には難しくありませんでした。なぜなら、Backblaze が提供するクラウドストレージサービスの価格が非常に低く、安定性と速度も非常に優れているからです。また、Backblaze と Cloudflare の間のデータ転送は無料です。

理由と紹介#

Backblaze が提供するクラウドストレージサービスは価格が安く、Cloudflare は安定した高速な CDN サービスを提供できます。また、Backblaze と Picgo の組み合わせを使用すると、Backblaze への画像のアップロードの問題を簡単に解決することができます。

Backblaze の紹介#

Backblaze はクラウドストレージサービスを提供する会社で、B2 Cloud Storage 製品を使用すると、非常に低価格で大量のデータを保存できます。B2 Cloud Storage の保存料金は0.005 ドル / GB / 月で、ダウンロード料金は0.01 ドル / GBです。さらに、Cloudflare の CDN サービスを使用する場合、ダウンロード料金は無料です。これは Backblaze と Cloudflare が Bandwidth Alliance のメンバーであり、データ転送料金が発生しないためです。これにより、少ない費用で高性能なクラウドストレージスペースを手に入れることができます。

利点:無料、安定、料金が非常に低い

  • 十分な無料枠と低価格の有料枠:月に 10GB の無料枠があり、1 日に 1GB の無料ダウンロードトラフィックがあります。個人の画像ホスティングには十分です!さらに、超過分の料金は 1GB あたり 0.005 ドルです。
  • Cloudflare との組み合わせでダウンロード料金が無料:Backblaze と Cloudflare は Bandwidth Alliance のメンバーであるため、データ転送は無料です。
  • 豊富なAPI:Backblaze は豊富な API を提供しており、簡単に自分のアプリケーションに統合することができます。開発効率と利便性を向上させます。
  • 複数のアップロード方法のサポート:Picgo 以外にも、Backblaze は公式の Web インターフェース、CLI ツール、サードパーティのクライアントなど、さまざまなアップロード方法をサポートしています。
  • ファイルの種類に制限がない:一部の画像ホスティングサービスが画像タイプのファイルのみを保存できるのに対して、Backblaze はファイルの種類に制限がありません。ユーザーはビデオ、ドキュメント、音声など、さまざまな種類のファイルを保存することができます。(一部の人はクラウドストレージとして使用しているかもしれません

欠点:国内の速度は保証されない、学習コストが高い、リスクの分散が不均衡

  • 国内のネットワーク環境により、国外のクラウドストレージサービスへのアクセス速度が制限される場合があり、アップロードおよびダウンロード速度が遅くなる可能性があります。
  • API 呼び出し回数の制限:ただし、カードをバインドすると制限はありません。
  • 学習コストが高い:この組み合わせを使用するには、複数のサービスを手動で設定する必要があり、ある程度の学習コストがかかります。
  • リスクの分散が不均衡:データストレージと CDN サービスは Backblaze と Cloudflare がそれぞれ提供しているため、リスクの分散が不均衡になる可能性があります。たとえば、特定のサービスに問題が発生すると、画像ホスティング全体の正常な使用に影響を与える可能性があります。

もちろん、これらはこのサーファーにとって十分です〜

Cloudflare の紹介#

Cloudflare は、グローバルな CDN およびセキュリティサービスを提供する会社で、ウェブサイトをより高速、より安全、よりスマートにします。Cloudflare には無料のプランがあり、無制限のトラフィックとリクエスト、および多くの高度な機能(SSL 証明書、ファイアウォール、ページルール、トランスフォームルールなど)を利用することができます。Cloudflare を使用すると、Backblaze B2 ストレージバケットを独自のドメインにバインドすることができます。また、バケット名を非表示にしたり、ヘッダーを削除したりするためのルールを設定することもできます。たとえば、files.example.com のように、自分のドメインで画像にアクセスすることができます。さらに、Cloudflare は画像のキャッシュと最適化を提供し、画像の読み込み速度と品質を向上させることができます。

Picgo の紹介#

Picgo はオープンソースの画像アップロードツールで、さまざまな画像ホスティングサービス(Backblaze B2 を含む)に簡単に画像をアップロードすることができます。Picgo は Windows、MacOS、Linux システムをサポートしており、シンプルなインターフェースと豊富なプラグインを備えています。キーボードショートカット、ドラッグアンドドロップ、クリップボードなどの方法で画像をアップロードしたり、画像を圧縮したり、トリミングしたり、ウォーターマークを追加したりすることができます。Picgo は画像の URL と Markdown コードを自動生成することもでき、インターネット上で画像を引用するのに便利です。

前提条件#

以下のものが必要です:

  • Backblaze アカウント(メールアドレスで登録)
  • Cloudflare アカウント(メールアドレスで登録)
  • 独自のドメイン(私は Alibaba Cloud のドメインを使用しています)
  • Picgo クライアント

これらのものをまだ持っていない場合は、まず登録 / ダウンロード / 準備を行ってください。

詳細な設定手順については、以下の 2 つの記事が非常に詳細でわかりやすいと思いますので、それに従って進めてください:

ただし、更新などの理由で、次に私が遭遇したいくつかの問題や元の記事で明確に説明されていない点について説明します。

AliYun ドメインコントロールパネルで DNS サービスを Cloudflare に変更する#

変更後は、Cloudflare - DNS - Records で管理することになります。

DNS サーバーの変更には時間がかかる場合がありますが、変更が成功すると、AliYun ドメインコントロールパネルに次のように表示されます。

image.png

注意点として、Cloudflare にドメインをインポートする際に、いくつかのドメイン解析が失われたようです。インポート後に自分のドメインの解析レコードを確認することを忘れないでください。私の場合、vercel 関連の解析がうまくインポートされなかったようですが、最後に手動で解析を設定しました。もし同じ要件がある場合は、インポート後に自分のドメインの解析レコードを確認してください。

image.png

Cloudflare で Transform Rules を設定して URL を書き換える#

使用 Cloudflare + Backblaze B2+PicGo の搭建免费图床 という記事で言及されている URL パスの書き換えに基づいて、私の設定では「Edit expression」だけではなく、次のように設定する必要がありました:

image.png

  • (http.request.uri.path ne "/file/{bucketName}" and http.host eq "{your custom domain}")

  • Path をconcat("/file/{bucketName}",http.request.uri.path)に書き換えます。

この設定では、example.com/xxx.jpgexample.com/file/{bucketName}/xxx.jpgに変換し、自分のバケット名を公開せずに URL を短縮します。

Picgo で Backblaze の設定を行う#

Picgo S3 プラグインの設定 のステップに従って、私はこの設定がうまくいかず、次の記事を見つけるまで困っていました:Getting Started with the S3 Compatible API – Backblaze Help

image.png

これですべてが明確になりました。Endpoint にはカスタムノードを入力し、地域には自分の S3 エンドポイントの 2 番目の部分を入力します。例のエンドポイントの地域は us-west-001 です。

image

次に、PathStyleAccess をオンにし、下の public-read は変更しないでください。

image.png

設定が成功しました〜おめでとうございます!

ちなみに、この記事を書くために使用しているobsidianでは、Image Auto Upload Pluginプラグインを Picgo と組み合わせて使用しています。非常にスムーズな体験です。

image.png

image.png

Mac ユーザーの場合は、DropShare を使用することをお勧めします。Backblaze を直接サポートしています!

以上が私が経験したいくつかの問題と解決策です。同じニーズを持つ人に役立てば幸いです〜

読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。