🚀
Codex CLI：30分クッキング-AIチャットポッドDEMO-2
💡 Codex CLI でAIチャットポッドのDEMOを３０分で実装-2
Codex CLI を使って構築したAIチャットボットデモサイトの続編です。
前回の記事
前回実装した結果をNetlifyでデプロイして公開する
Netlifyとは
Netlifyとは、静的サイトのホスティング、デプロイ、ビルドを自動化するウェブ開発プラットフォームです。(静的と言いつつAIモデル通信などは行えます。AWSでEC2立てるよりは敷居が低い感じ。)
- GitHubなどのコードリポジトリと連携し、コードをプッシュするだけでサイトの公開が自動で行われるため、ウェブ開発とデプロイのプロセスを簡素化し、開発者がインフラを気にせずアプリケーション開発に集中できるようになります。
- 個人利用などでは無料で利用できるプランが用意されています。
⚙️ 環境変数の設定
Google Gemini のAPIキーを記載したenvファイルはGitにはコミットせず、Netlifyの環境変数に設定します。
- Netlify ダッシュボードにログイン
- 対象サイトをクリック
- 左メニューから
「Project configuration」 → 「Environment variables」 -
Add a variable（変数を追加） をクリック
- 「Save」をクリックして保存
APIキーはSecret(シークレット変数)で追加します
Secret(シークレット変数)は、値がUIでは非表示(マスク)になり、追加後は再度表示できません
つまり「Secret」を選ぶと、値を設定した後、他のメンバーや後から見る人が内容を確認・コピーできなくなります。
🤖 gitにpush
git add -A
git commit -m "ai-chat-poc-demo-2"
git push origin main
⚙️ Netlifyで自動デプロイ
GitHubのリポジトリとNetlifyのプロジェクトが連携済(前回参照)の為、Gitにpushすると自動的にデプロイが行われます。
💬 チャット画面
これで作成したサイトが全世界に（笑）公開されます
質問すると、ちゃんと返ってくる
いやー、便利な時代になりましたね。
今回の技術スタックは以下です
Discussion