全網初公開！従来の単一ノード画像ホスティングにさよなら！GitHubとGitLabが連携してクラスターを構成し、画像ストレージの新しい章を開きます

動画チュートリアル#

前言とプロジェクトの特徴#

デジタル化の波が押し寄せる今日、画像は情報伝達に欠かせない重要な要素となっています。個人ブログを飾る美しい画像から、さまざまなアプリケーションの運用を支える豊富な素材まで、その保存と管理の有効性、安全性、安定性、速度、コスト効率は、現在のソリューションが追求する核心的な目標です。しかし残念ながら、現在の主流のソリューションはほとんどが従来の単一ノードストレージモデルに限られており、このモデルは日々膨張するストレージ需要とアクセス速度の向上要求に直面して、もはや力不足となっています。

この背景の中で、私は革命的なソリューションを設計しました ——GitHub と GitLab に基づく画像ホスティングクラスタアーキテクチャ。このアーキテクチャは、従来の束縛を打破し、個人の画像保存管理を新たな高みに導くことを目的としています。k8s のクラスタ化思考を取り入れることで、膨大なストレージ需要を満たし、アクセス速度を確保し、コスト効率も考慮した新しい画像ホスティングの総合ソリューションを提供することを期待しています。

ソリューションの利点：

ストレージの限界を突破し、無限の可能性を解放: クラスタアーキテクチャを使用し、GitHub と GitLab の複数ノードが協調して動作することで、単一のリポジトリの容量のボトルネックを完全に打破しました。膨大な画像や高解像度の大画像にも簡単に対応でき、ストレージオブジェクトの容量が創造性の束縛になることはありません。
データの安全性に心配なし、多重バックアップで保護: データの安全性は私たちが最も重視する側面の一つです。本ソリューションは、データを複数のノード間で自動的に同期する戦略を採用し、データの安全性と信頼性を確保しています。また、データは GitHub の単一ノードに自由に保存できるだけでなく、GitLab でミラーリングバックアップも行い、二重の保障を形成しています。どちらかのプラットフォームに問題が発生しても、データは無傷で、安心して使用できます。
インテリジェントな監視、ノードの状態を簡単に把握: 本ソリューションでは、カスタムパスワードを使用することで、クラスタギャラリー内の各ノードの作業状態を簡単に取得できます。この革新的な設計は、管理プロセスを簡素化するだけでなく、システムの保守性と安定性を向上させます。
統一ドメイン名、アクセス体験を簡素化: 本ソリューションの画像ホスティングクラスタは複数のノードで構成されていますが、仲間は統一されたカスタムドメイン名を使用するだけで簡単にアクセスできます。この設計は、仲間の使用プロセスを簡素化するだけでなく、アクセスの統一性と一貫性を確保し、プロジェクトをより専門的で信頼性のあるものにします。
同時アクセス、速度が王: アクセス速度に関しても、本ソリューションは妥協しません。GitHub と GitLab への同時アクセスを通じて、応答速度が最も速いノードを自動的に選択してデータを転送します。この革新的な設計により、仲間は必要なコンテンツを最速で取得でき、体験と満足度が向上します。
Cloudflare CDN のサポート、グローバル加速: 本ソリューションは特に Cloudflare CDN を導入し、そのグローバルエッジコンピューティング能力を利用してアクセス速度を大幅に向上させます。仲間がどこにいても、シルクのように滑らかなアクセス体験を享受できます。
画像圧縮最適化、読み込み速度を向上: 仲間の体験をさらに向上させるために、本ソリューションはすべてのアップロードされた画像を圧縮処理します。ファイルサイズを減少させることで、ストレージスペースを節約するだけでなく、ウェブページの読み込み速度も大幅に向上させます。

条件#

GitHub アカウント、https://github.com
GitLab アカウント、https://gitlab.com
Cloudflare アカウント、https://www.cloudflare.com
Tinypng アカウント、https://tinypng.com/developers
Snipaste をインストール、https://zh.snipaste.com
PicGo をインストール、https://molunerfinn.com/PicGo

プロセスとツールの紹介#

スクリーンショット：Snipaste を使用してスクリーンショットを撮ります。このシンプルで強力なスニッピングツールは、スクリーンショット、注釈などの機能をサポートし、Windows と Mac に対応しています。

PicGo で画像を GitHub にアップロード：PicGo を使用し、picgo-plugin-compress-next プラグインをインストールして、画像を自動的に圧縮してから GitHub にアップロードします。

