Amazon API Gateway에 요청보내기 with SDK

Dongwoo Kim·2024년 10월 28일

aws

TIL / WIL

목록 보기

117/126

개요

유저활동데이터를 수집하기위해 client script에서 Amazon API Gateway로 데이터를 전송할 때 SDK를 활용해보았다.

API Gateway SDK를 사용

CORS 활성화 & 배포
SDK 다운로드
SDK를 S3에 퍼블릭으로 업로드

SDK를 로딩하여 데이터 전송하는 코드 작성

const loadScript = (url) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = resolve;
    script.onerror = () => reject(new Error(`Failed to load: ${url}`));
    document.head.appendChild(script);
  });
};

const loadDependencies = async () => {
  const baseUrl = ;
  const scripts = [
    'lib/axios/dist/axios.standalone.js',
    'lib/CryptoJS/rollups/crypto-js.js',
    'lib/CryptoJS/rollups/sha256.js',
    'lib/CryptoJS/components/enc-base64.js',
    'lib/CryptoJS/components/hmac.js',
    'lib/apiGatewayCore/sigV4Client.js',
    'lib/apiGatewayCore/apiGatewayClient.js',
    'lib/apiGatewayCore/simpleHttpClient.js',
    'lib/apiGatewayCore/utils.js',
    'lib/url-template/url-template.js',
    'apigClient.js',
  ];

  try {
    for (const script of scripts) {
      await loadScript(baseUrl + script);
      console.log(`${script} 로드 완료`);
    }
    console.log('모든 라이브러리 로드 완료');
  } catch (error) {
    console.error('라이브러리 로드 실패:', error);
  }
};

const callApi = async (body) => {
  try {
    const apigClient = apigClientFactory.newClient({
      region: 'ap-northeast-2',
    });
    
    const response = await apigClient.rootPost(null, body);

    console.log('API 호출 성공:', response);
  } catch (error) {
    console.error('API 호출 실패:', error);
  }
};

await loadDependencies();

테스트 결과 확인

직접 API Gateway에 요청

전송 코드 작성

const callApi2 = async (body) => {
  const url = ;
  const headers = {
    'Content-Type': 'application/json',
  };

  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: headers,
      body: JSON.stringify(body),
    });
    console.log('API 호출 성공:', response);
  } catch (error) {
    console.error('API 호출 실패:', error);
  }
};

테스트 결과 확인

API Gateway SDK를 사용것 vs 직접 API Gateway에 요청: 장단점 비교 (from. ChatGPT 4o)

1. API Gateway SDK 사용

장점

자동화된 요청 서명 처리 (SigV4)
- SDK는 AWS의 SigV4 서명을 자동으로 처리하므로, 인증 관련 복잡성을 줄여줍니다.
- IAM 키와 같은 AWS 자격 증명을 사용할 때 매우 유용합니다.
편리한 함수 호출 방식 제공
- API 경로와 메서드에 맞춰 자동으로 함수가 생성되어 호출이 간단합니다.
- 예를 들어, apigClient.invokeApi()와 같은 추상화된 메서드를 사용합니다.
HTTP 클라이언트 기능 포함 (Axios 사용)
- SDK 내부적으로 axios를 사용해 API 요청을 처리합니다. 이를 통해 안정적인 HTTP 통신이 가능합니다.
의존성 관리
- SDK에서 의존성 라이브러리를 명확하게 관리합니다. 인증, 서명, URL 템플릿 등 복잡한 처리가 통합되어 있습니다.

단점

초기 설정이 복잡함
- 여러 라이브러리 파일을 로딩해야 하며, 경로 설정과 SDK 초기화를 처리해야 합니다.
- SDK를 업데이트해야 할 때마다 새로 다운로드하고 적용해야 합니다.
의존성으로 인해 번들 사이즈 증가
- axios, crypto-js, URL 템플릿 등 여러 라이브러리를 로딩하므로 번들 사이즈가 커질 수 있습니다.
- 모바일 환경에서는 성능에 영향을 미칠 수 있습니다.
IAM 자격 증명 노출 위험
- 브라우저에서 직접 IAM 자격 증명을 사용하면 보안 리스크가 높아집니다. SDK로 직접 호출할 경우 서버 측 프록시가 없는 상태에서 보안 문제가 발생할 수 있습니다.

2. API Gateway에 직접 요청 (Axios 사용 등)

장점

가벼운 구현 가능
- axios 같은 경량 HTTP 클라이언트를 사용해 요청을 보내면 추가적인 라이브러리 로딩 없이 API를 호출할 수 있습니다.
- 필요한 라이브러리가 적기 때문에 페이지 로딩 속도와 성능이 향상됩니다.
더 많은 제어권 제공
- HTTP 요청 헤더, 파라미터 등을 직접 설정하므로 요청에 대한 제어가 쉽습니다.
- 요청 실패 시의 에러 처리나 재시도 로직을 쉽게 커스터마이징할 수 있습니다.
API 키 기반 인증 사용 가능
- AWS API Gateway에서 제공하는 API 키를 사용하면 IAM 키를 노출하지 않아도 됩니다. API 키는 상대적으로 설정이 간단합니다.

단점

서명 처리의 복잡성
- AWS API Gateway에서 IAM 역할 기반의 인증을 사용할 경우, SigV4 서명을 직접 구현해야 합니다.
- 서명 구현은 번거롭고 복잡하며, 보안상의 실수가 발생할 수 있습니다.
추가 구현 필요
- 요청을 추상화해주는 SDK가 없으므로 직접 모든 로직을 구현해야 합니다. API 호출이 많은 경우 유지보수 부담이 커질 수 있습니다.
AWS 기능 통합의 어려움
- SDK를 사용하면 AWS의 여러 서비스와 통합하기 쉬운 반면, 직접 요청할 경우 일부 AWS 서비스와의 통합이 까다로울 수 있습니다.

비교 요약: 언제 SDK를 사용하고 언제 직접 요청할까?

요소	SDK 사용	직접 요청 (Axios 등)
설정 및 초기화	복잡 (여러 라이브러리 필요)	단순 (Axios 등으로 바로 구현 가능)
성능	번들 사이즈 커짐	경량화 가능
서명 및 인증 처리	자동 처리 (SigV4 서명)	직접 서명 처리 필요
보안	IAM 자격 증명 노출 위험	API 키 사용으로 보안 강화 가능
AWS 통합	AWS와 쉽게 통합	수작업으로 AWS 통합 처리
제어 및 커스터마이징	추상화된 메서드 제공	완전한 제어 가능
유지보수	SDK 업데이트 필요	코드 직접 관리 필요