万物之时

万物之时

万物之时的个人博客
github
blog
首页归档留言板

Cloudflare Pages と Telegram に基づく無料の画像ホスティング構築チュートリアル 577f6e7e6ead484da88a9b20b4461ee7

356
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
Cloudflare PagesとTelegramを利用した無料の画像アップローダーの構築方法についてのチュートリアルです。このプロジェクトはオープンソースで、ユーザーが自由に変更や使用が可能です。主な機能には、滑らかなアニメーション、直感的なアップロード方法、リアルタイムの進捗表示、複数のリンク形式でのコピー、認証機能、カスタマイズ可能なページ設定などがあります。画像はCloudflareのネットワーク上にホスティングされ、無料で無制限に保存できます。Telegramボットを作成し、チャンネルを設定することで、簡単にデプロイできます。具体的な手順も説明されています。

Cloudflare Pages と Telegram に基づく無料画像ホスティングの構築チュートリアル#

type: 記事
status: 公開
date: 2024/10/17
slug: tuiljni
summary: Cloudflare Pages と Telegram に基づく無料画像ホスティングの構築チュートリアル
tags: GitHub, 画像ホスティング，ツール
category: チュートリアル

プロジェクトアドレス https://github.com/MarSeventh/CloudFlare-ImgBed#

1. イントロダクション#

1. オープンソース#

  • フロントエンドはオープンソース（自分で修正、パッケージ化して使用可能）

2. クールなアニメーション（#

  • 滑らかでスムーズなトランジションアニメーション～
  • アップロードファイルで呼吸灯効果を実現

3. ユーザーフレンドリーなアップロード#

  • 大多数の一般的な画像、動画、アニメーションなどをサポート
  • 複数のアップロード方法をサポート（ドラッグ＆ドロップ、貼り付け）
  • 貼り付けアップロードはファイルとURLをサポート
  • バッチアップロードをサポート（同時に選択できるファイル数に制限はありませんが、安定性を確保するために同時にアップロード中のファイルは最大 10 個まで）
  • アップロード中のリアルタイム進捗表示
  • アップロード後、画像を手動でクリックする必要はなく、管理ページに直接表示されます
  • サイズが大きすぎる画像はフロントエンドで圧縮され、アップロードの安定性と読み込み性能が向上します
  • 圧縮品質をカスタマイズ可能で、前後端の圧縮機能をカスタマイズして有効化できます

4. 多様なコピー#

  • 全体コピーと個別コピーをサポート（全体コピーはすべてのリンクを改行でつなげてコピーすることを意味します）
  • MarkDown、HTML、BBCode、原始リンクの 4 つのフォーマットでコピーをサポート
  • アップロード完了後、4 つのフォーマットのリンクを直感的に表示

5. 認証と悪用防止をサポート#

  • Web と API のアップロード認証をサポート（感謝 hl128k）
  • アクセスドメイン制限をサポート（感謝 hl128k）
  • アップロード IP 統計をサポート

6. ページカスタマイズをサポート#

  • ページ背景は単一画像、カスタム複数画像スライドショー、Bing ランダム画像スライドショーなどの多様なモードをサポート
  • 画像ホスティング名とロゴをカスタマイズ
  • ウェブサイトのタイトルとアイコンをカスタマイズ

7. いくつかの小機能#

  • ランダム画像API をサポートし、画像ホスティングからランダムに 1 枚の画像を返します

8. オリジナルのすべての機能もサポート#

  1. 無制限の画像ストレージ数、無制限の画像をアップロードできます

  2. サーバーを購入する必要はなく、Cloudflare のネットワーク上にホスティングされ、使用量が Cloudflare の無料枠を超えない限り、完全に無料です

  3. ドメインを購入する必要はなく、Cloudflare Pages が提供する *.pages.dev の無料サブドメインを使用でき、カスタムドメインのバインドもサポートしています

  4. 画像審査API をサポートし、必要に応じて有効化できます。有効化後、不適切な画像は自動的にブロックされ、読み込まれなくなります

  5. バックエンド画像管理をサポートし、アップロードした画像のオンラインプレビュー、ホワイトリスト、ブラックリストなどの操作が可能です

2. デプロイ#

1. Telegram ボットを作成して TG_BOT_TOKEN を取得#

  1. @BotFather に /newbot を送信し、指示に従ってボットのメモ、ユーザー名などの情報を入力します。成功すると、図の赤い部分が TG_BOT_TOKEN になります。

    https://tuwwzs.pages.dev/file/1729154237023_Screenshot_20241017_155651_edit_574428759597799.jpg

    Telegram チャンネルを作成して TG_CHAT_ID を取得#

    新しいチャンネル（Channel）を作成し、下の図のようにボットをチャンネルに追加します。

    https://tuwwzs.pages.dev/file/1729154241321_Screenshot_20241017_160513_edit_574445754749303.jpg

    https://tuwwzs.pages.dev/file/1729154241183_Screenshot_20241017_160520_edit_574457710440653.jpg

先ほど作成したチャンネルを選択し、ボットに管理者権限を付与#

https://tuwwzs.pages.dev/file/1729154244368_Screenshot_20241017_160533_edit_574471031884085.jpg

@VersaToolsBot に転送して第 2 ステップで作成したチャンネルのメッセージを取得し、TG_CHAT_ID（チャンネル ID）を取得します。#

https://tuwwzs.pages.dev/file/1729154245823_Screenshot_20241017_161503_edit_574486968755694.jpg

Cloudflare にデプロイ#

CF の強力な機能を活用し、簡単な手順でこのプロジェクトをデプロイし、自分の画像ホスティングを持つことができます。

  1. Fork https://github.com/MarSeventh/CloudFlare-ImgBed

https://tuwwzs.pages.dev/file/1729153327657_Clip_2024-10-17_16-21-51.png

  1. Cloudflare Dashboard を開き、Pages 管理ページに移動し、プロジェクトを作成するを選択し、Git プロバイダーに接続を選択します。

https://alist.sanyue.site/d/imgbed/202407201047300.png

  1. ページの指示に従ってプロジェクト名を入力し、接続する git リポジトリを選択し、サイトをデプロイをクリックします。
  2. 前に取得した TG_BOT_TOKEN と TG_CHAT_ID をそれぞれ環境変数に追加し、環境変数名は TG_BOT_TOKEN と TG_CHAT_ID です
  3. KV データベースをバインド：

    • 新しい KV データベースを作成します。

      https://tuwwzs.pages.dev/file/1729153507708_Clip_2024-10-17_16-24-57.png

    • プロジェクトの対応する 設定>関数>KV 名前空間バインディング>バインディングを編集>変数名 に img_url を入力し、先ほど作成した KV データベースを選択します。

  4. 再デプロイを行うと、プロジェクトが正常に使用できるようになります。
読み込み中...
文章は、創作者によって署名され、ブロックチェーンに安全に保存されています。