ゼロから始めるあなたの無料画像ホスティングシステム（Cloudflare R2 + WebP Cloud + PicGo）

前書き#

「2024 年、私のブログはどのように変わったか」という記事で、私は Serverless プラットフォームといくつかのオープンソースプロジェクトを使用して構築したブログシステムを紹介し、このシリーズのチュートリアルを開始して、構築とデプロイの全過程を記録しています。

この記事は画像ホスティングシステムのソリューションについてです。

画像ホスティングの進化#

実際、ブログを構築した初期はコンテンツが少なく、挿絵もあまりなかったため、ほとんどの画像は私の Hugo ブログリポジトリのstaticディレクトリに直接置かれていました。そのため、不便を感じることはありませんでしたが、しばらくして複数のプラットフォームで公開する必要が生じ、ブログの Markdown ソースファイルをコピーしたところ、すべての画像がブログの相対パスだったため、画像がすべて表示されなくなり、画像を一枚ずつ再アップロードする必要があり、非常に面倒でした。

その時、画像ホスティング（Image hosting）という概念を初めて知りました。画像を専用のストレージサービスにアップロードし、公開リンクを通じて使用することで、統一的に管理できるだけでなく、ブログリポジトリのファイルサイズを効果的に削減し、ウェブサイトの読み込み速度を向上させることができます。

GitHub + jsDelivr CDN + PicGo#

最初に私は新しい GitHub リポジトリ「GitHub - image-hosting」を作成し、PicGo を使って直接リポジトリにアップロードしました。そして、PicGo が返す画像パスをjsDelivr CDN で加速されたリンクに変更しました。実際、これは便利で、バージョン管理もできました。

しかし、良い時期は長く続かず、jsDelivr は DNS 汚染に遭い、中国本土でブロックされてしまいました。そのため、私のブログの画像は長い間完全に読み込めなくなり、このような純粋に CDN に依存する方法に対して懸念を抱くようになりました。さらに、GitHub に画像をホストすることはコードリポジトリに基づいており、画像のアップロードはコードのコミットに依存しているため、コミット履歴が汚染されやすく、結局は一種の悪用と見なされます。万が一アカウントやリポジトリへのアクセスに問題が発生した場合、すべての画像を失う可能性があるため、他のソリューションを探し始めました。

阿里云 OSS + PicGo#

次に考えたのは、クラウドサービスプロバイダーが提供するオブジェクトストレージです。Amazon S3 や阿里云 OSS などは、クラウドベンダーが提供するオブジェクトストレージサービスで、アクセス可能な公開リンクを提供するだけでなく、権限管理、データバックアップ、拡張性などの利点もあります。比較的低コストでファイルデータのストレージと管理に対する優れたソリューションを提供します。

中国本土のユーザー向けにアクセスを最適化したいと考え、最終的に阿里云 OSS を選択しました。設定はそれほど複雑ではなく、同様に PicGo を使用してアップロードし、阿里云 OSS のリンクに変換しました。アクセス速度は明らかに向上しました。

aliyunoss_invoice

ただし、従量課金制であるため、持続的に増加するコストは非営利の個人ブログにとっても考慮する必要があります。2023 年初頭、ブログのトラフィックが増加し、月々の請求書が上昇し続けました。また、阿里云 OSS でカスタムアクセスドメインを設定するには登録が必要で、私のドメインは Cloudflare を通じてホストされているため、登録は考慮していませんでした。そのため、数ヶ月使用した後、やはり画像ホスティングのソリューションを変更することを検討しました。

Chevereto + PicGo#

いくつかの調査を経て、私の回線が良好な搬瓦工サーバー（CN2GIA DC6 データセンター）上に Docker イメージを使用してCheveretoの無料自部署バージョンをデプロイし、画像を Docker ボリュームの形式でホストにマウントしました。

Chevereto のインターフェースは正直言ってスタイルが少し古く、古い php サービスで、無料版は長い間メンテナンスやアップグレードが行われていませんが、機能が充実しており、PicGo を使用して Chevereto の API に接続して画像のアップロードなどの操作を行うことができ、安定性も良好でした。そのため、1 年半このように使用しました。

しかし、自分自身で自部署サービスの安定性とデータの貴重さに対して少し油断していました。数日前、サーバーが突然ダウンし、カーネルエラーが発生して再起動できなくなりました。サービスがダウンしたのはまだ良い方ですが、私の 1 年半以上の画像データもエクスポートできなくなりました。サポートチケットを通じて技術サポートに連絡しましたが、1 日に 2 回しか返信がなく、一度は再起動を促され、もう一度はネットワーク管理者を雇って調査することを提案されました。

