関連リンク#
転載記事#
-
Backblaze B2 + Cloudflare CDN でカスタムドメインの 10G 高速無料外部リンク画像ホスティング
-
Backblaze B2 + Cloudflare CDN + PicGo を使用してカスタムドメインの 10G 無料画像ホスティングソリューションを実現
感謝 ReCreyed のシェア。以下の内容は上記の 3 つの記事からの引用です。
記事 1:Backblaze B2 + Cloudflare CDN#
本ブログの他の記事では github 画像ホスティングを使用していますが、偶然にも B2+CF+ShareX の自作画像ホスティングソリューションを発見し、カスタムドメインも可能なので、この文章が生まれました。この記事のすべての画像はこの方法の画像ホスティングからのものです。
画像ホスティングとは、画像を保存するサーバーのことを指します。ウェブサイトの管理者は、メンテナンスと管理を容易にするために、画像を専用のサーバークラスターに保存します。通常、外部に CDN を重ねて配信します。市販の公開画像ホスティングは多く、例えば imgur、sm.ms、imgbox などがあり、これらの画像ホスティングは API を開放して開発者が呼び出しやすくしています。しかし、運営コストの問題から、多くの画像ホスティングが相次いで閉鎖されたり、有料化されたりしています。
どうやって自作画像ホスティングを構築するのでしょうか?VPS ホスティングサーバーがある場合、Chevereto オープンソース画像ホスティングサイトプログラムをインストールするだけです。しかし、これは VPS を単に画像ホスティングとして使用するためにブログの外部リンク画像用にするのは少し無駄で、長続きしません。画像ストレージは、大企業のクラウドサービスプラットフォームに置くのが最適です。Backblaze B2 は、Amazon AWS S3 に似たクラウドストレージソリューションですが、少し安価です。Backblaze のクラウドストレージは、各登録ユーザーに 10G の無料スペースと 1 日の 1G のダウンロードトラフィックを提供し、アップロードトラフィックは無制限です。無料枠を超えた場合の価格と他の主要な業者との比較は以下の図に示されています。
Backblaze に 1T のコンテンツを保存するのにわずか $5 / 月ですが、トラフィック料金は比較的高いです。アップロードトラフィックは無制限です。 Bandwidth Alliance (帯域幅アライアンス) により、Backblaze から Cloudflare への出口は完全に無料です。したがって、Backblaze B2 は Cloudflare CDN と組み合わせて使用することで、無制限の無料ダウンロードトラフィックを実現できます。
Backblaze は Cloudflare との提携を発表し、Backblaze から Cloudflare へのトラフィック料金を免除しました。
したがって、次のようなクラウドストレージ / 画像ホスティング製品が得られます:
-
10G の無料ストレージスペース、世界で最も信頼性の高いクラウドストレージサービス
-
アップロード無料
-
ダウンロード無料
-
カスタムドメイン可能
-
世界最強の CDN 加速
カスタムドメイン画像ホスティング構築チュートリアル開始#
まず、ドメインを持っている必要があります。画像ホスティングのドメインとしてサブドメインを選択します。画像ホスティングの二次ドメイン名の命名には、一般的に以下のようなものがあります:
- img
- images
- assets
- static (画像だけでなく、css、js も保存)
次に、Backblaze B2 バケット(ストレージバケット)を作成します。
Backblaze の B2 ストレージにアカウントを登録し、登録後、管理パネルで「Buckets」(ストレージバケット)を選択し、「Create a Bucket」をクリックしてストレージバケットを作成します。Public を選択して、誰でもアクセスできるようにします。
次に、「Buckets(ストレージバケット)」に戻り、先ほど作成したストレージバケットをクリックして「Upload/Download(アップロード / ダウンロード)」をクリックします。ストレージバケットに一時的なテストファイルをアップロードし、アップロードしたファイルのところで「i(情報)」をクリックします。これは、次のステップで必要な情報を取得するためです。あなたのストレージバケットがどのサーバーにあるかを確認します。
上のスクリーンショットで、私のファイルが https://f000.backblazeb2.com/ に置かれているのがわかります - このドメインを覚えておいてください。
最後に、アドレスを取得したら cloudflare にログインし、ドメインにサブドメインを追加し、ファイルアドレスのドメインを指す cname レコードを新規追加します。例えば、img.coca.cc を f000.backblazeb2.com に cname で指すと、https://img.coca.cc/file/imgsgj/img.jpg が https://f001.backblazeb2.com/file/imgsgj/img.jpg を指すことになります。
上のスクリーンショットのレコードに基づいて、私はこのサブドメイン img.coca.cc を画像ホスティングのドメインとして使用し、f000.backblazeb2.com を指します。Cloudflare のオレンジ色の保護シールドがオンになっていることを確認してください。これは、リクエストが Cloudflare の CDN プロキシ層を通過したことを示します。Cloudflare のデフォルトの TTL は auto(自動)に設定されます。
CloudFlare CDN を有効にしても、キャッシュが常にヒットしない(MISS)ことがわかりました。キャッシュ指示を追加する必要があります(デフォルトではキャッシュしません)。ストレージバケットの設定を開き、バケット情報を {"cache-control":"max-age=43200"} に設定します。ここで 43200 は秒(s)単位で、43200 秒以内に CF はソースからリソースを再取得しません。
Cloudflare の SSL 設定は full を使用する必要があります。Backblaze は https アクセスアドレスのみを提供します。
もちろん、ファイルリンクが見栄えが悪く長すぎると思う場合は、cloudflare のページルール 301 を使用してリンクアドレスを短縮することもできます。例えば、https://img.coca.cc/img.jpg を直接 https://f001.backblazeb2.com/file/imgsgj/img.jpg にアクセスできます。
例:
マッチングルール https://img.coca.cc/*
リダイレクト URL を https://f001.backblazeb2.com/file/imgsgj/$1 に設定します。
ページキャッシュルールを追加します。
最後に注意してください:Backblaze B2 から Cloudflare へのトラフィックは無料です。つまり、CF が B2 に戻っても $0.01/GB の流出トラフィック料金は発生しません。これは無料の無制限トラフィックに相当します。しかし、悪意のあるユーザーが B2 のドメイン(CF のドメインではなく)を直接使用してトラフィックを刷ることを防ぐことはできません。
最終更新:2021 年 03 月 01 日
記事 2:Backblaze B2 + Cloudflare CDN + PicGo#
前言#
最近、サーバーの機能を拡張する必要があり、Aliyun のログプッシュが不便なため、サーバーを再購入し、関連するウェブサイトとサービスをデプロイすることに決めました。この機会に画像ストレージを規範化することに決めました。ウェブサイトが未登録のため、国内の Aliyun OSS + Aliyun CDN、Youpaiyun、Qiniu Cloud などのサービスを利用できず、海外に目を向けるしかありませんでした。
元々Github + JSDelivr を使用しているのは非常に良い無料画像ホスティングソリューションでしたが、オンラインのチュートリアルも多くあります。しかし、2020 年 8 月 9 日に JSDelivr が発表した新しい使用ポリシーの第 4 条が議論を呼びました。
4. 禁止された使用
以下の行為は禁止されています:
1. コンテンツをホスティングまたはアクセスすること:
- いかなる形でもマルウェアや有害なコードを含む、
- 他者の所有権を侵害する、
- 性的に露骨である、
- EUまたは米国で違法である可能性がある。
2. サービスとそのリソースを悪用すること、またはjsDelivrを一般的なファイルまたはメディアホスティングサービスとして使用すること。これには、例えば:
- 画像ホスティングウェブサイトを運営し、すべてのアップロードされた画像のストレージとしてjsDelivrを使用すること、
- 大量のビデオ、ファイルバックアップ、または他のファイルをホスティングすること。
大量のファイルから構成される正当なプロジェクトがあることを認識しており、これらは悪用とは見なされません。例えば:アイコンパック、アプリ、または大量のアセットを持つゲーム。
画像ホスティングウェブサイトを運営し、すべてのアップロードされた画像のストレージとしてjsDelivrを使用する
という文は曖昧であり、個人ブログと記事にアップロードされた画像の数とアクセス量が画像ストレージサイトと見なされるかどうかを判断できないため、禁止されたりデータが削除されたりする可能性があります。代わりの解決策を探すしかありませんでした。
その時、Cloudflare Bandwidth Allianceに Backblaze が含まれていることを発見しました。Backblaze から Cloudflare へのすべての出口トラフィックは完全に無料です。さらに、Backblaze は個人ユーザーに 10G の無料ストレージ枠、1 日の 1G のダウンロード量、無制限のアップロード量を提供しています。これにより、両者を同時に使用して 10G の無料枠と無制限のアップロード・ダウンロードを実現できます。
無料ストレージ枠を超えた場合、他のいくつかの海外主要 OSS サービスプロバイダーと比較して、Backblaze の価格も比較的安価です。唯一の欠点は、現在クレジットカード支払いのみをサポートしていることです。
前提条件#
- ドメイン~できれば 1 次ドメイン、つまり xxx.xxx の形式が望ましいです。任意のドメインプロバイダーを検索して購入できます。NameSilo をお勧めします。Alipay での支払いをサポートし、無料の Whois プライバシー保護があり、価格も安いです。
.com
ドメインは毎年わずか 9.95 ドルで、あまり気にしない場合は他のサフィックスを購入することもできます。最初の年は 2 ドルです。無料ドメインもいくつか申請できます。比較的有名なのは freenom のドメインですが、今年 Cloudflare の無料サービスが無料ドメインをサポートしなくなったと聞いたので、成功するかどうか自分で試すしかありません。
Backblaze OSS 部分#
- こちらから入り、Backblaze アカウントを作成し、関連情報を入力します。ホームページから直接入ると Sing Up オプションがないかもしれません。
- こちらからコンソールに入り、Buckets ストレージバケットを作成します。
- ストレージバケットにわかりやすく、推測しにくい名前を付けます。生成された画像リンクの長さは気にしなくても大丈夫です。後でリダイレクトを行うことで、わかりやすく、推測しにくい名前にできます。生成された画像リンクの長さは気にしなくても大丈夫です。後で 301 リダイレクトを行い、
Files in Bucket are
をPublic
に変更します。
注意:ストレージバケットに名前を付ける際は、他の人に推測されにくい名前を付けるようにし、ランダムな文字を追加することをお勧めします。例えばc42rx71-example-winer-website
のように、ストレージバケットが Public モードの場合、他の人はあなたの OSS サービスプロバイダー + ストレージバケット名 + ファイル名のいずれかを知るだけで、ファイルの実際のリンクを組み立てて CDN を回避し、無料トラフィックを消費することができます。支払い方法がバインドされている場合、料金が発生することもあります。
Upload/Download
をクリックして画像または一時ファイルをアップロードし、後でストレージバケットのサーバーアドレスを取得します。- 左側のメニューから
Browse Files
に入り、先ほどのストレージバケットに入り、アップロードしたファイルを見つけて詳細情報を確認します。Friendly URL
行のリンク内容を覚えておいてください。
-
Friendly URL
のリンクから、私たちのストレージバケットがhttps://f002.backblazeb2.com/
にあることがわかります。/file/example-winer-website
はファイルディレクトリの相対パスです。この 2 つの値を覚えたら、Cloudflare にログインして設定します。
Cloudflare 部分#
- Cloudflare 公式サイトを開いて登録します。
- 指示に従ってドメイン登録業者に DNS 解析サーバーを Cloudflare が提供するサーバーアドレスに変更します。ユーザーによって異なるので、個人使用の場合は無料プランを選択できます。
-
先ほど得たストレージバケットサーバーに CNAME レコードを追加します。サブドメインは好みに応じて選択できますが、一般的には以下のいくつかを使用します。
oss img images assets static(画像だけでなく、ウェブサイトの読み込み時のcss、jsファイルも保存)
- この時、DNS 解析が完了するのを待つと、Cloudflare を通じて Backblaze にアクセスする設定が完了します。ブラウザの開発者ツールを使用して、サブドメイン下の対応する URL にアクセスして CDN キャッシュがヒットしているかどうかを確認できます。
cf-cache-status
行の HIT はキャッシュがヒットしたことを示し、MISS は CDN キャッシュにヒットしなかったことを示し、Backblaze に戻ります。この時、ダウンロードトラフィックを消費します。
- キャッシュがヒットしない、または戻る回数が多すぎて読み込み速度が低下しないように、Backblaze に戻ってバケット情報を設定し、
{"cache-control":"max-age=86400"}
を追加します。これは 86400 秒以内に Cloudflare がソースから再取得しないことを意味します。
注意:戻る時は CDN ノードがソースサイトからデータを再取得し、それをユーザーに渡すので、ソースサイトのアドレスを直接ユーザーに渡すわけではありません。したがって、戻る回数が多すぎて無料トラフィック配分が消費されることを心配する必要はありません。max-age はあまり長くする必要はありません。長すぎると、ソースファイルが変更された場合、サイトが CDN ノードに最新バージョンをプッシュしない限り、ユーザーは最新バージョンを迅速に取得できなくなります。(この記事を書いている時点で、BackBlaze にも無料リクエスト回数の表示があることがわかりました。B クラスと C クラスのリクエストはそれぞれ 2500 回で、Cloudflare のアクセスがリクエスト回数にカウントされるかどうかは未確認のため、あまり短くすることはお勧めしません)
- オプションとして推奨されないリダイレクト方法を使用して、Cloudflare に自動的にページルール 301 を使用してファイルリンクをリダイレクトしてリンクアドレスを短縮します。以下の図のオプションに従って作成できます。* すべての画像パスと名前にマッチするために使用され、
$1
はアスタリスク部分の内容を URL に補完します。
注意:
1. URL をマッチングする際、アドレス内の/img
は必須です。そうでないと、転送された URL が再度転送ルールにマッチし、リダイレクト回数が多すぎたり、他の位置でエラーが発生したりします。ただし、/img
は/file/example-winer-website(あなたのストレージバケット名)
でない任意の文字列に置き換えることができます。
2. テスト後、リダイレクトを使用すると、開発者ツールの Network ページでリダイレクト後のリンクをキャッチでき、新しいタブで画像を開くこともでき、ストレージバケット名や実際のファイル名を取得できます。サーバー提供者と組み合わせることで、実際のアドレスを組み立てて悪意のあるトラフィック攻撃を行うことができます。したがって、8 ステップの 2 番目の作成方法を使用することをお勧めします。
- オプションとして、資料を調べていると、いくつかの場所で URL リダイレクト後にページキャッシュルールを追加してキャッシュの無効化を防ぐことを推奨しています。以下の図に従って設定できます。しかし、私のテストでは、この内容を追加しなくても Cloudflare の CDN キャッシュにヒットできることがわかりました。ここでセキュリティレベルオプションを追加し、
本質的にオフ
に設定して、メインサイトが攻撃された場合、CDN 段階で検証が追加されても、ローカルの Markdown 文書に画像が正常に読み込まれるようにできます。
このステップが存在する可能性の理由は、キャッシュレベルをクエリ文字列なし
に設定すると、画像の後にパラメータが付かない場合にのみキャッシュされた内容が使用されるため、いくつかの OSS プロバイダーが画像を処理(圧縮、トリミング、スケーリング)して送信する機能を提供しているためです。メインサイトのキャッシュレベルが標準に設定されている場合、ここでの一部の内容を設定した後にその機能を使用できるようになります。しかし、Backblaze の無料サービスにはこれらは含まれていないため、現時点では必要ありません。将来的に問題が発生した場合や本当の理由がわかれば、補足説明を行います。
- オプションとして推奨されるリダイレクト方法を使用します。リンクリダイレクトを使用せず、ページルールリダイレクトを使用すると、バケット名が露出します。そこで、リライト方式で解決します。この方法では、リンクを変更せずにその内容を変更できます。今回はルール内の変換ルールを使用してページをリライトします。ホスト名をマッチングしてリクエストの出所を特定し、再度完全な URI をマッチングしてすでにリライトされたリンクを含まないことを確認します。リライトパスの concat の意味は、2 つの文字列を結合することで、リクエストのファイルパスの前にストレージバケットパスを追加します。ホスト名 example.winer.website は concat 関数を使用する際に記述する必要はなく、リクエストのホスト名として自動的に追加されます。(concat 関数内にホスト名を追加する必要がある場合は、
http://
やhttps://
で始めず、前に/
を追加して代替してください。例えばconcat("/example.winer.website/file/example-winer-website", http.request.uri.path)
)
注:ページルールが不足している場合やこの方法を使用したくない場合は、この記事を参考にして、プライベートストレージバケットを作成し、Cloudflare Workers を使用してアクセスすることもできます。Workers のアクセス方法は長い間存在しており、多くの他のブロガーのチュートリアルがあるため、ここでは記載しません。しかし、Workers にも無料の制限がありますので、注意してください。
PicGo を使用して画像ホスティングをより良くする#
まず、おめでとうございます。これで画像ホスティングの基本的な構築作業が完了しました!以下は拡張部分です。
- 画像ホスティングが完了した後、他の操作を行わない場合、毎回画像をアップロードするために Backblaze のウェブサイトを開き、認証を完了した後にバケット設定ページにアクセスする必要があります。これは便利ではなく、友好的でもありません。そこで、クロスプラットフォームでコマンドラインとビジュアルインターフェースの両方をサポートする画像アップロードツール ——PicGo を紹介します。
主な機能は、指定した場所に画像をアップロードし、画像リンクを取得することです。typora エディタと組み合わせることで、画像を貼り付けると自動的にアップロードされ、リンクが Markdown 文書に書き込まれ、他のウェブサイトやローカルに画像を移動させることによる画像の喪失を避けることができます。 - プロジェクトのホームページにアクセスし、PicGo をダウンロードしてインストールします。
- プラグイン設定を選択し、
s3
を検索するか、プラグインプロジェクトのホームページにアクセスしてこのプラグインをダウンロードしてインストールします。 - インストールが完了すると、左側の画像ホスティング設定に「Amazon S3」が追加され、S3 API と互換性のあるすべてのクラウドストレージで使用できます。
- Backblaze 公式サイトの AppKeys 設定ページを開き、新しい Key を追加します。MasterApplicationKey の使用は推奨されません。以下の形式で設定し、Key を申請します。
注意:Key の最長有効期間は 1000 日、つまり 86400000 秒です。期限が切れたら再度申請してください。
- 得られた
Key ID、applicationKey、バケット名、バケットのエンドポイントアドレス
をそれぞれ対応する位置に記入します。同時に 301 リダイレクトまたはページリライトの URL をカスタムドメインに記入します。他の設定は変更する必要はありません。保存後、画像をアップロードできるようになり、ファイルの命名方法を変更したり、設定ファイルを変更して設定したりできます。詳細はこのページを参照してください。
注意事項#
これで全ての作業が完了しましたが、注意が必要な点があります:
- この方法でファイルをアップロードする場合、ファイルパスに空白が含まれていると、Backblaze に保存する際に空白がプラスに置き換えられるため、空白を含むファイルは PicGo がアップロードした後に生成されるリンクが正しくありません。
- この方法で構築された画像ホスティングや書かれたチュートリアルでは、ストレージバケット名を漏らさないようにし、トラフィックを刷られないようにし、すべてのアップロードファイルの命名規則にハッシュ値を追加して推測できないようにすることをお勧めします。
この記事内で作成されたストレージバケットは使用されておらず、チュートリアルが書き終わった後すぐに削除され、非常に推測しにくいストレージバケット名が作成され、関連アドレスが変更されました。この記事や画像の情報を使用してアクセステストを試みないでください。
最終更新:2022 年 08 月 28 日 10:37 AM
コメント欄
飛行機を降りた道士 2022 年 5 月 24 日 11:48 AM
大佬の記事に感謝します。現在 cloudflare は transform rules を提供しており、worker を使用せずにパスをリライトできます。
sakuya 2022 年 4 月 9 日 02:44 PM
友情提示:
第 8 ステップの concat"/example.winer.website/file/example−winer−website" には、括弧が多すぎるようです。また、request、path が間違っています。
winer 2022 年 8 月 28 日 10:36 AM
ご指摘ありがとうございます。多すぎる括弧は実際には外側に中国語の括弧があったため、コードマークが付いている部分だけを見れば大丈夫です。
ただし、request と path は確かに間違っていました hhhhh 画像の中では間違っていませんが、修正します。
記事 3:Backblaze B2 + Cloudflare#
B2 は Backblaze が提供する OSS ストレージサービスで、10G の無料容量と 1 日の 1G の無料トラフィックを提供しています。また、Cloudflare 帯域幅アライアンスのメンバーでもあり、Cloudflare を通じて Backblaze のコンテンツを転送することは完全に無料です。無料枠を超えた場合でも、$0.005 GB / 月の容量と $0.01 GB / 月のトラフィック料金は、他のストレージサービスの価格と比較しても非常に安価です。
他にも B2 と CF を無料画像ホスティングとして使用する方法を紹介した記事がたくさんありますが、現在 CF には新しい変換ルール機能があり、他の記事で使用されている Worker やページルールと比較して、変換ルールはより多くの無料エントリを提供し、使いやすくなっています。
もちろん、ネットワークドライブとしても使用できますが、10G ではあまり足りません。
要求#
まず、Backblaze B2 と Cloudflare のアカウントを登録する必要があります。次に、ドメインが必要です。現在 Cloudflare はドメイン購入を提供しており、namesilo や他の場所から購入して Cloudflare に解析させることもできます。Backblaze に登録した後は、メール認証を行う必要があります。そうしないと、公開ストレージバケットを作成できません。
ストレージバケットの作成#
Backblaze のユーザー管理インターフェースに入り、B2 クラウドストレージの下のバケットオプションを選択し、ストレージバケットを作成をクリックします。作成時にはバケット名を入力する必要があります。この名前は URL に含まれるため、他の人のバケットや自分の他のバケットと同じ名前を付けることはできません。作成時には公開オプションを選択し、公開に設定します。他のオプションは変更する必要はありません。
作成が完了したら、そこに画像を 1 枚アップロードし、アップロード後の画像をクリックします。その中のフレンドリー URL が使用するアドレスです。次に、フレンドリー URL のホスト名を記録します。例えばf00x.backblaze2.com
です。
作成したばかりのストレージバケットはデフォルトでは Cloudflare にキャッシュされず、毎回戻る必要があります。画像ホスティングにとっては、キャッシュされる方が便利です。バケットオプションをクリックして、先ほど作成したバケットの場所に戻り、作成したバケットの設定をクリックし、バケット情報を{"cache-control":"max-age=43200"}
に変更します。ここでmax-age=
の後の数字は Cloudflare のキャッシュ期間で、単位は秒です。
Cloudflare の設定#
Cloudflare で画像ホスティングに使用するサブドメインの CNAME レコードを作成し、先ほど記録したホスト名 f00x.bckblze2.com を指します。Cloudflare の CDN を使用してキャッシュするため、プロキシ状態を有効に設定します。
CNAME レコードを作成した後、フレンドリー URL のホスト名を作成したばかりのドメインに変更すれば、ファイルにアクセスできるようになります。テスト中に Cloudflare がエラー 522 を表示した場合、これは Backblaze が Https アクセスのみを許可しているため、Cloudflare の SSL/TLS で完全(厳格)に変更する必要があります。また、Cloudflare の Pro 有料ユーザーの場合は、自動署名交換 (SXG) をオフにする必要があります。これは速度最適化オプションにあります。
CNAME ドメインを直接使用して URL を変更すると、ストレージバケットの名前が露出し、URL が非常に冗長になります。この場合、Cloudflare の変換ルールを使用して URL を短縮する必要があります。
ルールを選択し、変換ルールをクリックして、URL をリライトするルールを作成します。まず、ルールに名前を付けます。専用のサブドメインを画像ホスティングドメインとして使用する場合は、フィールドでホスト名を選択し、演算子で等しいを選択し、値にサブドメインを入力します。
画像ホスティングが専用のサブドメインを使用していない場合は、式を作成をクリックし、Cloudflare のドキュメントを参照して、画像ホスティングの URL アドレスにマッチするように式を作成します。
マッチング式の設定が完了したら、下のリライト - パスでリライト先を選択し、オプションで Dynamic を選択します。URL から/file/ストレージバケット
名を削除したい場合は、後ろにconcat("/file/ストレージバケット名", http.request.uri.path)
を入力します。他に要求がある場合も、上記の Cloudflare のドキュメントを参照して修正できます。設定が完了したら、デプロイをクリックしてこのルールを有効にします。これでhttps://img.example.com/バケット内のファイルパス
またはカスタムアドレスを入力すれば、ストレージバケット内の画像が読み込まれます。
以下はこの方法でアップロードされた画像です。もし誰かが作者を認識したら、コメントで返信してください。
画像略...
参考#
Cloudflare Transform Rules と Backblaze B2 を使用した無料画像ホスティング
Backblaze B2 + Cloudflare CDN でカスタムドメインの 10G 高速無料外部リンク画像ホスティング