Autowini 프론트엔드 분리 프로젝트 CI/CD 파이프라인 구축 (Bitbucket 기반) 2

현재 오토위니에서는 React 기반으로 대부분의 프론트엔드 프로젝트를 분리하여 운영하고 있습니다.

 

web-www-front, web-mobile-front, web-mobile-search, web-admin-front 등 다양한 프로젝트가 Bitbucket Pipelines를 통해 자동 빌드 및 배포되고 있습니다.

 

지난 1편에서는 파이프라인 구축 과정을 다루었다면, 이번 2편에서는 배포 성공·실패 결과를 팀원들에게 실시간으로 공유하여 운영 효율을 높인 '알림 자동화' 과정을 공유합니다.

---

왜 배포 알림이 필요했는가?

기존 파이프라인은 자동화되어 있었지만, 결과 확인 방식에는 한계가 있었습니다.

• 정보의 파편화: 배포 결과를 확인하려면 매번 Bitbucket Pipeline 페이지에 직접 접속해야 했습니다.
• 공유의 지연: 여러 프로젝트가 병렬로 운영되는 환경에서 "누가, 무엇을, 성공적으로 배포했는지" 팀원들이 즉시 알기 어려웠습니다.
• 대응 속도: 배포 실패 시 감지가 늦어질수록 서비스 장애 대응 시간도 함께 길어지는 구조였습니다.

이를 해결하기 위해, 별도의 시스템 구축 없이 기존 Pipeline의 after-script 단계를 확장하여 사내 협업 도구인 네이버웍스(Naver Works)로 알림을 보내기로 했습니다.

---

Naver Works Bot 기반 알림 시스템 구현

1. Naver Works Bot 생성 및 활성화

가장 먼저 네이버웍스 개발자 콘솔에서 알림을 전송할 봇을 생성했습니다.

• Bot 생성: Frontend 전용 봇을 생성하여 역할 명확화
• 권한 설정: 관리자 메뉴를 통해 봇을 활성화하고 메시지 전송 권한 부여
• 채널 확보: 알림을 받을 전용 채팅방의 Channel ID 확인

2. 인증 및 메시지 전송 로직 (Python)

Bitbucket Pipeline의 after-script는 파이프라인의 성공/실패 여부와 관계없이 실행됩니다. 이 시점에 $BITBUCKET_EXIT_CODE를 체크하여 상태별 메시지를 전송하도록 구성했습니다.

 

핵심 로직 흐름:

1. JWT 생성: Service Account 정보를 기반으로 JWT 인증 토큰 생성
2. Access Token 발급: 발급받은 JWT로 네이버웍스 API 접근 권한 획득
3. 메시지 전송: 캐러셀(Carousel) 형태의 메시지로 가독성 높은 알림 전송

# 메시지 데이터 구성 예시
message_data = {
    "content": {
        "type": "carousel",
        "columns": [{
            "originalContentUrl": img_url, # 성공/실패 이미지
            "title": f"{status} {repo_name} - {branch_name}",
            "text": commit_title[:60],
            "actions": [
                { "type": "uri", "label": "💬 Commit", "uri": commit_url },
                { "type": "uri", "label": "🚀 Pipeline", "uri": pipeline_url }
            ]
        }]
    }
}

 

3. Repository Variables 관리

보안이 중요한 정보(API Key, Private Key 등)는 Bitbucket의 Repository Variables에 등록하여 소스 코드에 노출되지 않도록 관리했습니다.

변수명	비고(임의 값)
NAVER_WORKS_BOT_ID	11269493
NAVER_WORKS_CLIENT_ID	_2KI3YplLVLGu2TR2c_
NAVER_WORKS_CLIENT_SECRET	iyEIT22mWL
NAVER_WORKS_SERVICE_ACCOUNT	5123ae5h.serviceaccount@naver.com
NAVER_WORKS_PRIVATE_KEY	-----BEGIN PRIVATE KEY----- MIIEvQIBADANBgkEqhkiG9w0BAQEFAASCBKcwggSjAgEAAoI h6ezTPQQnjKYOCicpfcLYbA9c= -----END PRIVATE KEY-----
NAVER_WORKS_CHANNEL_ID	a5a1c945-607b-9446-1bed-fd3df9b14fc5

---

3. 구현 중 마주친 이슈

⚠️ Naver Works Console 복사 버튼 오류

연동 과정 중 401 Unauthorized 에러가 지속적으로 발생했습니다. 원인은 예상치 못한 곳에 있었습니다.

• 문제: 네이버웍스 콘솔에서 제공하는 '복사 버튼'을 사용하여 Client ID를 복사할 경우, 문자열 일부가 누락되는 현상이 발생했습니다.
• 해결: 버튼을 사용하지 않고 마우스로 직접 드래그하여 전체 문자열을 선택한 뒤 복사하여 등록하니 정상적으로 동작했습니다.

---

4. 도입 결과 및 기대 효과

이번 실시간 배포 알림 도입으로 모든 프론트엔드 프로젝트의 배포 상태를 실시간으로 공유할 수 있게 되었습니다. 매번 파이프라인 페이지를 일일이 확인하던 번거로움을 덜어낸 것은 물론, 배포 실패 시에도 즉각적인 대응이 가능한 구조를 갖추게 되었습니다. 무엇보다 앞으로 새로 합류하실 개발자분들도 배포 현황을 한눈에 파악하며 훨씬 편하게 작업하실 수 있을 것 같아 뿌듯합니다.

Frontend CI/CD 알림 방