S3 & Cloudfront & Lambda@edge로 이미지 관리(2) - Cloudfront 설정

김지원·2021년 10월 25일
0

image

목록 보기
2/3
post-thumbnail

1. CloudFront 설정 방법

  • 지난 글에서는 개념을 알아봤으니 설정 방법에 대해 적어보도록 하겠습니다.

  • S3의 설정은 저번에 적은 S3글을 참고하면 좋을 것 같습니다

  • S3에 대한 글

  • S3가 생성이 됐다는 가정하에 설명해보겠습니다.

1. AWS에서 cloudfront를 선택

2. 배포 생성 클릭

3. 원본

  • 원본 도메인에서 원본 데이터를 가져올 도메인을 선택할 수 있습니다.
  • 저희는 S3의 사진을 데이터로 가져올 것이기 때문에 원하는 S3의 주소를 선택합니다.

S3을 선택하게 되면 Cloudfront에 S3 버킷 권한을 줄 수 있는 OAI를 선택하는 창이 나옵니다.

새로 만드는 OAI이기 때문에 새 OAI를 생성하여 버킷 정책에 바로 들어갈 수 있게 업데이트를 눌러줍니다.

그럼 S3의 액세스 권한 정책에 자동으로 Cloudfront의 권한 객체가 생성됩니다. 👍

이렇게 cloudfront에서 S3를 접근할 수 있는 엑세스를 받을 수 있습니다.

추가 설정을 열면 이런 창이 열립니다.

기본값으로 연결 시도 3 시간 초과는 10으로 되어있습니다.

Lambda@edge도 평균적으로 시간 초과는 10초로 설정할 것이기 때문에 그대로 내비두도록 하겠습니다.

4. 기본 캐시 동작

다음은 기본 캐시 동작입니다.

경로 패턴은 S3 버킷에서의 경로를 말합니다.

예를 들어 S3 버킷의 한 폴더의 경로에서만 cloudfront를 진행하고 싶다면 cloudfront를 생성 후 경로를 지정해줄 수 있습니다.

저는 뷰어 프로토콜을 Redirect HTTP or HTTPS로 지정했습니다.

이유는 보안을 위해서인데 HTTP로 넘어오는 파일도 HTTPS로 변환하여 저장해줍니다.

허용된 HTTP 방법은 GET으로 하였습니다.

제가 사용하는 기능은 Cloudfront에 올라간 사진을 불러오는 작업만 진행할 것이기 때문에 불필요한 Method는 선택하지 않았습니다.

마지막으로 캐시 키 및 원본 요청은
이미지 압축 Lambda를 사용하기 위해 Legacy cache settings를 선택합니다.

Legacy cache settings를 들어가면 쿼리 문자열이라는 선택사항이 있습니다.

이 쿼리 문자열을 이용해 Lambda@edge에서 파일의 크기나 포맷, 퀄리티를 조절할 수 있습니다.

쿼리 문자열의 예로는 이 친구들이 있습니다.

w = width
h = height
f = format
q = quality

자신이 사용할 쿼리 문자열을 골라 적어줍니다.

5. 함수 연결

함수 연결에서는 Lambda@edge를 선택할 수 있습니다.

하지만 아직 생성하지 않았기 때문에 설정하지 않도록 하겠습니다.

저희는 이미지 파일의 캐시 데이터를 불러 올 것이기 때문에 원본 응답(Origin response)에서 함수를 사용할 예정입니다.

6. 설정

마지막으로 설정 파트입니다.

저는 아시아에서 특히 우리나라에서 사용할 예정이기 때문에 아시아가 포함된 곳으로 선택합니다.
(아시아만 하는 것도 포함해줘요😂)

다른 곳은 건드릴 곳이 없지만 표준 로그가 정말 탐났습니다. 왜냐하면 로그로 에러나 성공률 등 많은 정보를 얻을 수 있기 때문이었습니다.

아시아(홍콩)을 보고 같은 아시아인 서울지역도 안된다고 잠시 착각이 들었지만 홍콩은 ap-east-1 서울은 ap-northeast-2로 가능하다는 것을 알게 되었습니다.

그래서 냅다 선택 후 S3에서 불러오는 로그를 확인하고자 합니다 😁

배포가 된 화면

배포 후 들어가면 이런 화면이 띄어집니다.

드디어 Cloudfront 설정이 끝났습니다! 🙇‍♂️

마치며

지금의 cloudfront 설정은 확실히 사용자 입장에서 많이 편리해졌다는 느낌을 받았습니다.

특히 querystring 설정부분에서 깜짝 놀랐습니다.

예전 AWS에서는 querystring이나 여러 설정들이 세분화되어 Query String Forwarding에 대한 설정과 whitelist를 이용한 query문 지정같은 설정으로 해서 초보자에게 어려울 수 있었지만 지금은 사용자의 입장에서 빠르고 편하게 설정할 수 있게 바뀐거 같아 정말 좋았습니다.

다음 글에는 Lambda@edge연결과 이미지 크기 압축에 관한 얘기를 써보도록 하겠습니다.

profile
backend-developer

0개의 댓글