SlackAPI를 활용한 사내 서비스 개발기 (feat. AWS Serverless 구축)

신혜린·2024년 11월 1일

slack API 활용 프로젝트

목록 보기

2/3

Slack API를 활용한 사내 서비스

그동안 Slack을 사용하면서 겪었던 불편함을 해소하기 위해 Slack API를 활용한 간단한 사내 도구를 만들어보기로 했다. 이 도구는 주로 ‘검색’과 ‘조회’ 기능을 제공하는데, 그 중에서도 그룹 멘션 및 채널에 대한 정보가 핵심이었다.

• @그룹멘션

비즈니스 계정을 사용해본 사람이라면 알겠지만, Slack에서는 개별 멘션을 통해 각 개인에게 알림을 보낼 수 있다. 그러나 하나의 팀을 그룹으로 묶어 그룹 멘션을 생성하면, 그 그룹에 속한 모든 사람에게 한 번에 알림을 보낼 수 있어 효율적이다.

하지만 관리자 권한이 있는 멤버가 아니면 그룹멘션의 종류 확인 및 생성이 불가하다.

서비스 개발의 필요성은 여기서 비롯되었다.
최소한 그룹 멘션이 무엇이 있는지라도 확인할 수 있다면, 적시에 필요한 멘션을 할 수 있을 것이라는 기대가 있었다.

실제로 특정 부서의 사람들에게 문의해야 할 때, 정확히 누가 담당자인지 모르는 경우가 많았다. 이럴 때 특정 인물만 멘션하는 것은 부담스러워, 팀 전체를 멘션하여 질의하고 싶은 경우가 있었다. 하지만 그룹 멘션이 존재하는지, 있다면 무엇인지 몰라 불편했던 경험들이 자주 공유되었다.

• #채널

채널의 경우, 사실 Slack 내에서 이미 채널 종류를 검색할 수 있는 기능이 존재한다.
하지만 개인적으로 직접 사용해본 경험으로는 ‘채널 종류를 어디서 찾아봐야 하지?’ 하고 혼란스러워지기 쉽다.
항상 상단의 검색 기능을 통해 채널을 검색하려고 하는데, 그렇게 하는 것이 아니라 ‘더보기 > 채널’로 이동하여 별도의 메뉴에서 검색해야 하는 거였다.

혹시 비슷하게 혼란을 겪는 사람들이 있지 않을까 싶어, 그룹멘션 검색 기능을 만들면서 동시에 채널도 함께 볼 수 있도록 채널 조회 기능까지 추가하기로 했다.

이를 통해 기대하는 바는, 간단하지만 필요한 멘션 및 채널을 적시에 검색함으로써 Slack을 더욱 효율적으로 사용할 수 있는 사내 서비스를 구축하는 것이 되었다.

(추후에 사내 업무요청 워크플로 검색도 추가하기로 했으나, 워크플로 관련 API들은 전부 admin 권한이 필요한 유료 기능이어서 살짝 보류... 되기도 했다. 아쉽다.)
(근데 결국 리스트는 넣긴 했다. ~~무료 버전이라 아무 기능도 하지 못할 뿐~~)

시행착오

1️⃣ Vite + vue3 + tailwindcss 프로젝트에 express 서버까지 (?)

처음에는 토이 프로젝트처럼 간단하게 만들기부터 시작해보자, 해서 하나의 프로젝트에 express 서버와 vite vue 프론트엔드 소스코드를 모두 생성했었다. (일단 짬뽕해서 만들어보고..)
백엔드 작업을 한번도 해본 적 없었기 때문에 두 개로 나눌 생각도 안하고 무작정 만들기부터 했다.
백엔드 맛보기를 위해서 시작한 프로젝트이기도 하고..!

Slack API는 CORS (Cross-Origin Resource Sharing) 정책을 따르기 때문에 클라이언트(프론트엔드)에서 직접 API를 호출하는 것이 제한된다.

CORS 정책은 보안상의 이유로 브라우저가 서로 다른 도메인 간의 요청을 제한하기 때문에, 브라우저에서 직접 Slack API로 요청하는 것은 일반적으로 허용되지 않는다.