自力で解決するしかなく、ネット上のさまざまなソリューションを探し回り、1 日かけてようやく解決しました。しかし、この教訓から重要なデータを持つサービスのバックアップと自部署の安定性について新たな認識を持つようになりました。再デプロイを考えたとき、無料版のイメージなどがすでに終了しており、年額のライセンス版しか残っていなかったため、元のソリューションを放棄しました。

Cloudflare R2 + WebP Cloud + PicGo#

cloudflare_r2_free_tier

そこで、再びクラウドサービスプロバイダーのオブジェクトストレージに目を向け、サイボーグの神である Cloudflare が提供する R2 オブジェクトストレージサービスを発見しました。無料プランには毎月 10GB のストレージ容量があり、個人使用には十分です。大手のサービスとデータの安全性も保証されています。

ユーザーのアクセスを最適化するために、R2 の画像を代理する「WebP Cloud」サービスも使用し、代理レイヤーで画像のサイズをさらに小さくしました。国内ユーザーにとっては阿里云 OSS のような回線には及びませんが、登録不要で安定していて無料という総合的な条件下で、私が考えられる最良のソリューションです。

PC 側でも PicGo クライアントを使用してほぼワンクリックでアップロードし、ブログで直接使用できる Markdown 画像リンクを生成しました。設定が完了した後は、非常にスムーズに使用できました。

画像ホスティングの構築説明#

Cloudflare R2 + WebP + PicGo のソリューションは、複数のコンポーネントとプラットフォームに関与していますが、すべての操作は Free Plan 内で行われ、私が最終的に選択したソリューションです。以下では、ゼロからこの無料の画像ホスティングシステムを構築する方法を紹介します。

Cloudflare R2#

R2 は Cloudflare が提供する無料のオブジェクトストレージサービスで、使用するには無料でCloudflare アカウントを登録する必要があります。登録してログインした後、左側のサイドバーから R2 アクセスサービスをクリックします。ただし、R2 サービスを開通するにはクレジットカードをバインドする必要があります（国内外の主流クレジットカードが使用可能）が、料金は発生しません。主にユーザーの身分を確認するために使用されます。

画像ホスティングバケットの作成#

cloudflare_r2_interview

R2 サービスを開通した後、右上の「ストレージバケットを作成」ボタンをクリックして作成します。

cloudflare_r2_create_bucket

作成設定画面に入ったら、ストレージバケット（Bucket）名を入力する必要があります。識別性のある名前を推奨します。後でアップロード時に使用します。

位置は「自動」を選択しますが、追加で位置のヒントを設定することもできます。後で「WebP Cloud」サービスの米西データセンターを使用して画像の代理最適化を行うため、ここでは「北米西部（WNAM）」を選択しました。他の地域を選択することもできますが、Cloudflare は指定した地域に必ず割り当てることを保証していません。

cloudflare_r2_create_done

「ストレージバケットを作成」ボタンをクリックすると、作成が完了します。この時点で「yu-r2-test」ストレージバケットにファイルをアップロードできるようになりました。ウェブページ上で直接ファイルやフォルダをアップロードすることもできます。

また、S3 API を使用してアップロードすることも可能です。後で PicGo クライアントを使用してアップロードする際にはこの方法に依存しますが、いくつかの追加設定が必要です。ナビゲーションバーの「設定」オプションをクリックして設定を行います。

cloudflare_r2_config

まず、「R2.dev サブドメイン」を有効にする必要があります。これは後で画像にアクセスする際に必要な公開アドレスです。「アクセスを許可」をクリックし、指示に従って「allow」と入力すれば有効化されます。

r2_dev_domain_allow

完了すると、r2.devで終わる公開 URL が表示され、これが後で画像にアクセスするための URL になります。

カスタム画像ホスティングドメイン（オプション）#

ただし、割り当てられた URL は長く、記憶しにくいため、「カスタムドメイン」を使用して専用のドメイン名をバインドすることができます。「ドメインを接続」ボタンをクリックします。

r2_custom_domain_setup

バインドしたいドメイン名を入力します。例えばyu-r2-test.pseudoyu.comとし、「続行」をクリックします。

cloudflare_r2_custom_domain

r2_custom_domain_dns_wait

ドメインを接続し、DNS 解析が有効になるのを待ちます。

r2_bucket_status

完了後、バケットの状態が「公共 URL アクセス」で「許可されました」と表示され、「ドメイン」には先ほど自分で設定したドメイン名が表示され、設定が成功したことが確認できます。

バケットアクセス API の設定#

yu_bucket_preview

上記の設定が完了したら、ストレージバケットの「オブジェクト」画面に戻り、サンプル画像をアップロードします。詳細を開くと、その画像のアクセスアドレスが表示されます。この時点でアクセス可能な画像ホスティングサービスを持つことができます。

