[aws] lambda@edge 설정 중 파라미터(query string)이 넘어오지 않는 경우(이미지 리사이징)

결론만 말하자면 frontcloud에서 query string을 받을 수 있도록 설정해야한다.

 

lambda@edge 를 사용하는 경우 frontcloud와 함께쓰는 경우가 많은데 파라미터를 통해 크기를 조절하는 경우가 많다. 그런데 아무리 해도 크기가 줄지 않아 이상해 cloudwatch를 통해 봤다. 중간중간 console.log도 찍어가면서. 알고보니 request에서 querystring(파라미터)가 없는 채 들어오고 있었다.

 

일단 로그를 다음과 같이 찍었다.

exports.handler = async(event, context, callback) => {
  const { request, response } = event.Records[0].cf;
  
  console.log("request: ", request)
  console.log("response: ", response)
  
  // Parameters are w, h, f, q and indicate width, height, format and quality.
  const { uri } = request;
  console.log("uri: ", uri)
...

 

로그결과를 보니 다음과 같았다

 

다음처럼 호출했었다

https://[domain].cloudfront.net/andreas-klassen-gZB-i-dA6ns-unsplash.jpg?w=150&h=120&f=webp&q=90

 

uri의 경우는 내가 호출한 바처럼 나왔는데, querystring(w, h, f, q)의 경우 빈값이 나왔다.

그래서 왜그러나 한참 찾았는데 frontcloud 설정의 문제였다.

 

frontcloud를 설정하다보면 Cache and origin request settings 라는 항목에 Use a cache policy and origin request policy 가 기본값이다. (수정할때는 Behavior에 있다)

 

이 설정값들은 CloudFront > Policies 에 있으며 4가지가 있는데 전부 querystring 에는 none이 기본이다.

 

그래서 해당 설정값을 Use legacy cache settings로 변경한 뒤 아래 보면 Query String Forwarding and Caching에 추가설정하면 된다.

 

Query String Forwarding and Caching 의 옵션중 whitelist를 클릭 한 뒤, 추가하고픈 key를 입력한다. 여기서는 w h f q 를 입력한다

 

설정을 저장한다. 그리고 캐시가 저장되어 있기 때문에 캐시를 초기화 한다.

CloudFront > Distributions > 개체선택 > Invaildations 탭을 클릭해 Create Invalidation을 클릭한다.

 

Object paths를 /*로 입력. Invalidate 를 클릭한다

 

 

위에서 호출했던 것을 다시 호출해보자. 이번엔 querystring에 값이 제대로 들어있음을 확인할 수 있다.

 

이미지 크기도 조절된 것을 확인할 수 있다.

 

 

끝.