Worker で処理された画像リンクを取得：Worker を通じて GitHub と GitLab のプライベートリポジトリの PAT を隠し、自分の CDN と二重スタックを使用してカスタムドメインの URL を出力します。

定期的な自動データ同期：GitHub アクションまたは GitLab パイプラインのスケジュールタスクを使用して、GitHub と GitLab の各ノードのデータを定期的にバックアップし、画像がすべて失われるリスクを回避します。

詳細な重要ステップ#

GitHub で n 個のプライベートリポジトリを作成し、PAT を取得#

https://github.com/new にアクセスし、3 つのプライベートリポジトリを作成する例を示します。同じプレフィックスを持ち、数字のシーケンスを加えます。例：node-1, node-2, node-3 ...

これら 3 つのプライベートリポジトリの PAT を作成します。https://github.com/settings/tokens にアクセスします。

GitLab で n 個の同名プライベートリポジトリを作成し、n 個の PAT と Repo ID を取得#

https://gitlab.com/projects/new#blank_project にアクセスし、前に作成したプライベートリポジトリと完全に同じ名前の 3 つのプライベートリポジトリを作成します。

すべての PAT と Project ID を記録する#

PicGo 圧縮プラグイン compress-next#

PicGo をインストールした後、ソフトウェア内で picgo-plugin-compress-next プラグインをインストールします（このステップでは科学を有効にする必要があるかもしれません）。

PicGo 設定#

PicGo のメインプログラムを設定します。

3 つの GitHub ノードの設定を作成します。

Cloudflare で Worker を作成#

Cloudflare にログインし、https://dash.cloudflare.com/ にアクセスして新しい Worker を作成します。

デプロイ後、コードを編集し、GitHub からhttps://github.com/fscarmen2/pic-hosting-clusterのコードをコピーして、図に従って相応の位置を修正します。

カスタムドメイン名を追加します。時々すぐには反映されないことがありますが、Worker が提供するドメインhttps://<workerName>.<cloudflareUser>.workers.devを試してみてください。

正式な使用プロセス#

スクリーンショット#

Snipaste を使用してクリップボードにスクリーンショットを撮ります。ショートカットキー（デフォルトは Ctrl + F1）を使用できます。

画像をアップロード#

PicGo を使用して画像を GitHub にアップロードします。ショートカットキー（デフォルトは Ctrl + Shift + P）を使用するか、画像を PicGo のインターフェースにドラッグアンドドロップします。

アップロード成功の進捗バーは青色です。赤色の場合は、設定に誤りがないか確認してください。アップロード成功後、カスタムドメインのリンクが自動的にクリップボードにコピーされ、適切なシーン（ブログやフォーラムなど）に貼り付けます。

定期的に GitLab の対応ノードに同期#

定期的な同期タスクは、GitHub または GitLab のいずれかに設定できます。以下にそれぞれ説明します。

GitHub Action で定期タスクを作成#

https://github.com/fscarmen2/pic-hosting-clusterからコードを取得し、github_to_gitlab モジュールを見つけ、GitHub に定期同期タスク用のプライベートリポジトリを新規作成し、私のリポジトリからコードをコピーします。

GitLab パイプラインで定期タスクを作成#

https://github.com/fscarmen2/pic-hosting-clusterからコードを取得し、github_to_gitlab モジュールを見つけ、GitLab に定期同期タスク用のプライベートリポジトリを新規作成し、私のリポジトリからコードをコピーします。

進化#

各ノードの状態を検出#

https://<カスタムドメイン名>/< カスタム検出パスワード >

画像を GitHub から取得する指定#

https://<カスタムドメイン名>/< ファイル名 >?from=github

画像を GitLab から取得する指定#

https://<カスタムドメイン名>/< ファイル名 >?from=gitlab

画像と所属ノード情報を照会#

https://<カスタムドメイン名>/< ファイル名 >?from=where

まとめ#

本ソリューションは GitHub と GitLab に基づく画像ホスティングクラスタアーキテクチャで、革新的なアイデアと卓越した性能をもって、画像保存管理に新たな変革をもたらしました。個人ユーザーにとって、これは個人ブログ、ソーシャルメディアの共有、ゲーム開発における素材管理など、画像リソースをより便利で効率的に管理する方法を提供することを意味し、大幅な向上と簡素化が実現されます。