しかし、毎回 Cloudflare のページを開いて手動で画像をアップロードする方法は明らかに便利ではありません。R2 は S3 互換の API を提供しており、クライアントやコマンドラインツールを使用してアップロード、削除などの操作を簡単に行うことができます。

create_r2_api_token

create_r2_api_key

R2 のメインページに戻り、右上の「R2 API トークンを管理」をクリックし、「API トークンを作成」をクリックします。

r2_apikey_conifg

トークン名を入力し、「権限」で「オブジェクトの読み取りと書き込み」を選択し、この API を以前に作成したバケットに指定します。これにより、最小限の権限でデータの安全性も確保されます。他のオプションはデフォルトのままで大丈夫です。

api_key_config_details

作成が完了すると、すべてのキーが表示されます。PicGo で必要なのは以下の 3 つの情報ですが、表示されるのは一度だけなので、パスワード管理ソフトや他の場所にこれらのパラメータ情報を適切に保管することをお勧めします。

これで、Cloudflare R2 で設定する部分は完了しました。次に、PicGo クライアントの設定を行います。

PicGo#

PicGo は、画像を迅速にアップロードし、画像 URL を取得するためのツールソフトウェアで、豊富なプラグインエコシステムを持ち、さまざまな画像ホスティングサービスをサポートしています。GitHub リポジトリは「GitHub - Molunerfinn/PicGo」で、対応するプラットフォームのクライアントをダウンロードして使用できます。

R2 画像ホスティングの設定#

PicGo 本体には S3 画像ホスティングが含まれていませんが、「GitHub - wayjam/picgo-plugin-s3」プラグインを使用することでサポートできます。

picgo_s3_plugin

「プラグイン設定」でインストールを選択すると、「画像ホスティング設定」に Amazon S3 オプションが追加されます。クリックして設定オプションに入ります。

r2_picgo_s3_config

ここで特に注意が必要な設定項目がいくつかあります。

アプリケーションキー ID、R2 API の Access Key ID（アクセスキー ID）を入力します。
アプリケーションキー、R2 API の Secret Access Key（シークレットアクセスキー）を入力します。
バケット名、R2 で作成したバケット名を入力します。私の上記の例ではyu-r2-testです。
ファイルパス、R2 にアップロードするファイルのパスです。私は{fileName}.{extName}を使用して、元のファイル名と拡張子を保持することにしました。
カスタムエンドポイント、R2 API の「S3 クライアント用の管轄地特定のエンドポイント」を入力します。形式はxxx.r2.cloudflarestorage.comです。
カスタムドメイン名、上記で生成されたxxx.r2.dev形式のドメイン名またはカスタムドメイン名を入力します。私が設定したのはyu-r2-test.pseudoyu.comです。

他の設定はデフォルトのままで大丈夫です。パラメータに誤りがないことを確認したら、「確定」と「デフォルトの画像ホスティングに設定」をクリックします。

画像のアップロード#

upload_r2_with_picgo

上記の設定が完了したら、「アップロードエリア」にファイルを直接ドラッグして画像をアップロードできます。アップロード後に表示が正しければ設定成功です。生成されたリンクは自動的にシステムのクリップボードにコピーされ、必要な場所に直接貼り付けることができます。

picgo_custom_url_format

また、リンク形式で URL やブログで使用できる Markdown 形式のリンクなど、対応する形式を選択できます。ここで私は小さな設定を行い、左側の「PicGo 設定」 - 「カスタムリンク形式」で![$fileName]($url)に変更し、アップロードエリアのリンク形式で「Custom」を選択しました。これにより、アップロード後にファイル名を Alt テキストとして使用した Markdown 画像リンクが生成されます。

WebP Cloud による画像最適化#

これで、画像ホスティングの構築、設定、アップロードが完了しましたが、通常、私たちがローカルでスクリーンショットやカメラで撮影した画像はサイズが大きく、訪問者にとって読み込み時間が長く、インターネットでの公開には直接適していません。

tiny_png_compress

私は長い間非常に面倒な方法を使っていました。つまり、「TinyPNG」というオンラインサイトの API とオープンソースの macOS クライアントアプリを組み合わせて、画像をその中にドラッグして圧縮し、PicGo を通じて画像ホスティングにアップロードするという方法です。通常、画像の品質をあまり損なわずに 50％以上のサイズを削減することができ、面倒ではありますが効果的でした。

この画像ホスティングソリューションを変更した後、よりスマートな画像最適化サービスを探し始め、「WebP Cloud」を思い出しました。

