[🧑‍💻] Secret Messenger 개발 일지 #2: Flutter Web + Django, Roadmap, English

✨ GPT의 요약 　

Flutter Web + Django 조합으로 기술 스택을 전환하고, 전체 개발 로드맵과 영어 기반 개발 환경을 정립한 하루.

🚀 Roadmap

Step-by-step To-Do List for Phase 1–4 — covering:

1. 🧠 Project planning, tech stack selection, and domain purchase
2. 🛠️ Flutter Web build + Django static integration (local dev)
3. 🔗 Basic trigger API implementation
4. 🌐 VPS deployment, Nginx setup, and secure domain serving

---

✅ PHASE 1 — Initial Planning & Strategic Decisions

• 🧠 Define project scope & security strategy
  • Target audience: undocumented North Korean defectors living in China
  • Objective: provide a secure, disguised, browser-based communication tool
  • UX strategy: mimic a calculator interface to conceal real functionality
• 🤖 Choose AI-assisted development approach
  • Use GPT-4o and o1 to assist with design and implementation
  • Apply a “Vibe Coding” workflow — using natural language and iterative prototyping with AI
• ⚙️ Choose tech stack
  • Frontend: Flutter Web (for a polished, app-like UI disguised as a calculator)
  • Backend: Django + Django REST Framework (for structured APIs, built-in admin, and security)
  • Deployment: Single VPS container serving both Flutter static files and Django API
• 🌐 Purchase disguise domain
  • Domain: ___.net
  • Purpose: plausible calculator utility appearance
  • Price: ₩18,000/year via Korean registrar

---

✅ PHASE 2 — Local Development: Flutter Web + Django Integration

🔧 1. Project Environment Setup

• 🧱 Create Django project
  • django-admin startproject stealthcore .
• ⚙️ Create Django app (for API)
  • python manage.py startapp api
• 🧩 Add 'api' and 'rest_framework' to INSTALLED_APPS
• 🐍 Create virtual environment and install dependencies
  • python -m venv venv && source venv/bin/activate
  • pip install django djangorestframework whitenoise

---

🛠️ 2. Flutter Web Build

• 💻 Initialize Flutter app
  • flutter create ____web
  • Replace default UI with a TextField and Send button
• 🧪 Send input via http.post() to /api/check-trigger/
• 🔨 Build Web output
  • flutter build web
• 📁 Move build files
  • Create frontend_static/ folder in Django root
  • cp -r build/web/* frontend_static/

---

⚙️ 3. Django Static File Serving

• 🧷 Update settings.py:

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

• (Optional) Enable WhiteNoise
  • Add 'whitenoise.middleware.WhiteNoiseMiddleware' to MIDDLEWARE
• 🎛️ Copy build/web/index.html to templates/index.html

• 🛠️ Fix asset paths in index.html:

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

---

🔗 4. Connect Flutter to Django

• 🧪 Create /api/check-trigger/ endpoint
  • Accepts POST { input: "..." }
  • Returns { status: "success" } if input is '1004'
• 🔐 Ensure no trigger strings exist in frontend source
• 🧪 Confirm frontend integration with http.post(...)

---

✅ PHASE 3 — VPS Deployment (Vultr)

🛒 1. Server Setup

• Create a Vultr instance (Ubuntu 22.04, 1GB RAM)
• 🔑 Set up SSH access (ssh root@<ip>)
• 📦 Install dependencies:
  • sudo apt update && sudo apt upgrade
  • sudo apt install python3 python3-pip nginx git
  • sudo apt install certbot python3-certbot-nginx

---

🚀 2. Deploy Django

• Upload your project (scp or git clone)
• Set up virtual environment
  • python3 -m venv venv && source venv/bin/activate
  • pip install -r requirements.txt
• 🔫 Install and test Gunicorn
  • pip install gunicorn
  • gunicorn stealthcore.wsgi:application

---

🌐 3. Serve with Nginx

• Create 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;
      }
  }
  

• 🔐 Enable HTTPS with Let’s Encrypt
  • sudo certbot --nginx -d ___.net
• 🔄 Restart Nginx:
  • sudo systemctl restart nginx

---

✅ PHASE 4 — Final Testing & Hardening

• 💻 Visit https://___.net
  • Confirm calculator UI loads successfully
• 🔍 Enter '1004' in Flutter input and send
  • Django should respond with { "status": "success" }
• 🧪 Test invalid input returns denial message

---

✅ Final Notes

• 🧼 Remove all sensitive logic from frontend
• 🔒 Protect future API endpoints with session token validation
• 🧊 Polish disguise: update app icon, page title, and add fake utility elements
• 🧠 Write internal docs (deploy.md) for repeatable deployments

---

💭 일기

다음과 같은 큰 변화가 있었다.

• 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
    

  • 평생 1인 개발자로 살 거 아니라면, 업계 표준을 따르는 습관을 미리 들여놓는 게 맞기 때문.
  • 나중에 Change log 관련 프로그램을 사용하게 되면 표준 포맷이어야 파싱이 될 것이기 때문.

일단 로드맵 자체만 보면 충분히 따라하기 좋을 만한 가이드라인이 뽑힌 것 같다.

내일 계속 GPT 피드백 받아서 다듬은 뒤에, 그대로 따라해봐야겠다.