GitHub App을 SaaS 서비스로 배포하기: 설치형 자동화 도구 만들기

GitHub App을 SaaS 서비스로 배포하기: 설치형 자동화 도구 만들기

이전 글에서는 GitHub App을 활용해 AI 기반 자동화와 멀티 리포지토리 협업 시스템을 구축하는 방법을 다뤘습니다.
이번 글에서는 이 GitHub App을 외부 사용자도 설치하고 사용할 수 있는 SaaS 서비스 형태로 배포하는 방법을 소개합니다.
목표는 "우리 팀만 사용하는 자동화 도구"에서 "다른 팀도 설치하고 사용하는 서비스형 GitHub App"으로 확장하는 것입니다.

---

1. SaaS형 GitHub App의 개념 이해

SaaS형 GitHub App이란,

• 여러 팀이 자신의 GitHub에 설치해서 사용할 수 있고,
• 설치 후 자동으로 Webhook 이벤트가 연결되고,
• 관리자 대시보드를 통해 상태 확인, 설정 관리가 가능한
  GitHub 기반 자동화 서비스입니다.

✅ 예시

• Mergify: PR 자동 머지, 리뷰 요청
• Sentry: 오류 추적 후 이슈 자동 생성
• Codecov: 커버리지 리포트 주입

---

2. GitHub App을 SaaS로 만들기 위한 준비 요소

반응형

요소 설명

GitHub App 등록	설치 가능한 App으로 GitHub Developer 설정
App 인증 로직	JWT → Installation Access Token 발급 로직 포함
설치 콜백 처리	POST /github/callback 또는 OAuth Flow 필요
다중 유저 관리	설치 정보 저장 (DB), 사용자별 설정 관리
Frontend 관리 UI	설치/설정 페이지, 리포지토리 연결 상태 확인
배포 서버	HTTPS 지원, GitHub와 실시간 통신 가능해야 함

---

3. GitHub App 설치 플로우 구조

사용자 → 설치 버튼 클릭 → GitHub App 설치 페이지 이동
        ↓
설치 완료 → GitHub이 서버로 Installation 정보 전달 (Webhook)
        ↓
서버는 Installation ID 및 Repo 정보 저장
        ↓
Webhook 기반 이벤트 처리 시작 (PR, Issue 등)

---

4. GitHub App 설치형 서비스 구성 예시

📁 프로젝트 구조 예시

📦 github-app-saas
├── backend (NestJS)
│   ├── auth/github-app.auth.ts
│   ├── webhook/github-app.controller.ts
│   └── services/github.service.ts
├── frontend (Next.js)
│   ├── pages/install.tsx
│   ├── pages/dashboard.tsx
│   └── components/AppStatus.tsx
├── prisma/schema.prisma
└── docker-compose.yml

---

5. 설치 콜백 처리: App 설치 후 사용자 식별하기

🔹 Webhook 이벤트: installation.created

📌 예시 Payload

{
  "action": "created",
  "installation": {
    "id": 123456,
    "account": { "login": "team-name" },
    "repositories": [...]
  }
}

🔹 NestJS 처리 예시

@Post('webhook')
async handleInstallation(@Body() payload: any) {
  if (payload.action === 'created' && payload.installation) {
    const { id, account, repositories } = payload.installation;
    await this.appService.registerInstallation({
      installationId: id,
      owner: account.login,
      repositories,
    });
    console.log(`✅ GitHub App installed by ${account.login}`);
  }
}

이 정보를 DB에 저장하여 설치한 사용자와 리포지토리 정보를 추적합니다.

---

6. 사용자 설정 페이지 (프론트엔드)

🔹 /dashboard 페이지 기능

• 설치된 리포지토리 목록 확인
• 자동화 기능 On/Off 스위치
• Slack Webhook URL 등록
• AI 응답 템플릿 설정

📌 Next.js + Chakra UI 예시

export default function DashboardPage() {
  const [repos, setRepos] = useState([]);
  useEffect(() => {
    fetch('/api/github/repos').then(res => res.json()).then(setRepos);
  }, []);

  return (
    <Box>
      <Heading>📊 설치된 리포지토리</Heading>
      {repos.map((r) => (
        <Flex key={r.name} justify="space-between">
          <Text>{r.name}</Text>
          <Switch defaultChecked={r.autoLabeling} />
        </Flex>
      ))}
    </Box>
  );
}

---

7. GitHub App 링크 버튼 생성

사용자에게 App 설치를 유도하려면 아래와 같은 버튼을 웹사이트에 포함해야 합니다.

  🔧 GitHub App 설치하기

설치 후 GitHub이 Webhook으로 설치 정보를 자동 전송합니다.

---

8. 배포 전략 및 보안 고려사항

항목 내용

HTTPS 필수	Webhook URL 및 설치 페이지 모두 SSL 필요
JWT 관리	Private Key는 서버 환경변수로 관리
다중 설치 지원	Installation ID 기반으로 사용자 구분
토큰 캐싱	Installation Access Token은 Redis 등으로 캐싱
인증 로깅	모든 요청 로깅 및 알림 설정

---

9. 향후 확장 아이디어

기능 설명

팀별 요금제	리포지토리 수 or 기능 단위로 과금
Slack 인증 연동	Slack OAuth로 사용자별 통합
OpenAI 연동	PR 자동 설명, 이슈 라벨링 서비스 제공
GitHub Marketplace 등록	외부 사용자 유입 확대 가능

---

10. 마무리 및 다음 글 예고

이번 글에서는 GitHub App을 SaaS 형태로 서비스화하는 방법과
설치 후 Webhook 처리, 사용자 설정 대시보드, App 배포 전략까지 소개했습니다.

다음 글에서는
👉 "GitHub Marketplace에 GitHub App 등록하기 – 심사 통과를 위한 체크리스트"
를 다룰 예정입니다. 🧾

---