GitHub プライベートリポジトリ画像ホスティングクラスター、PicGO アップロード、Cloudflare Workers 加速、Gitlab リアルタイムバックアップ

動画教育#

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

新しいブログで大量の画像を使用するため、プライベートな画像ホスティングを構築する必要があります。料金のかかる商業クラウド OSS ストレージを避け、無料で長期的に安定した保存プラットフォームを見つけ、アクセス速度にも配慮し、できれば異地災害対策も考慮します。これらの目標を達成するために、以下の包括的な解決策が生まれました。

方案の特徴と利点：

画像ホスティングクラスター：複数の GitHub リポジトリで構成されたストレージシステム。各リポジトリの 4G サイズの制限を突破します。各リポジトリは 1 つのノードとして機能し、全体的なリソースストレージネットワークを形成します。異なるリポジトリは独立して管理されつつ、分散型のマルチリポジトリクラスターを構成します。
GitHub プライベートリポジトリに画像を保存：画像は GitHub のプライベートリポジトリに保存され、パスはデータマスキング処理されて安全性が確保されています。
自動画像圧縮：自動で画像を圧縮し、読み込み速度を向上させ、ユーザー体験を最適化します。
Cloudflare CDN 加速：Cloudflare CDN が提供するグローバル加速サービスを利用し、画像の迅速な読み込みを確保します。
カスタムドメイン：カスタムドメインの使用をサポートし、クラスター内の n 個の画像ライブラリが統一されたドメインを持ち、ブランドイメージと専門性を向上させます。
多様なリンク形式の出力：さまざまな形式の画像リンクを生成し、ブログや他のプラットフォームでの使用を便利にします。
GitLab プライベートリポジトリへのリアルタイムバックアップ（オプション）：GitHub をリアルタイムで GitLab プライベートリポジトリにバックアップし、データの冗長性とクロスプラットフォームバックアップを提供し、データの安全性を強化し、ビジネスの継続性を保証します。

条件#

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 プライベートリポジトリの PAT を隠し、CDN とデュアルスタックを追加し、カスタムドメインの URL を出力します。

GitHub から GitLab に最新の画像を自動でプッシュ：GitHub アクションを使用し、データに更新があった場合、自動的に GitLab にバックアップし、画像がすべて失われるリスクを回避します。

詳細な重要ステップ#

前提条件、GitHub PAT と Tinypng API キーの取得#

GitHub にログインし、https://github.com/settings/tokens にアクセスして PAT を取得し、画像を保存するためのプライベートリポジトリを作成します。現在、GitHub の各プロジェクトは 4G のサイズ制限があり、超えた場合は新しいリポジトリを作成できます。

GitHub に画像を保存するためのプライベートリポジトリを作成し、https://github.com/new にアクセスします。現在、GitHub の各プロジェクトは 4G のサイズ制限があり、超えた場合は新しいリポジトリを作成できます。

Tinypng.com アカウントを登録し、https://tinypng.com/developers にアクセスして登録します。

PicGo の設定#

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

Cloudflare で Worker を作成#

Cloudflare にログインし、https://dash.cloudflare.com/ にアクセスして新しい Worker を作成します。
デプロイ後、コードを編集し、図に従って該当する 2 か所を修正します。

addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const GITHUB_USERNAME = '' // あなたのGitHubユーザー名を設定
  const GITHUB_PAT = ''  // あなたのGitHub PATトークン（Personal Access Token）を設定
  const GITHUB_REPO_PREFIX = 'pic'        // リポジトリのプレフィックス、リポジトリ数REPO_COUNTと組み合わせて使用
  const REPO_COUNT = 10                   // リポジトリの数。例えば10を入力すると、プレフィックスと組み合わせてpic1, pic2, ..., pic10になります
  const DIR = 'images'  // リポジトリ内のディレクトリパス

  // リクエストのURLからファイル名を取得
  const REPOS = Array.from({ length: REPO_COUNT }, (_, i) => `${GITHUB_REPO_PREFIX}${i + 1}`)
  const url = new URL(request.url)
  const FILE = url.pathname.split('/').pop()  // URLの最後の部分をファイル名として取得

  // GitHubのrawファイルのURLリストを構築
  const urls = REPOS.map(repo => `https://raw.githubusercontent.com/${GITHUB_USERNAME}/${repo}/main/${DIR}/${FILE}`)

  // すべてのGitHub rawファイルURLにデータをリクエストするための並行リクエストタスクを作成
  const requests = urls.map(githubUrl => {
    const modifiedRequest = new Request(githubUrl, {
      method: request.method,
      headers: {
        'Authorization': `token ${GITHUB_PAT}`,  // GitHub PATを使用して認証
        'Accept': 'application/vnd.github.v3.raw'
      }
    })
    return fetch(modifiedRequest).then(response => {
      if (response.ok) return response; // レスポンスが成功した場合、そのレスポンスを返す
      throw new Error(`Not Found in ${githubUrl}`); // レスポンスが成功しなかった場合、エラーを投げる
    })
  })

  try {
    // 最初の成功したリクエストの結果を待つ
    const response = await Promise.any(requests)

    // 新しいレスポンスを作成し、Authorizationヘッダーを削除して情報漏洩を防ぐ
    const newResponse = new Response(response.body, response)
    newResponse.headers.delete('Authorization')

    return newResponse

  } catch (error) {
    // すべてのリクエストが失敗した場合、404エラーを返す
    return new Response(`404: File Not Found (${FILE}) in any repository`, { status: 404 })
  }
}

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

正式な使用プロセス#

スクリーンショット#

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

画像のアップロード#

PicGo を使用して画像を GitHub にアップロードします。ショートカットキー（デフォルトは Ctrl + Shift + P）を使用するか、画像を PicGo のインターフェースにドラッグします。
アップロードが成功すると進捗バーが青色になります。赤色の場合は設定に誤りがないか確認してください。アップロードが成功すると、カスタムドメインのリンクが自動的にクリップボードにコピーされます。
該当するシーンのブログやフォーラムなどに貼り付けます。

GitLab へのリアルタイムバックアップ（オプション）#

GitLab の設定#

GitLab にログインし、新しいプロジェクトを作成します。https://gitlab.com/projects/new#blank_project にアクセスします。
PAT と権限を追加します。
強制プッシュを許可するように設定し、GitHub ワークフローがプロジェクトをプッシュできるようにします。

GitHub の設定#

3 つのシークレットを設定します。

名前	シークレット
GITLAB_USERNAME	GitLab ユーザー名
GITLAB_REPO	GitLab で作成したプロジェクト名
GITLAB_PAT	上記で生成した GitLab プロジェクトの PAT

GitLab へのバックアップのためのワークフローを作成します。パスとファイルは

.github/workflows/sync-to-gitlab.yml
コードは以下の通りです：

name: Sync to GitLab

on:
  push:
    branches:
      - main
  workflow_dispatch:

jobs:
  sync:
    runs-on: ubuntu-latest

    env:
      GITLAB_USERNAME: ${{ secrets.GITLAB_USERNAME }}
      GITLAB_REPO: ${{ secrets.GITLAB_REPO }}
      GITLAB_PAT: ${{ secrets.GITLAB_PAT }}

    steps:
    - name: Checkout repository
      uses: actions/checkout@v4.1.1
      with:
        fetch-depth: 0

    - name: Set up Git
      run: |
        git config --global user.name 'github-actions'
        git config --global user.email 'github-actions@github.com'

    - name: Add GitLab remote
      run: git remote add gitlab https://${{ env.GITLAB_USERNAME }}:${{ env.GITLAB_PAT }}@gitlab.com/${{ env.GITLAB_USERNAME }}/${{ env.GITLAB_REPO }}.git

    - name: Force push to GitLab
      run: git push gitlab main --force

画像の例#

https://img.forvps.gq/pic1/main/example/202410021622722.png