🌐 ngrok URL 共有システム

友人とアプリのURLを簡単に共有できるシステムです。ngrokで公開しているアプリのURLを、Googleログインで認証された友人だけに自動で共有できます。

---

📖 このシステムでできること

🎯 主な機能

• ngrok URLの自動取得: ngrokで生成されたURLを自動で取得
• リアルタイム更新: URL変更時も自動で反映（10秒ごと）
• 認証機能: 許可された友人だけがアクセス可能
• ステータス表示: アプリの稼働状況を自動判定

👥 誰が使うの？

• あなた（管理者）: localhost:8000でアプリを開発・テスト
• 友人: Webページからngrok URLにアクセスしてアプリをテスト

---

🚀 使い方（3ステップ）

ステップ1: アプリを起動

まず、いつも通りlocalhost:8000でアプリを起動してください。

# 例: あなたのアプリの起動コマンド
python app.py
# または
npm start

ステップ2: システムを起動

start.command ファイルをダブルクリックするだけ！

📁 ngrok管理web/
  └─ start.command  👈 これをダブルクリック

または、ターミナルから：

cd "/Users/tsujisouhei/Desktop/ngrok管理web"
./start.command

ステップ3: URLを友人に共有

以下のURLを友人に送ってください：

http://localhost:8080

※注意: 現在はローカル環境のみ。Renderにデプロイすると、どこからでもアクセス可能になります。

---

📱 友人の使い方

1. あなたから送られたURLにアクセス
2. 「Googleでログイン」 をクリック
3. ngrok URLが自動表示される
4. 「アプリを開く」 ボタンをクリック
5. あなたのアプリにアクセス完了！

---

🛑 停止方法

ターミナルで Ctrl+C を押すだけ。

全てのプロセス（ngrok、監視スクリプト、Web UI）が自動で停止します。

---

⚙️ 設定

許可するメールアドレスの追加

.env ファイルを編集してください：

# .env ファイル
ALLOWED_EMAILS=pontaro.no1@gmail.com,friend1@gmail.com,friend2@gmail.com

カンマ区切りで複数追加できます。

---

🔧 トラブルシューティング

「このサイトにアクセスできません」と表示される

原因: Web UIが起動していない

解決方法:

1. start.commandを再度実行
2. ターミナルに「Web UI起動」と表示されるか確認
3. http://localhost:8080 を再読み込み

---

「アクセスが許可されていません」と表示される

原因: メールアドレスがホワイトリストに登録されていない

解決方法:

1. .env ファイルを開く
2. ALLOWED_EMAILS に友人のメールアドレスを追加
3. Web UIを再起動（start.commandを停止して再実行）

---

「メンテナンス中」と表示される

原因: localhost:8000のアプリが起動していない

解決方法:

1. localhost:8000のアプリを起動
2. 10秒待つ（自動で「オンライン」に変わります）

---

📂 ファイル構成

ngrok管理web/
├── start.command          # 👈 これをダブルクリックで起動
├── .env                   # 設定ファイル（メールアドレス等）
├── README.md             # このファイル
├── SETUP.md              # 初期セットアップガイド（完了済み）
│
├── local/                # ローカル監視スクリプト
│   ├── monitor.py        # ngrok URL取得・Firestore保存
│   └── config.py
│
├── web/                  # Web UI（友人向けページ）
│   ├── main.py           # FastAPIアプリ
│   ├── templates/
│   └── static/
│
└── firebase/
    └── serviceAccountKey.json  # Firebase認証情報

---

🌍 Renderへのデプロイ（オプション）

現在はlocalhost:8080でしかアクセスできませんが、Renderにデプロイすると世界中どこからでもアクセス可能になります。

メリット

• ✅ あなたのPCを起動しなくても友人がアクセス可能
• ✅ 外部からアクセス可能なURL（例: https://your-app.onrender.com）

デプロイ方法は SETUP.md を参照してください。

---

💡 よくある質問

Q: 友人は何人まで追加できる？

A: 制限なし。.envのALLOWED_EMAILSにカンマ区切りで追加してください。

Q: ngrok URLが変わったら友人に再度通知が必要？

A: 不要です。システムが自動で最新URLを取得・表示します。

Q: Firebaseの料金はかかる？

A: 完全無料です。無料枠（Sparkプラン）で十分運用できます。

Q: localhost:8000以外のポートを使いたい

A: .envのTARGET_PORTを変更してください。

# .env
TARGET_PORT=3000  # 例: ポート3000に変更

---

📞 サポート

問題が解決しない場合は、以下を確認してください：

1. ログファイル

   • /tmp/ngrok-monitor.log - 監視スクリプトのログ
   • /tmp/ngrok-web.log - Web UIのログ

2. ngrok管理画面

   • http://localhost:4040

---

🎉 完成！

以上です。何か問題があれば、ログファイルを確認してください。

楽しいアプリ開発を！🚀