[🛠] Secret Messenger開発日誌 #2: Flutter Web + Django, Roadmap, English

✨ GPTの要約 　

Flutter Web + Djangoの組み合わせへ技術スタックを切り替え、全体の開発ロードマップと英語ベースの開発環境を整えた一日。

🚀 Roadmap

Phase 1–4を対象にした、段階別のTo-Do Listです。

1. 🧠 プロジェクト計画、技術スタック選定、ドメイン購入
2. 🛠️ Flutter Web build + Django static integration (local dev)
3. 🔗 基本trigger API実装
4. 🌐 VPSデプロイ、Nginx設定、安全なドメイン配信

---

✅ PHASE 1 — 初期計画と戦略的判断

• 🧠 プロジェクト範囲とセキュリティ戦略を定義
  • 対象ユーザー: 中国で暮らす未登録の北朝鮮脱出者
  • 目標: 安全で、偽装された、ブラウザベースのコミュニケーションツールを提供する
  • UX戦略: 本来の機能を隠すため、電卓インターフェースを模倣する
• 🤖 AI支援開発アプローチを選択
  • GPT-4oとo1を設計と実装の補助に使う
  • AIとの自然言語・反復プロトタイピングによる“Vibe Coding”ワークフローを適用
• ⚙️ 技術スタックを選択
  • フロントエンド: Flutter Web (電卓に偽装した、洗練されたアプリ風UIのため)
  • バックエンド: Django + Django REST Framework (構造化API、組み込みadmin、セキュリティのため)
  • デプロイ: Flutter静的ファイルとDjango APIを同じVPSコンテナで配信
• 🌐 偽装用ドメインを購入
  • ドメイン: ___.net
  • 目的: もっともらしい電卓ユーティリティの外観
  • 価格: 韓国レジストラ経由で₩18,000/year

---

✅ PHASE 2 — ローカル開発: Flutter Web + Django統合

🔧 1. プロジェクト環境セットアップ

• 🧱 Djangoプロジェクトを作成
  • django-admin startproject stealthcore .
• ⚙️ Djangoアプリを作成 (API用)
  • python manage.py startapp api
• 🧩 INSTALLED_APPSに'api'と'rest_framework'を追加
• 🐍 仮想環境を作成し、依存関係をインストール
  • python -m venv venv && source venv/bin/activate
  • pip install django djangorestframework whitenoise

---

🛠️ 2. Flutter Web Build

• 💻 Flutterアプリを初期化
  • flutter create ____web
  • デフォルトUIをTextFieldとSendボタンに置き換える
• 🧪 http.post()で/api/check-trigger/へ入力を送信
• 🔨 Web出力をbuild
  • flutter build web
• 📁 buildファイルを移動
  • Django rootにfrontend_static/フォルダを作成
  • cp -r build/web/* frontend_static/

---

⚙️ 3. Django静的ファイル配信

• 🧷 settings.pyを更新:

  STATIC_URL = '/static/'
  STATICFILES_DIRS = [ BASE_DIR / 'frontend_static' ]
  

• (任意) WhiteNoiseを有効化
  • MIDDLEWAREに'whitenoise.middleware.WhiteNoiseMiddleware'を追加
• 🎛️ build/web/index.htmlをtemplates/index.htmlへコピー

• 🛠️ index.html内のasset pathを修正:

  <script src="/static/main.dart.js"></script>
  

---

🔗 4. FlutterとDjangoを接続

• 🧪 /api/check-trigger/エンドポイントを作成
  • POST { input: "..." }を受け取る
  • 入力が'1004'なら{ status: "success" }を返す
• 🔐 フロントエンドソースにtrigger文字列が存在しないことを確認
• 🧪 http.post(...)でフロントエンド統合を確認

---

✅ PHASE 3 — VPSデプロイ (Vultr)

🛒 1. サーバーセットアップ

• Vultr instanceを作成 (Ubuntu 22.04, 1GB RAM)
• 🔑 SSHアクセスを設定 (ssh root@<ip>)
• 📦 依存関係をインストール:
  • sudo apt update && sudo apt upgrade
  • sudo apt install python3 python3-pip nginx git
  • sudo apt install certbot python3-certbot-nginx

---

🚀 2. Djangoをデプロイ

• プロジェクトをアップロード (scpまたはgit clone)
• 仮想環境をセットアップ
  • python3 -m venv venv && source venv/bin/activate
  • pip install -r requirements.txt
• 🔫 Gunicornをインストールしてテスト
  • pip install gunicorn
  • gunicorn stealthcore.wsgi:application

---

🌐 3. Nginxで配信

• Nginx configを作成:

  server {
      listen 80;
      server_name ___.net;
  
      location /static/ {
          alias /home/youruser/project/frontend_static/;
      }
  
      location / {
          proxy_pass http://127.0.0.1:8000;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

• 🔐 Let’s EncryptでHTTPSを有効化
  • sudo certbot --nginx -d ___.net
• 🔄 Nginxを再起動:
  • sudo systemctl restart nginx

---

✅ PHASE 4 — 最終テストと堅牢化

• 💻 https://___.netへアクセス
  • 電卓UIが正常に読み込まれることを確認
• 🔍 Flutter入力欄に'1004'を入力して送信
  • Djangoが{ "status": "success" }で応答するべき
• 🧪 無効な入力で拒否メッセージが返ることをテスト

---

✅ Final Notes

• 🧼 フロントエンドからすべての機密ロジックを削除
• 🔒 今後のAPIエンドポイントをセッショントークン検証で保護
• 🧊 偽装を磨く: アプリアイコン、ページタイトル、偽のユーティリティ要素を更新
• 🧠 再現可能なデプロイのために内部ドキュメント(deploy.md)を書く

---

💭 日記

次のような大きな変化があった。

• Flutter Web(Frontend) + Django(Backend)へ路線を変更した。
  • これからもアプリを開発するときは、上のような組み合わせでずっと押していくつもりだから。
  • そして、どちらも使った経験のあるフレームワークなので、ずっと速い生産性を期待できるから。
• すべてのDocumentation、Comment、Commit Messageは英語で書くことに決めた。
  • プロンプトを英語で書けば、少しでも性能改善を期待できるから。
  • 世界中の最新知識のほとんどは英語で扱われているから。
  • 英語を何度も使う癖をつけておかないと、英語がもっと自然にならないから。
• Git Commit Message Conventionは必ず開発業界の標準フォーマットに従うことにした。

  • from

    * 21adba0 25.04.03 Thu <Hyuk Min> Chore | README.md: Add more details to roadmap
    

  • to

    * 21adba0 25.04.03 Thu <Hyuk Min> docs(README): add more details to roadmap
    

  • 一生一人開発者として生きるつもりでないなら、業界標準に従う習慣を先につけておくのが正しいから。
  • 後でChange log関連プログラムを使うことになれば、標準フォーマットでなければparseできないはずだから。

ひとまずロードマップ自体だけを見ると、十分についていきやすいガイドラインが出てきた気がする。

明日もGPTからフィードバックを受けて整えたあと、そのまま追ってみよう。