【非エンジニア向け】作ったAIアプリをCloudflareで公開する方法

Pages・Workers AI・D1をやさしく解説

こんにちは。

私はもともとIT職ではなく、AIなんて自分には関係ないものだと思っていました。

それが、GitHub Copilotとの出会いをきっかけにアプリを作るようになり、Cloudflareを使って実際に公開できるようになりました。

でも最初は、

作ったアプリをどうやって公開するの？
AIはどうやってつなぐの？
チャット履歴はどこに保存するの？

ということが全くわかりませんでした。

この記事では、当時の私のような初心者向けに、

Cloudflare Pages
Workers AI
D1 Database

について、「何ができるのか」を中心に解説します。

まず覚えてほしい3つ

CloudflareでAIアプリを作る場合、まずは次の3つを覚えれば大丈夫です。

サービス	役割
Pages	画面を公開する
Workers AI	AIが考える
D1	データを保存する

私はこれを

Pages = 見せる
AI = 考える
D1 = 覚える

と覚えています。

例えば転職相談アプリの場合

利用者が

転職したい

と入力すると、

利用者
 ↓
Pages
 ↓
Workers AI
 ↓
回答

という流れでAIが返事をします。

さらに履歴を残したい場合は

利用者
 ↓
Pages
 ↓
Workers AI
 ↓
回答
 ↓
D1に保存

となります。

Cloudflare Pagesとは？

Pagesはアプリを公開する場所です。

例えるなら、

アプリの家です。

せっかくアプリを作っても、自分のパソコンの中にしかなければ他の人は使えません。

Cloudflare Pagesに置くことで、

https://xxxxx.pages.dev

というURLが発行されます。

このURLを送れば、

スマホ
タブレット
パソコン

からアクセスできるようになります。

公開前

自分のパソコン
 └ アプリ

公開後

Cloudflare Pages
 └ アプリ

 ↓

世界中からアクセス可能

Step1 GitHubへ保存する

まずはアプリをGitHubへ保存します。

git add .
git commit -m "公開準備"
git push

これは

「アプリをクラウドにバックアップする」

イメージです。

Step2 Cloudflareへログイン

Cloudflareへログインします。

https://dash.cloudflare.com

無料アカウントでも利用できます。

Step3 Pagesを作る

Cloudflare管理画面で

Workers & Pages
 ↓
Create
 ↓
Pages
 ↓
Connect to Git

を選択します。

Step4 GitHubと連携

GitHubのリポジトリを選択します。

例えば

restart-support-ai

などです。

Step5 Build設定

React + Viteの場合は通常、

Build command
npm run build

Output directory
dist

です。

保存して

Deploy

をクリックします。

Step6 URL完成

しばらく待つと、

https://xxxx.pages.dev

が発行されます。

これでアプリが公開されます。

Workers AIとは？

Workers AIは

CloudflareのAIサービス

です。

ChatGPTのような機能をアプリへ組み込めます。

例：

転職したい

↓

まず職務経歴書を整理してみましょう

というような回答が返せます。

AIを接続する

Cloudflare管理画面で

Settings
 ↓
Bindings
 ↓
Add Binding
 ↓
AI

を選択します。

Binding名は

AI

がおすすめです。

AIができること

例えば、

キャリア相談

転職したい

↓

AIがアドバイス

メンタルケア

少し落ち込んでいます

↓

AIが応援

学習支援

Power Automateを勉強したい

↓

AIが学習方法を提案

D1とは？

D1はCloudflareのデータベースです。

難しく聞こえますが、

私は

ノート

だと思っています。

D1がない場合

質問
 ↓
回答
 ↓
終了

ページを閉じると消えます。

D1がある場合

質問
 ↓
回答
 ↓
保存

できます。

保存できる内容

例えば、

日付	質問
8/1	転職したい
8/2	面接が不安
8/3	履歴書を見直したい

こんな履歴を保存できます。

D1を作る

ターミナルで

npx wrangler d1 create restart50-db

を実行します。

すると

database_id

が発行されます。

D1をアプリへ接続する

wrangler.toml

へ追加します。

[[d1_databases]]
binding = "DB"
database_name = "restart50-db"
database_id = "xxxxxxxx"

ReStart50を例にすると

私が作っているアプリの場合、

利用者
 ↓
キャリア相談
 ↓
Workers AI
 ↓
回答生成
 ↓
D1へ保存
 ↓
履歴表示

という流れになります。

最初に混乱したこと

私は最初、

Pages
Workers
Workers AI
D1

の違いが全然わかりませんでした。

でも今は、

Pages
＝画面

Workers AI
＝頭脳

D1
＝ノート

と理解しています。

まとめ

CloudflareでAIアプリを作る場合、

Pages
 ↓
Workers AI
 ↓
D1

が基本構成になります。

役割はシンプルです。

Pages
＝見せる

AI
＝考える

D1
＝覚える

まずはこの3つを理解すると、初心者でもAIチャットアプリや相談アプリを公開できるようになります。

もしこの記事が、これからCloudflareに挑戦する誰かの参考になれば嬉しいです。