CloudflareとAIでサイト公開する方法

TL;DR

CloudflareのMCPとWranglerをClaude CodeやCodexに接続すると、自然言語の指示からWebサイトの作成、各種リソースの設定、公開まで進められる。まずアカウントを作成し、案内プロンプトによるMCP設定と認証を済ませ、Wranglerを導入する。

Transcript

はい、こんにちは。ケトです。この チャンネルは精成の最新情報や活用事例を 紹介してます。是非チャンネル登録お願い いたします。そして今回のテーマは クラウドフレアってやつがAIとの相性が めちゃくちゃ良くて、え、こちらにですね 、クラウドフレアとクロードコードや コデックスなどのAIエージェントを 組み合わせた活用方法っていうのをですね 、紹介していきたいと思います。え、それ に合わせてクラウドフレアっていうのが どういうサービスになってるのか、え、 どんなメリットがあって、クラウドフレア 上のR2とかD1とかっていうね、いくつ かの用語があるんですけど、その辺りも 合わせて解説していきたいと思います。え 、AIエージェントとかAI活用とかを ですね、ま、意識的に勉強してるって方 はですね、... Read More

Key Insights

• Cloudflareは、Webサイトの配信、アプリケーションの実行、DNS管理、ファイル保存、セキュリティ対策を一つの環境で扱えるクラウドネットワークサービスである。
• Workersは、WebサイトやWebアプリケーションを世界各地の拠点から配信し、利用者に近い拠点を使うことで高速な表示を実現する仕組みとして紹介されている。
• R2は画像、動画、PDFなどのファイルを保存する機能であり、AIエージェントに指示すれば、サイトで使う画像を保存して参照する構成も作成できる。
• D1はWebアプリケーションで利用するデータベースであり、デモではサンプルサイトの一部として作成され、Cloudflareの管理画面から存在が確認された。
• KVは秘密鍵や暗号などの短い情報を保存するメモのような機能であり、Wranglerを通じて登録や設定を操作できる対象として説明されている。
• WranglerはCloudflareをコマンドラインから操作するツールであり、Claude CodeやCodexに使わせることでR2、D1、KVなどの細かな設定を自然言語から実行できる。
• MCP連携は、Cloudflareの画面で案内プロンプトをコピーしてAIエージェントに渡し、ログインと認証を行った後、コネクター画面で接続状態を確認する流れである。
• CloudflareとAIエージェントの組み合わせは、個人用Webツール、事業計画ページ、HTMLスライド、ゲーム、企業サイト、ポートフォリオなどの作成と運用に利用できる。

Questions & Answers

Q: CloudflareとClaude Codeを接続する方法は？

Cloudflareのアカウントを作成してログインし、管理画面にあるAIエージェント向けの案内を開いてプロンプトをコピーする。その内容をClaude Codeへそのまま渡し、表示される指示に従ってCloudflareへのログインと認証を完了する。最後にClaude Codeの設定からコネクターを開き、CloudflareのMCPが接続済みになっていることを確認する。

Q: CloudflareのWranglerとは何ですか？

Wranglerは、Cloudflareをコマンドラインから操作するためのツールである。Cloudflare上のR2、D1、KVなどについて、設定の変更や新しい情報の登録をコマンドで実行できる。Claude CodeやCodexにWranglerを使わせれば、自然言語で依頼した作業をAIエージェント経由で進められる。

Q: CloudflareでWebサイトを公開する方法は？

MCPとWranglerをAIエージェントに接続した後、作りたいサイトの内容とCloudflareへ公開する旨を自然言語で指示する。AIエージェントはサイトを作成し、必要なWorkersやデータベースなどのリソースを用意してデプロイまで進める。公開後は発行されたURLとCloudflareの管理画面で結果を確認する。

Q: CloudflareのR2とD1の違いは何ですか？

R2は画像、動画、PDFなどのファイルを保存するための機能であり、D1はWebアプリケーションで扱うデータを保存するデータベースである。デモでは、R2に画像を保存してサイトから利用し、D1にはデータベースを使った仕組みを組み込むよう指示しており、両者は保存する情報の種類と用途が異なる。

Q: CloudflareのWorkersとは何ですか？

Workersは、WebサイトやWebアプリケーションを表示するためにコンテンツを配信し、アプリケーションを動かす基盤として使われる機能である。世界各地に拠点があり、アクセスした利用者に近い拠点から配信されるため、Webサイトを高速に表示できる仕組みとして説明されている。

Q: Cloudflareは無料でどこまで使えますか？

紹介された範囲では、Webサイトを作成して公開する程度なら無料で試すことができ、複数のサイトも作成できるとされている。また転送量は無料と説明されている。一方、保存するコンテンツの量や処理回数などには課金対象があり、独自ドメインの料金や、容量不足に伴うサブスクリプションが必要になる場合もある。

Q: Cloudflare操作用のAIスキルを作る方法は？

CloudflareのMCPを接続し、公式ドキュメントのURLをAIエージェントに渡してWranglerを導入する。その後、MCPとWranglerを使ってCloudflareを素早く操作できるエージェントスキルを作成するよう指示する。両方を一まとまりにしておけば、スラッシュコマンドや自然言語からCloudflareの操作を呼び出しやすくなる。

Q: CloudflareとAIエージェントは何に活用できますか？

自分だけが使う業務効率化用のWebツールを多数公開したり、音声入力した事業アイデアをWeb形式の事業計画書として保存したりできる。HTMLスライドや簡単なゲームの公開、企業サイトやポートフォリオの本番運用にも利用でき、CMSを導入すればブログやメディアサイトをAIエージェントから運用することも可能と紹介されている。

Summary & Key Takeaways

• Cloudflareは、WebサイトやWebアプリケーション、MCPなどの配信基盤として利用できるクラウドネットワークサービスである。サイトの配信、攻撃への対策、アプリケーションの実行、DNSによるドメイン管理、画像や動画などの保存を一つの環境で扱える。世界各地の拠点から利用者に近い場所を経由してコンテンツを配信するため、高速な表示も特徴として紹介されている。

• 主要機能として、Webサイトやアプリケーションを配信するWorkers、画像・動画・PDFなどを保存するR2、データベースとして使うD1、短い情報を保存するKV、ドメインの住所を管理するDNSがある。さらにWranglerはCloudflareをコマンドラインから操作するツールであり、R2、D1、KVなどの作成や設定をAIエージェントに実行させるための重要な接点になる。

• 連携では、Cloudflareのアカウント画面からAIエージェント向けの案内プロンプトをコピーし、Claude Codeへ渡してMCPを設定する。認証後にコネクター画面で接続を確認し、公式ドキュメントを参照させてWranglerも導入する。デモでは、自然言語でLPの作成、R2への画像保存、D1の構築、Workersへのデプロイを依頼し、公開済みサイトと作成されたリソースを確認した。