fscarmen

fscarmen

GitLab プライベートリポジトリの画像ホスティング、PicGo アップロード、CloudFlare Worker 加速、GitHub リアルタイムバックアップ

動画チュートリアル#

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

  • 本文では、GitLab を画像ホスティングとして使用し、GitHub をバックアップとして利用する方法を紹介します。

  • 以前に、GitHub を画像ホスティングとして使用し、GitLab をバックアップとして利用する方法を紹介しました、【GitHub プライベートリポジトリを画像ホスティングに、PicGO でアップロード、Cloudflare Workers で加速、GitLab でリアルタイムバックアップ】 、これは逆の操作です。

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

ソリューションの特徴と利点:

  • GitLab プライベートリポジトリに保存:画像は GitLab のプライベートリポジトリに保存され、パスはマスキング処理されており、安全性が確保されています。プラットフォームは GitHub よりも安定しています。
  • 画像の自動圧縮:画像を自動的に圧縮し、読み込み速度を向上させ、ユーザー体験を最適化します。
  • Cloudflare CDN による加速:Cloudflare CDN が提供するグローバル加速サービスを利用し、画像の迅速な読み込みを確保します。
  • カスタムドメインのサポート:カスタムドメインの使用をサポートし、ブランドイメージと専門性を向上させます。
  • 多様なリンク形式の出力:ブログや他のプラットフォームで使用するために、さまざまな形式の画像リンクを生成します。
  • GitHub プライベートリポジトリへのリアルタイムバックアップ(オプション): GitLab を GitHub のプライベートリポジトリにリアルタイムバックアップすることで、データの冗長性とクロスプラットフォームバックアップを提供し、データの安全性を強化し、ビジネスの継続性を保証します。

条件#

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

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

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

Worker で処理された画像リンクを取得:Worker を通じて GitLab プライベートリポジトリの API を隠し、CDN とデュアルスタックを追加し、カスタムドメインの URL を出力します。

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

詳細な重要ステップ#

前提条件、GitLab プライベートリポジトリを新規作成し、GitLab API とプロジェクト ID を取得#

  • GitHub にログインし、https://gitlab.com/projects/new#blank_project にアクセスして新しいプロジェクトを作成し、画像を保存するためのプライベートリポジトリを作成します。現在、GitLab の各プロジェクトは 4GB のサイズで、超えた場合は新しいものを作成できます。

image
image

  • プロジェクトの読み書き権限の API を取得します。

image
image

  • プロジェクト ID を取得します。

image

Tinypng API キーを取得#

image
image
image

PicGo の設定#

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

image
image
image

  • gitlab-file プラグインをインストールします(このステップでは科学的な手法を有効にする必要があるかもしれません)。

image

  • PicGo のメインプログラムを設定します。
