動画チュートリアル#
前書きとプロジェクトの特徴#
-
本文では、GitLab を画像ホスティングとして使用し、GitHub をバックアップとして利用する方法を紹介します。
-
以前に、GitHub を画像ホスティングとして使用し、GitLab をバックアップとして利用する方法を紹介しました、【GitHub プライベートリポジトリを画像ホスティングに、PicGO でアップロード、Cloudflare Workers で加速、GitLab でリアルタイムバックアップ】 、これは逆の操作です。
-
新しいブログでは大量の画像を使用するため、プライベートな画像ホスティングを構築する必要があります。有料の商業クラウド OSS ストレージを避け、無料で長期的に安定した保存プラットフォームを見つけ、アクセス速度にも配慮し、できれば異地の災害バックアップも考慮します。これらの目標を達成するために、以下の包括的なソリューションが生まれました。
ソリューションの特徴と利点:
- GitLab プライベートリポジトリに保存:画像は GitLab のプライベートリポジトリに保存され、パスはマスキング処理されており、安全性が確保されています。プラットフォームは GitHub よりも安定しています。
- 画像の自動圧縮:画像を自動的に圧縮し、読み込み速度を向上させ、ユーザー体験を最適化します。
- Cloudflare CDN による加速:Cloudflare CDN が提供するグローバル加速サービスを利用し、画像の迅速な読み込みを確保します。
- カスタムドメインのサポート:カスタムドメインの使用をサポートし、ブランドイメージと専門性を向上させます。
- 多様なリンク形式の出力:ブログや他のプラットフォームで使用するために、さまざまな形式の画像リンクを生成します。
- GitHub プライベートリポジトリへのリアルタイムバックアップ(オプション): GitLab を GitHub のプライベートリポジトリにリアルタイムバックアップすることで、データの冗長性とクロスプラットフォームバックアップを提供し、データの安全性を強化し、ビジネスの継続性を保証します。
条件#
- GitLab アカウント,https://gitlab.com
- GitHub アカウント,オプション、バックアップが不要な場合は無視できます,https://github.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 を通じて GitLab プライベートリポジトリの API を隠し、CDN とデュアルスタックを追加し、カスタムドメインの URL を出力します。
GitHub から GitLab に最新の画像を自動的にプッシュ:GitLab CI/CD を使用し、データに更新があった場合、自動的に GitHub にバックアップを行い、画像がすべて失われるリスクを回避します。
詳細な重要ステップ#
前提条件、GitLab プライベートリポジトリを新規作成し、GitLab API とプロジェクト ID を取得#
- GitHub にログインし、https://gitlab.com/projects/new#blank_project にアクセスして新しいプロジェクトを作成し、画像を保存するためのプライベートリポジトリを作成します。現在、GitLab の各プロジェクトは 4GB のサイズで、超えた場合は新しいものを作成できます。
- プロジェクトの読み書き権限の API を取得します。
- プロジェクト ID を取得します。
Tinypng API キーを取得#
- Tinypng.com に登録し、https://tinypng.com/developers にアクセスして登録します。
PicGo の設定#
- PicGo をインストールした後、ソフトウェア内で picgo-plugin-compress-next プラグインをインストールします(このステップでは科学的な手法を有効にする必要があるかもしれません)。
- gitlab-file プラグインをインストールします(このステップでは科学的な手法を有効にする必要があるかもしれません)。
- PicGo のメインプログラムを設定します。
名称 | 介绍及配置示例 |
---|---|
画像ホスティング設定名 | 自分が覚えやすい名前を付ければよい、デフォルトは Default |
gitlab サーバーアドレス | https://gitlab.com |
プロジェクト ID | 前に取得した GitLab プロジェクト ID を記入 |
デフォルトブランチ | main と記入、他のものを記入した場合、後の worker のリバースプロキシに相応の変更が必要 |
gitlab のトークン | 前に取得した GitLab プロジェクト API を記入(PicGo は平文で保存します) |
ファイル名とそのパス | <画像保存のカスタムパス>/{fileName} |
アップロードファイルのメッセージ | Upload {fileName} By PicGo gitlab files uploader at {year}-{month}-{day} |
カスタムリンク形式 | !(https://<workerカスタムドメイン>/<GitLab画像ホスティングプロジェクト名>/<画像保存のカスタムディレクトリ、複数階層可>/$fileName$extName) |
Cloudflare で worker を作成#
- Cloudflare にログインし、https://dash.cloudflare.com/ にアクセスして新しい worker を作成します。
- デプロイ後、コードを編集し、図に従って相応の 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));
});
- カスタムドメインを追加します。worker が提供するドメイン
https://<workerName>.<cloudflareUser>.workers.dev
を試してみてください。
正式な使用プロセス#
スクリーンショット#
- Snipaste を使用してクリップボードにスクリーンショットを撮ります。ショートカットキー(デフォルトは Ctrl + F1)を使用できます。
画像をアップロード#
- PicGo を使用して画像を GitHub にアップロードします。ショートカットキー(デフォルトは Ctrl + Shift + P)を使用するか、画像を PicGo のインターフェースにドラッグします。
- アップロードが成功すると、進捗バーは青色になります。赤色の場合は設定に誤りがないか確認してください。アップロードが成功すると、カスタムドメインのリンクが自動的にクリップボードにコピーされます。
- 該当するシーンのブログやフォーラムなどに貼り付けます。
GitHub へのリアルタイムバックアップ(オプション)#
GitHub の設定#
- GitHub にログインし、バックアッププロジェクトリポジトリを作成します。https://github.com/new にアクセスします。
- https://github.com/settings/tokens?type=beta にアクセスして PAT を取得します。
GitLab の設定#
2 つの方法がありますので、いずれかを選択してください:1. GitLab プラットフォームのミラー機能を使用(推奨);2. CI/CD ワークフローを使用。
方法 1:GitLab プラットフォームのミラー機能#
方法 2:CI/CD パイプラインを通じて#
- CI/CD で 3 つの環境変数を作成します。
変数 | 説明 |
---|---|
GITHUB_USERNAME | GitHub のユーザー名 |
GITHUB_REPO | 前に作成した GitHub バックアップリポジトリ名を記入 |
GITHUB_PAT | 前に取得した GitHub PAT トークンを記入 |
- GitHub へのバックアップのための CI/CD パイプラインを作成し、以下のコードを使用します。
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"
画像の例#
https://pic.forvps.gq/pic2/images/202410081627933.png