🚀

【公開テスト】ngrokでAPIを外部公開する ～ChatGPT API 開発基礎 #6～

に公開
FastAPI
ngrok
ChatGPT
api開発
公開テスト
tech

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

今回は、ngrokを使ってローカルFastAPIサーバーを外部公開し、Streamlit CloudからAPI接続できるようにするまでをまとめます。

👤 1. 背景 – ここまでの流れ

Streamlit CloudからAPIを呼び出そうとしたら、当然だけど動かない。

「まあ、動かないよね…。どうすんのかしらん。。聞いていないぞ。。。」

とりあえずChatGPTに相談したら、ngrokでトンネリング公開する方法を提案されました。

❓ 2. 今回の課題（Problem）

ローカル開発環境 (localhost:8000) はインターネットから直接アクセスできないため、
Streamlit CloudからFastAPIエンドポイントに接続できなかった。

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

🚀 ステップ1. ngrokインストールとセットアップ

  1. ngrok公式に登録して認証トークン取得

  2. インストール

pip install ngrok
  1. 認証トークン設定
ngrok config add-authtoken <your_token>

⚙️ ステップ2. FastAPIサーバーをトンネリング公開

ngrok http 8000

➡ 実行すると https://xxxx.ngrok.io のようなURLが発行される。

📝 ステップ3. Streamlitコードの接続先URLを修正

Streamlitコード内で

url = "https://xxxx.ngrok.io/gpt"

に変更することで、Streamlit Cloud上からFastAPIエンドポイントへ接続可能になる。

💡 4. 学び・気づき（Learning & Insights）

ngrok、便利は便利だけど、
毎回URL変わるとか、これ運用でコケるやつじゃん…。いやあん。

他のGPTに「これ以外に方法ない？」って聞きまくったけど、
Renderを提案されて、

「ただしpushしてから反映に少し時間かかります」

とか言われて、それは、開発にストレスかかりそう。。と、
まずは、おすすめのngrokにトライしました。

GitHub ActionsでCI/CD構築して自動更新する方法も提案されたけど、
今回は最短最速リリースが目的だったので、
「そんなの後回しだ！」って思って、ぶっ飛ばしました。
※そして、たぶんやらない。。

📝 5. 設計意図（Design Intention）

今回はとりあえず動かすフェーズなので、
ngrokで外部公開して接続検証できれば十分。

恒久運用には向かないけど、実装検証スピードは圧倒的でした。

🔭 6. 次への問い（Next Questions）

  • ngrok代替として恒久公開するには、どのホスティングサービスが最適か？

  • GitHub ActionsなどCI/CD導入でAPI更新を自動反映するにはどうする？

✨ 7. まとめ

今回は、ngrokを使ってローカルFastAPIサーバーを外部公開し、Streamlit Cloudから接続できるようにしました。

次回は、#7 本番環境へ進みます。

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

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

Discussion