🎉

【本番環境】RenderでAPIとUIをホスティング ～ChatGPT API 開発基礎 #7～

に公開
デプロイ
FastAPI
render
ChatGPT
api開発
tech

「ChatGPT API 開発基礎 ～ChatGPT APIをFastAPIとStreamlitで動かす～」の第7回。

今回は、ngrokによる一時的なトンネリングから脱却し、FastAPIをRenderで外部公開し、固定URLでStreamlitから接続できる構成を完成させます。

👤 1. 背景 – 安定公開に向けて

ローカル開発やngrokでは、URLが変動したりスリープがかかったりと、公開用途には課題が多かった。

そこで、無料で固定URLを提供してくれるRenderを採用し、
GitHub連携なしでもFastAPIをクラウド上にホスティングする構成に挑戦しました。

❓ 2. 今回の課題（Problem）

  • ngrokでは毎回URLが変わるためポートフォリオに不向き

  • FastAPIを安定して公開する方法が必要

  • requirements.txt や Start Command 設定が不明瞭

  • Codespacesとの連携時にpullが手動になるなど運用のクセあり

🔧 3. 解決アプローチ（Solution & Implementation）

✨ RenderでFastAPIを公開

  1. Renderに無料登録

  2. 「New Web Service」 → リポジトリを指定

  3. 設定ポイント

項目 設定値
Environment Python
Build Command pip install -r requirements.txt
Start Command uvicorn app:app --host 0.0.0.0 --port 10000

✍️ requirements.txt

fastapi
uvicorn
openai

🚀 URL取得 & Streamlit接続

Renderが発行するURL (例: https://xxx.onrender.com) を、
StreamlitのAPI URLとして設定。

url = "https://xxx.onrender.com/gpt"

push 後にStreamlit CloudでRerunすれば接続完了。

💡 4. 学び・気づき

  • requirements.txt の設定はデプロイの要

  • Streamlit CloudはGitHub mainを監視しており、pushで自動反映

  • CodespacesはGit同期が手動のため git pull 忘れに注意

  • RenderはGUI操作でFastAPIをさくっと公開できるので学習に最適

🔬 5. 設計意図

  • FastAPIをngrokで一時的にテストするだけではなく、Renderで本番発行することで、「定義のある公開」を実現

  • GitHubとの連携をオプションにすることで、初心者でも手動操作で作成可

🔮 6. 次の問い

  • Streamlit UIはどこまで整えればポートフォリオに耐えるか？

  • FastAPI + Streamlit構成の運用設計はどのような組み方が最適？

✨ 7. まとめ

Renderを用いてFastAPIを本番公開し、
何も説明せずともStreamlit Cloudから利用できる状態まで立ち上げました。

次回は、#8 仕上げと考察に進みます。

📚 ChatGPT API 開発基礎（全8回）

#1 構想と環境構築 ｜ #2 FastAPI導入 ｜ #3 OpenAI統合 ｜ #4 UI試作 ｜ #5 POST通信 ｜ #6 公開テスト ｜ #7 本番環境 ｜ #8 仕上げと考察

Discussion