[GCP] Cloud Functions with YouTube Data API

이번 포스팅에서는 Google Cloud를 사용하여 serverless 환경을 구축해 보도록 하겠습니다.

Cloud Functions을 통해 요청을 처리하도록 하고, 예제로 YouTube Data API를 사용해 보겠습니다.

사전 준비로 Google Cloud에 회원 가입은 되어 있어야 하고, 계정도 billing 정보 등록이 되어 있어야 합니다.

Create Project

먼저 프로젝트를 생성해 보겠습니다.

메인 화면에서 CREATE OR SELECT A PROJECT 버튼을 눌러 줍니다.

프로젝트 이름을 입력한 후, CREATE 버튼을 눌러 줍니다.

잠시 기다리면 프로젝트 생성이 완료 됩니다. 완료 후, 생성된 프로젝트를 선택해 줍니다.

이제 프로젝트 준비는 끝났습니다.

Enable YouTube Data API

다음으로 YouTube Data API를 사용하도록 설정해 주겠습니다.

APIs & Services 메뉴로 이동 합니다.

ENABLE APIS AND SERVICES를 눌러 줍니다.

youtube data api를 검색창에 입력 후, 검색을 합니다.

검색 결과에서 YouTube Data API v3을 선택합니다.

이제 ENABLE 버튼을 눌러 사용하도록 설정합니다.

CREDENTIALS 탭으로 이동 후, CREATE CREDENTIALS 버튼을 눌러 줍니다.

이번 예제에서는 Public data를 선택하고, NEXT를 눌러 줍니다.

이후 나오는 API Key를 잘 메모해 두시고, 다른 사람과 절대 공유하지 마세요.

이제 YouTube Data API도 사용 가능해 졌습니다.

Create Functions

이제 사용자 요청을 처리할 Cloud Function을 만들어 보도록 하겠습니다.

Cloud Functions 메뉴로 이동합니다.

CREATE FUNCTION 버튼을 눌러 줍니다.

관련 API들이 enable 되어 있지 않다면 팝업창이 뜰텐데, ENABLE 버튼을 눌러주면 됩니다.

사용할 함수 이름과 region을 입력해 줍니다.

아무 요청이나 다 허용하시려면 Allow unauthenticated invocations를 선택하시고, 특정 권한을 받은 요청만 허용하시려면 Require authentication을 선택해 줍니다.

만들고자 하는 서비스에 따라 다르게 선택하시면 되고, 이번 예제에서는 다른 설정 없이 누구나 요청 가능하도록 Allow unauthenticated invocations를 선택하겠습니다.

다음으로, Runtime 메뉴에서 ADD VARIABLE 버튼을 누른 후, 사용할 변수 명과 아까 메모해둔 API Key 값을 넣어 줍니다.

여기까지 완료 되었다면, NEXT 버튼을 눌러 줍니다.

스크린샷을 참고하여 코드를 입력해 줍니다.

YouTube Data API 공식문서를 보고 원하는 대로 변경하시면 되요.

저는 검색어를 입력받아 rating으로 정렬을 한 후, 입력받은 개수만큼 JSON으로 반환하는 코드를 만들었어요.

const axios = require('axios');

exports.youtubeQuery = async (req, res) => {
  try {
    const apiKey = process.env.API_KEY || '';
    const searchKeyword = req.query.searchKeyword || '';
    const maxResults = req.query.maxResults || 10;

    const searchResponse = await axios.get('https://www.googleapis.com/youtube/v3/search', {
      params: {
        key: apiKey,
        q: searchKeyword,
        part: 'snippet',
        type: 'channel',
        order: 'rating',
        maxResults: maxResults,
      },
    });

    const channels = searchResponse.data.items;

    if (!channels || channels.length === 0) {
      throw new Error('No channels found for the given search keyword.');
    }

    const result = channels.map((channel, index) => ({
      rank: index + 1,
      channelId: channel.id.channelId,
      channelTitle: channel.snippet.title,
    }));

    res.status(200).json(result);
  } catch (error) {
    console.error('Error:', error);
    res.status(500).json({ error: 'Failed to fetch YouTube channel ranking data' });
  }
};

환경 변수를 사용하여 API Key도 보다 안전하게 숨겼습니다.

axios를 사용했으니, 이에 대한 설정도 추가해 줍니다. package.json 파일을 열어서 다음과 같이 axios 설정을 추가해 줍니다.

{
  "dependencies": {
    "@google-cloud/functions-framework": "^3.0.0",
    "axios": "^0.21.1"
  }
}

이제 코드는 다 작성 되었습으니 테스트를 해봐도 좋습니다. 다 끝나면, 화면 하단에 DEPLOY 버튼을 눌러 줍니다.

기다리시면 배포가 완료 됩니다.

Testing

브라우저를 통해 https://주소/youtubeTest?searchKeyword=tistory&maxResults=10와 같은 형태로 입력해 보세요.

주소는 각자의 URL을 복사해서 사용하시면 되요.

JSON 형태의 응답을 얻으셨다면 성공입니다.

이제 serverless 구축이 다 되었으니, 이것을 Front-End에서 호출하도록 하면 됩니다. ^^

Conclusion

이번 포스팅에서는 Googld Cloud의 Cloud Functions를 사용하여 serverless 환경을 구축하는 방법에 대해 살펴보았습니다.

도움이 되었기를 바랍니다. ^^