AWS Lambda로 랜덤아재개그 슬랙봇 만들기 5편 | Interactive Components 설정하기

Interactive Components 설정하기

4편에 이어,

버튼을 눌렀을 때 응답을 설정해보겠습니다.

Request URL을 설정하라고 나오는데요,

링크를 눌러서 설정해봅시다. 

3편에서처럼, Reuqest URL에는 람다함수에 연결되어 있는 API Gateway의 URL을 적어주시면 됩니다.

다만, 지난 번 요청과 중복되지 않게 뒤에 /interactive를 붙여줍시다.

다시 버튼을 눌러보면,

이번에는 또 다른 에러가 납니다. =_=

API Gateway에 Proxy 설정을 해주지 않았기 떄문입니다.

API Gateway Proxy로 Lambda와 연결하기

API Gateway를 선택하고, API Gateway의 이름을 눌러서 API Gateway콘솔로 이동합니다.

/gag-slack-bot/interactive 으로 요청이 들어오기 때문에

/gag-slack-bot/ 를 선택하고 하위에 리소스를 생성합니다.

Configure as proxy에 체크하고 다음 단계로 넘어갑니다.

작성하던 람다함수에 연결해줍니다.

proxy를 생성하여 람다함수를 연결했기 때문에, 이제 /gag-slack-bot/ 이하의 모든 요청은 gag-slack-bot 람다 함수로 전달됩니다.

브라우저를 이용해 /gag-slack-bot/interactive 로 GET 요청을 날려봅시다.

잘 설정되었다면 람다함수로 요청이 전달되고 "Success GET"이 표시되겠죠?

이상한 에러가 납니다..

배포를 안했기 때문입니다 =_=

API Gateway를 배포해줍시다.

다시 요청하면 Success GET이 보입니다.

Incoming Webhooks 응답 코드 작성

람다 함수를 다음과 같이 수정해봅시다.

// index.js
exports.handler = async (event) => {
  console.log('event.body', event.body);
  const path = event.path;
  
  const buildResponse = (res) => ({
    statusCode: 200,
    body: typeof res === 'string' ? res : JSON.stringify(res),
  });
  
  switch (event.httpMethod) {
    case 'GET': 
      return buildResponse('Success GET');
    case 'POST':
      if (path === '/gag-slack-bot') {
        return buildResponse({
          attachments: [
            { 
              title: '맞춰봐~',
              callback_id: '가장+못생긴+새는?',
              text: '가장 못생긴 새는?',
              actions: [
                {
                  name: 'action',
                  type: 'button',
                  text: '앵그리버드',
                  value: '앵그리버드',
                },
                {
                  name: 'action',
                  type: 'button',
                  text: '오징어 새',
                  value: '오징어 새',
                },
              ]
            }
          ]
        }); 
      }
      
      if (path === '/gag-slack-bot/interactive') {
        const body = JSON.parse(decodeURIComponent(event.body).replace('payload=', ''));
        if (body.callback_id === '가장+못생긴+새는?') {
          const question = body.callback_id.replace(/\+/g, ' ');
          const answer = '우리 생김새~';
          return buildResponse(`*${question}*\n정답: ${answer} \n:smile:`);
        }
      }
  }
  
  return {
    statusCode: 400,
    body: 'unknown httpMethod',
  };
};

처음에 요청이 들어오면 (/gag-slack-bot) 버튼을 보여주고

버튼을 선택하면 (/gag-slack-bot/interactive) 텍스트로 응답하는 코드입니다.

저장을 하고 실행시켜봅시다.

잘 실행이 됩니다 ㅎㅎ

Next

Http Method 단위로 코드를 분리하는 Refactoring 작업을 한 후

DB를 연결해보겠습니다.