그렇기 때문에 임시방편으로 Vite 프로젝트에 Express 서버를 설치해 nodemon으로 서버를 띄운 후, 프론트엔드에서 이 Express 서버를 통해 Slack API에 요청을 보낼 수 있도록 중개 역할을 하도록 했다.

ㄴ📁node_modules
ㄴ📁public
ㄴ📁src
ㄴ📃server.cjs // express 서버

2️⃣ 레포 2개로 분리 (feat. serverless 백엔드 프로젝트 생성)

aws 서버리스로 이관하는 것으로 결정난 후, vite 프론트엔드 코드에 지저분하게 함께 붙어있던 express 서버를 제거해주기로 했다.

프론트엔드 프로젝트

server.cjs 파일 삭제

백엔드 관련된 라이브러리 제거 (express, cors, ...)

그리고 백엔드 프로젝트를 serverless로 새로 생성해주었다.

백엔드 프로젝트 (serverless 신규 생성- Serverless 홈페이지 참고)

serverless 계정 생성 > 프로젝트 생성
https://app.serverless.com/
serverless 설치
$ npm install -g serverless
설치 확인 여부는 sls -v 로 확인 가능
프로젝트 생성

$ serverless

? Select A Template: …
  AWS / Node.js / Starter
❯ AWS / Node.js / HTTP API
  AWS / Node.js / Scheduled Task
  AWS / Node.js / SQS Worker
  AWS / Node.js / Express API
  AWS / Node.js / Express API with DynamoDB
  AWS / Python / Starter
  AWS / Python / HTTP API
  AWS / Python / Scheduled Task
  AWS / Python / SQS Worker
  AWS / Python / Flask API
  AWS / Python / Flask API with DynamoDB
  (Scroll for more)

Slack API 호출을 위한 단순한 HTTP API 프로젝트를 선택해주었다.

생성해둔 프로젝트와 연결

❯ Create A New App
  Skip Adding An App

aws role 권한 관련 설정

No valid AWS Credentials were found in your environment variables or on your machine. Serverless Framework needs these to access your AWS account and deploy resources to it. Choose an option below to set up AWS Credentials.
  Create AWS IAM Role (Easy & Recommended)
  Save AWS Credentials in a Local Profile
❯ Skip & Set Later (AWS SSO, ENV Vars)

aws 관련 권한은 DevOps 분들의 도움이 필요하기 때문에 우선 스킵했다.

생성해준 프로젝트에 handler.js 파일을 추가하고, 앞서 말한 vite 프로젝트에 작성해놨던 server.cjs 코드를 거의 복붙하다시피 옮겨주었다.

BaseUrl (frontend)

처음에 한 프로젝트 내에 express 서버를 띄워 API에 요청을 보낼 땐 단순하게 BaseUrl을 https://api.slack.com 이어도 정상적으로 실행되었다.

하지만 이제 개발 환경에 맞게 동적으로 바꿔줘야 하기 때문에 새롭게 구매한 도메인에 맞게 Doppler를 이용해 설정해주었다.(Doppler 환경변수 관련 글 참고)

const api = axios.create({
  baseURL: import.meta.env.BASE_URL, // 도플러로 처리한 환경 변수
  headers: {
    Authorization: `Bearer ${ import.meta.env.SLACK_TOKEN }`,
    'Content-Type': 'application/json',
  },
})

CORS 에러

한가지 웃겼던 건, 도메인명이 온보딩.com 으로 한글이 섞여 있었기 때문에 이걸 과연 인식을 이대로 할까? 싶었던 점인데 내가 겪은 시행착오는 다음과 같다.

문제
백엔드, 프론트엔드 레포 분리 후 도플러로 환경변수 설정까지 다 맞춘 상태인데도 CORS 에러가 사라지지 않았다.
원인
API GATEWAY 상 CORS allowed origins 설정에서 https://온보딩.com 이 추가되어 있었으나, 실제 요청은 https://xn--o01bu1m67h.com 으로 가고 있어 CORS 발생
해결
백엔드 serverless.yml 상 allowed origins에 https://dev.xn--o01bu1m67h.com, https://stg.xn--o01bu1m67h.com, https://xn--o01bu1m67h.com 추가