名称介绍及配置示例
画像ホスティング設定名自分が覚えやすい名前を付ければよい、デフォルトは Default
gitlab サーバーアドレスhttps://gitlab.com
プロジェクト ID前に取得した GitLab プロジェクト ID を記入
デフォルトブランチmainと記入、他のものを記入した場合、後の worker のリバースプロキシに相応の変更が必要
gitlab のトークン前に取得した GitLab プロジェクト API を記入(PicGo は平文で保存します)
ファイル名とそのパス&lt画像保存のカスタムパス&gt/{fileName}
アップロードファイルのメッセージUpload {fileName} By PicGo gitlab files uploader at {year}-{month}-{day}
カスタムリンク形式!(https://&ltworkerカスタムドメイン&gt/&ltGitLab画像ホスティングプロジェクト名&gt/&lt画像保存のカスタムディレクトリ、複数階層可&gt/$fileName$extName)

image
image
image
image
image
image
image

Cloudflare で worker を作成#

image

  • デプロイ後、コードを編集し、図に従って相応の 2 箇所を修正します。
// GitLabリポジトリ名、リポジトリID、APIトークンを定義
const REPO_CONFIG = [
    { name: 'repoName1', id: 'repoID1', token: 'repoAPI1' },
    { name: 'repoName2', id: 'repoID2', token: 'repoAPI2' },
    { name: 'repoName3', id: 'repoID3', token: 'repoAPI3' },
  ];
  
  async function handleRequest(request) {
    const url = new URL(request.url);
    const pathParts = url.pathname.split('/').filter(Boolean);
  
    console.log('URL:', url.toString());
    console.log('Path parts:', pathParts);
  
    if (pathParts.length < 1) {
      return new Response('無効なURL形式', { status: 400 });
    }
  
    const gitlabRepo = pathParts[0];
    console.log('要求されたリポジトリ:', gitlabRepo);
  
    const repoConfig = REPO_CONFIG.find(repo => repo.name === gitlabRepo);
  
    if (!repoConfig) {
      console.log('設定にリポジトリが見つかりません。利用可能なリポジトリ:', REPO_CONFIG.map(r => r.name));
      return new Response('リポジトリが見つかりません', { status: 404 });
    }
  
    const { id: gitlabRepoId, token: gitlabApiToken } = repoConfig;
  
    // 残りのパスを取得し、エンコード
    const remainingPath = pathParts.slice(1).join('/');
    const encodedPath = encodeURIComponent(remainingPath);
  
    console.log('残りのパス:', remainingPath);
    console.log('エンコードされたパス:', encodedPath);
  
    // GitLab API URLを構築
    const apiUrl = `https://gitlab.com/api/v4/projects/${gitlabRepoId}/repository/files/${encodedPath}/raw?ref=main`;
    console.log('GitLab API URL:', apiUrl);
  
    try {
      // GitLab APIにリクエストを送信
      const response = await fetch(apiUrl, {
        method: 'GET',
        headers: {
          'PRIVATE-TOKEN': gitlabApiToken
        }
      });
  
      console.log('GitLab API応答ステータス:', response.status);
  
      if (!response.ok) {
        return new Response(`GitLabからの取得エラー: ${response.statusText}`, { status: response.status });
      }
  
      // GitLabの応答を返す
      const contentType = response.headers.get('Content-Type');
      const body = await response.arrayBuffer();
  
      console.log('Content-Type:', contentType);
  
      return new Response(body, {
        status: response.status,
        headers: {
          'Content-Type': contentType,
          'Cache-Control': 'public, max-age=3600' // 1時間キャッシュ
        }
      });
    } catch (error) {
      console.error('エラー:', error);
      return new Response(`エラーが発生しました: ${error.message}`, { status: 500 });
    }
  }
  
  addEventListener('fetch', event => {
    event.respondWith(handleRequest(event.request));
  });

image

  • カスタムドメインを追加します。worker が提供するドメイン https://&lt;workerName&gt;.&lt;cloudflareUser&gt;.workers.dev を試してみてください。

image

正式な使用プロセス#

スクリーンショット#

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

画像をアップロード#

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

image
image

GitHub へのリアルタイムバックアップ(オプション)#

GitHub の設定#

  • GitHub にログインし、バックアッププロジェクトリポジトリを作成します。https://github.com/new にアクセスします。

image

image
image
image
image
image

GitLab の設定#

2 つの方法がありますので、いずれかを選択してください:1. GitLab プラットフォームのミラー機能を使用(推奨);2. CI/CD ワークフローを使用。

方法 1:GitLab プラットフォームのミラー機能#

image
image
image
image

方法 2:CI/CD パイプラインを通じて#

  • CI/CD で 3 つの環境変数を作成します。
変数説明
GITHUB_USERNAMEGitHub のユーザー名
GITHUB_REPO前に作成した GitHub バックアップリポジトリ名を記入
GITHUB_PAT前に取得した GitHub PAT トークンを記入

image
image

  • GitHub へのバックアップのための CI/CD パイプラインを作成し、以下のコードを使用します。

image

image: alpine:latest

variables:
  GIT_STRATEGY: clone

before_script:
  - apk add --no-cache curl git

sync_to_github:
  script:
    - |
      # ローカルとGitHubリモートリポジトリの最新コミットハッシュを取得し、表示
      LOCAL_COMMIT=$(git rev-parse HEAD)
      REMOTE_COMMIT=$(curl -s -H "Authorization: token ${GITHUB_PAT}" "https://api.github.com/repos/${GITHUB_USERNAME}/${GITHUB_REPO}/commits/main" | awk -F '"' '/"sha":/{print $4; exit}')
      echo "ローカルコミット: $LOCAL_COMMIT"
      echo "リモートコミット: $REMOTE_COMMIT"

      # ローカルとリモートのコミットを比較し、更新があればGitHubにプッシュ
      if [ "$LOCAL_COMMIT" != "$REMOTE_COMMIT" ]; then
        echo "更新をGitHubにプッシュしています..."
        git config --global user.email "${GITHUB_USERNAME}@gitlab.com"
        git config --global user.name "${GITHUB_USERNAME}"
        git remote add github https://${GITHUB_PAT}@github.com/${GITHUB_USERNAME}/${GITHUB_REPO}.git
        git push github HEAD:main --force
      else
        echo "更新は必要ありません。"
      fi
  rules:
    - if: $CI_PIPELINE_SOURCE == "push" || $CI_PIPELINE_SOURCE == "web"

image
image
image
image

画像の例#

https://pic.forvps.gq/pic2/images/202410081627933.png

image

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