Flutter Web GitHub Pages 배포

오늘은 Flutter Web 기반 Todo App 프로젝트를 설계하고,
Agent CLI 도구, 클린 아키텍처, GitHub Pages 배포, CI/CD 설정까지 전반적인 흐름을 학습

1️⃣ Agent CLI 개념

📌 Agent CLI란?

터미널 환경에서 자연어나 명령어를 통해
코드 작성, 디버깅, 문서화 등을 자동화하는 개발 도구

📌 대표적인 Agent CLI

• Claude
• Gemini
• Cursor
• Codex
• OpenCode

📌 OpenCode 기본 사용법

sudo opencode

/      # 명령어 목록 확인
/init  # AGENT.md 생성

2️⃣ Web 배포 방식

✅ GitHub Pages

• GitHub Actions 기반 자동 배포
• main 브랜치 → build → gh-pages 브랜치 배포

✅ Cloudflare Pages

• GitHub Repository 연동
• 별도 CI/CD 설정 불필요
• Cloudflare Pages → Settings → Build Configuration 설정

3️⃣ Flutter Web 배포 시 주의사항

📌 Hash URL Strategy

Flutter Web은 GitHub Pages 환경에서
라우팅 오류 방지를 위해 # 기반 URL 사용 권장

setUrlStrategy(const HashUrlStrategy());

---

4️⃣ GitHub Pages 배포 Workflow

📌 위치

.github/workflows/deploy.yml

📌 Workflow 예시

name: Flutter Web Deploy

on:
  push:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v3

      - uses: subosito/flutter-action@v2
        with:
          flutter-version: 'stable'

      - run: flutter pub get

      - run: flutter build web --release --base-href /flutter_web2/

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: build/web

---

5️⃣ GitHub에서 해야 할 설정

1️⃣ Repository → Settings → Pages

• Source: gh-pages
• Branch: gh-pages / root

2️⃣ main 브랜치에 push

git add .
git commit -m "deploy flutter web"
git push origin main

3️⃣ 자동 배포 확인

• Actions 탭에서 성공 여부 확인
• 배포 URL 접속

https://kimhyunseo.github.io/flutter_web2/

---