万物之时

万物之时

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

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

376
AI 翻訳
この記事はAIを通じて中国語から日本語に翻訳されました。原文を表示
AI が生成した要約
基于Cloudflare Pages和Telegram的免费图床搭建教程介绍了如何创建一个开源的图床，支持多种上传方式和格式的链接复制。用户可以自定义页面背景、名称和Logo，并享有无限的图片存储。部署过程包括创建Telegram机器人和频道，获取相应的TG_BOT_TOKEN和TG_CHAT_ID，最后在Cloudflare上进行项目部署。教程强调了无需购买服务器和域名的优势，且提供了图片管理和审查功能。

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. ユーザーフレンドリーなアップロード#

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

4. 多様なコピー#

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

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

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

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

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

7. いくつかの小機能#

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

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 名前空間を先ほど作成した KV データベースに選択します。

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