【非エンジニア向け】作った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に挑戦する誰かの参考になれば嬉しいです。