実際、このサービスを知ったのは昨年のある晩、STRRLが杭州のショッピングモールのゲームセンターで音楽ゲームをプレイしている人を見ているときに、彼がNova Kwokのブログが Hacker News のトップに上がったニュースを見せてくれたからです。私たちは一緒にしばらく観察しましたが、その時は画像を最適化するサービスだとしか知らず、詳細には理解していませんでした。

それで、公式サイト「webp.se」を開いて、より詳細な紹介を見てみました。

webp_se_intro

簡単に言うと、これはほとんど画質を変えずに画像のサイズを大幅に縮小し、全体のサイトの読み込み速度を向上させることができる CDN のような画像プロキシ SaaS サービスです。現在に至るまで、画像のサイズ削減に加えて、キャッシュ、ウォーターマークの追加、画像フィルターなどの実用的な機能が提供されており、カスタムヘッダーなどの設定オプションも用意されています。

一通り見てみて、私のブログの画像最適化ニーズを満たすことができると感じ、設定を始めました。

WebP Cloud の設定#

webp_cloud_login

まず、GitHub を通じてWebP Cloudプラットフォームにログインします。

webp_cloud_overview

ページは非常に直感的で、現在のプランの下での Free Quota と追加 Quota のデータ、そしていくつかの使用統計が表示されます。

「Create Proxy」ボタンをクリックして設定を追加できます。

webp_cloud_config

国内アクセスを最適化するために、「Proxy Region」には米西「Hillsboro, OR」地域を選択しました。
「Proxy Name」にはカスタム名を入力します。
「Proxy Origin URL」は非常に重要で、上記で設定した R2 のカスタムドメイン名を入力します。私が入力したのはyu-r2-test.pseudoyu.comです。カスタムドメイン名を設定していない場合は、R2 が提供するxxx.r2.dev形式のドメイン名を入力します。

yu_webp_test

画像の基本情報部分の「Visitor」下に表示されるxxx.webp.li形式のものが私たちのプロキシアドレスです。

例えば、以前に PicGo を通じて R2 にアップロードしたファイルyu-r2-test.pseudoyu.com/new_mbp_setup.jpgは、dc84642.webp.li/new_mbp_setup.jpgというリンクでアクセスできます。

デフォルトのプロキシアドレスが気に入らない場合は、右下のチャットまたはメールで開発者に連絡してカスタムドメインの変更を依頼できます。今後はより自動化された設定プロセスも期待できます。

下のスライダーを使って画像の圧縮比率を調整できます。デフォルトは 80％で、5MB の jpg 画像を圧縮すると通常 1MB 未満になります。基本的にネットワークでの配布ニーズを満たします。他の設定はデフォルトのままで大丈夫です。必要に応じてドキュメントに従って設定できます。

PicGo の設定変更#

change_pic_go_config

注意が必要なのは、最終的にブログに掲載する画像は WebP Cloud を通じて代理されたリンクであるため、PicGo の「画像ホスティング設定」に戻り、「カスタムドメイン」を先ほど設定した WebP Cloud プロキシアドレス、すなわちxxx.webp.li形式のプロキシリンクまたは他のカスタムドメイン名に変更する必要があります。

WebP Cloud の使用量#

無料ユーザーは毎日 2000 Free Quota を持ち、2000 回の画像アクセスリクエストを代理でき、100MB の画像キャッシュを提供します。一般ユーザーには完全に十分です。特定の期間にトラフィックが多い場合は、追加 Quota を購入することもでき、価格は非常に安いです。

Quota を超えると、アクセスは元の画像アドレスに 301 リダイレクトされ、WebP Cloud サービスを通じて圧縮されることはありませんが、依然として使用可能です。100MB のキャッシュを超えると、LRU アルゴリズムに従ってクリーンアップされるため、高頻度のリクエストの画像が良好なアクセス体験を得られることが保証されます。

yu_webp_uasge

私のブログの 1 日の訪問者数は約 300〜500 回で、RSS 購読やクローラーのトラフィックも加わります。WebP Cloud の統計によると、平日のリクエストは約 4000〜5000 回で、ブログを投稿した日は 10000 回以上になります。

webp_cloud_price

そのため、現在は Lite プランを選択し、追加の使用量を組み合わせてピークトラフィックをカバーする予定です。もう少し様子を見てみるつもりです。

まとめ#

以上が私の画像ホスティングシステムの構築ソリューションです。この記事のすべての画像も PicGo を使用してアップロードし、Cloudflare R2 に保存し、WebP Cloud を通じて最適化されています。

これは私のブログ構築とデプロイに関するシリーズチュートリアルの一部です。コメントシステムやデータ統計システムなどの構築に興味がある方は、引き続きご注目ください。皆さんの参考になれば幸いです。