Replit Agentで作成したStreamlitアプリをStreamlit Community Cloudにデプロイする

はじめに

AIコーディングエージェントのおかげで、私たちは従来では考えられないほどに簡単・高速にアプリを作成することができるようになりました。コーディングツールも様々なものが登場し、アプリの特徴や自分のスキルに合わせて使い分けることが可能です。この記事では、元々tkinterで作成されたスタンドアロンアプリケーションをWebアプリに移植することを目的に、Replit Agentでアプリを作成し、Streamlit Community Cloudにデプロイする手順を記録します。

Replit Agentとは

Replit AgentはReplitというオンライン開発プラットフォームに搭載されたAIコーディング支援機能です。自然言語でアプリを記述することでAIがコーディングし、ブラウザ上でプレビューができます。

Replit – Build apps and sites with AI

記事執筆時点ではアプリのタイプとして以下の5種類を選択できます。今回はStreamlitで作成するため「Interactive data app」を選択します。

Streamlitとは

StreamlitはPythonのライブラリで、フロントエンドも含めてPythonのみでWebアプリを作成できます。pandasやmatplotlibなどデータ処理・分析に役立つライブラリとフロントエンドを直接統合できるのが強みです。Streamlit Community Cloudというプラットフォーム上にアプリをデプロイできます。

Streamlit • A faster way to build and share data apps

アプリの作成

Replit Agentを使用してアプリを作成します。他の多くのAIコーディング支援ツールと同様に、自然言語でアプリの説明を入力します。「App type」を「Interactive data app」に設定します。今回はtkinterで作成された既存のコードがあるので、参考コードとして提示します。

AIがプランを立て、実装を進めていきます。

画面右側にプレビューが表示されます。ここでバグや気になる点がある場合、チャットで修正を依頼できます。

GitHubへのプッシュ

左サイドバーのアイコンから「All tools」⇒「Git」を選択します。

画面右側にGitタブが現れます。歯車のアイコンをクリックして設定に進みます。

GitHubのリポジトリを入力します。リポジトリを用意していない場合、ここで作成もできます。

「Sync with Remote」でプッシュします。

ポート番号の変更

Replit AgentでStreamlitアプリを作成すると、.streamlit/config.tomlファイルが以下の内容で作成されます。

[server]
headless = true
address = "0.0.0.0"
port = 5000

この状態のままStreamlit Community Cloudでデプロイすると、設定ファイルのポート番号とStreamlit Community Cloudのデフォルトポート番号が異なることにより以下のエラーが表示されます。

❗️ The service has encountered an error while checking the health of the Streamlit app: Get "http://localhost:8501/healthz": dial tcp 127.0.0.1:8501: connect: connection refused

.streamlit/config.tomlファイルを以下のように書き換えます。GitHub上で直接書き換えることができます。Replit上で書き換えた場合はGitHubにプッシュします。

[server]
headless = true
address = "0.0.0.0"
port = 8501

config.toml - Streamlit Docs

Streamlit Community Cloudでデプロイ

公式サイトにアクセスし、右上の「Deploying? Try」から「Free」または「Pro」のいずれかをクリックします。この記事では「Free」を使っています。ユーザ登録やログインが必要な場合は実施します。

「Create app」をクリックします

GitHubリポジトリからデプロイするオプションを選択します。

必要な情報を入力し「Deploy」をクリックします。

デプロイ中は、ローディング画面として様々な食べ物の画像が次々と表示されます。

正常にデプロイされると、アプリが表示されます。

補足

この記事ではStreamlit Community Cloudにデプロイしましたが、Replit Agentにも有料のデプロイオプションがあります。こちらを活用することでより作業フローを効率化できます。

おわりに

既存アプリの移植とはいえ、Streamlit特有の記法を学習したり、バグを特定して修正したりしながらアプリを作成することは集中力を要する作業です。自然言語と既存のコードを提供するだけでアプリが完成し、今まで後回しにしていたプロジェクトを簡単に完了できたのは非常に助かりました。

この記事がどなたかの参考になれば幸いです。