유쾌한 GitHub 이슈 만들기: 자체 GIF 봇 구축 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

앱 개발

대상자

• 대상: GitHub API 및 Node.js 기초를 가진 개발자
• 난이도: 중급 (GitHub 앱 설정, 웹훅 처리, 외부 API 연동 경험 필요)

핵심 요약

• GitHub 앱 생성: GitHub Apps에서 앱 생성 후 Webhook URL 설정 (Smee.io 사용)
• 보안 관리: .pem 파일과 WEBHOOK_SECRET은 절대 코드에 포함하지 않음
• 핵심 라이브러리: octokit, express, axios 사용 (Giphy API 연동)
• 봇 동작: /gif 명령어로 이슈에 GIF 삽입 (Giphy API에서 랜덤 GIF 검색)

섹션별 세부 요약

1. GitHub 앱 생성 및 설정

• 앱 생성: Settings > Developer settings > GitHub Apps에서 앱 생성
• Webhook URL: Smee.io를 통해 로컬 개발 서버에 접근 가능한 공개 URL 생성
• 권한 설정: Issues 및 Pull requests에 Read & write 권한 부여
• 이벤트 구독: Issue comment 이벤트만 구독 (봇 기능 제한)

2. 개발 환경 설정

• 프로젝트 생성: npm init -y로 프로젝트 초기화, express, octokit, axios 설치
• 환경 변수 관리: .env 파일에 APP_ID, WEBHOOK_SECRET, GIPHY_API_KEY 저장
• 보안 주의사항: .gitignore에 .env 및 node_modules/ 추가

3. 봇 로직 구현

• 웹훅 처리: @octokit/webhooks로 issue_comment.created 이벤트 리스닝
• Giphy API 연동: axios로 /search/gifs 엔드포인트 호출 (랜덤 GIF 검색)
• 봇 식별: octokit.rest.apps.getAuthenticated()로 봇의 사용자 이름 추출 (예: app-name[bot])

결론

• 핵심 팁: .pem 파일은 절대 저장소에 올리지 않도록 주의하고, dotenv로 환경 변수 관리
• 구현 예시: /gif 명령어 입력 시, https://api.giphy.com/v1/gifs/search에서 랜덤 GIF 검색 후 이슈에 삽입
• 추가 권장사항: 테스트 환경에서는 localhost 대신 Smee.io의 공개 URL 사용, 보안 키는 암호 관리자에 저장