CloudFront + API Gateway REST API(Lambda Proxy) 구성에서 쿼리 스트링 보내기

안녕하세요, 클래스메서드 CX사업본부 Delivery부의 정현재입니다.

이번 블로그에서는 제가 CloudFront + API Gateway REST API 구성에서 쿼리 스트링이 보내지지 않는 문제 어떻게 해결했는지 이야기를 해보려고 합니다.

저는 다음과 같이 S3에 React 웹 애플리케이션을 호스팅하고, CloudFront를 경유하도록 구성하였습니다. 그리고, 똑같이 CloudFront를 경유하도록 API Gateway REST API를 구축하고 백엔드로서 Lambda Proxy를 사용하도록 하였습니다. 저는 테스트를 위해 애플리케이션에 버튼을 하나 추가하여 클릭하면 CloudFront에 연결되어 있는 API Gateway REST API로 testQueryString라는 이름의 쿼리스트링과 함께 axios 요청을 보내도록 하였습니다.

버튼을 클릭해보니 다음과 같이 502 에러가 발생하고 있었습니다.

{
resource: '/api/test',
path: '/api/test',
httpMethod: 'GET',
headers: {
생략
},
multiValueHeaders: {
생략
},
queryStringParameters: null,
multiValueQueryStringParameters: null,
pathParameters: null,
stageVariables: null,
requestContext: {
생략
},
body: null,
isBase64Encoded: false
}

axios 리퀘스트로 인해 실행되는 람다의 로그에 event 객체를 표시해보니 다음과 같이 쿼리스트링에 대한 항목이 null로 axios에서 보내고 있는 쿼리스트링을 받고 있지 못하고 있는 것을 확인할 수 있었습니다.

대응 방법

API Gateway 설정

Method Request에 쿼리스트링 파라미터 지정

우선, API Gateway의 메서드 요청(Method Request)설정에서 보낼 쿼리스트링을 지정해야합니다.

쿼리스트링을 보내려 하는 메서드의 메서드 요청 설정에서 URL 쿼리 문자열 파라미터에 보낼 쿼리스트링의 키를 입력합니다.

Integration Request에서 람다 프록시 통합 설정(안 되어있는 경우)

이번 블로그에서는 람다 프록시 통합을 통해 쿼리스트링을 받을 것이기 때문에 만약, 통합 요청(Integration Request)에 람다 프록시 통합이 설정 되어 있지 않은 경우, 설정을 하도록 합니다.

CloudFront 설정

Behavior의 캐시 정책 수정

마지막으로 CloudFront에서 Behavior의 캐시 정책을 수정합니다.

다음과 같이 Behavior의 캐시 정책에서 쿼리 문자열에 대한 항목을 설정합니다. 이번에는 모두를 선택하여 모든 쿼리스트링을 허용하도록 하였지만, 지정된 쿼리 문자열 포함을 설정하여 특정 쿼리스트링만 허용하도록 하는 것이 바람직합니다.

결과 확인

위와 같이 API Gateway와 CloudFront를 설정한 후, 다시 한번 axios 요청을 보내 람다의 event 객체를 로그로 표시해보았습니다.

{
  resource: '/api/test',
  path: '/api/test',
  httpMethod: 'GET',
  headers: {
    생략
  },
  multiValueHeaders: {
    생략
  },
  queryStringParameters: { testQueryString: 'test' },
  multiValueQueryStringParameters: { testQueryString: [ 'test' ] },
  pathParameters: null,
  stageVariables: null,
  requestContext: {
    생략
  },
  body: null,
  isBase64Encoded: false
}

제대로 queryString이 전달되고 있는 것을 확인할 수 있었습니다.(만약 똑같이 queryString이 표시 되지 않는 경우에는 Behavior의 캐시 정책에서 TTL 설정을 하거나 무효화(Invalidation)를 작성해 캐시를 초기화 해줍니다.)