Cloudflare 이미지 업로드, AWS 프리티어로 대체하기 (S3 + CloudFront 활용)

저번 글에서 1년만에 프로젝트를 AWS의 EC2와 RDS를 이용해서 배포했는데요. 복구하고보니 이미지를 업로드하거나 불러올 때 Cloudflare를 사용했었는데 지금은 요금을 따로 내고있지 않아서인지 속도가 느렸고, 업로드도 되지 않았습니다.

 

Cloudflare 이미지 업로드, 비용 문제가 생기다

 

Cloudflare가 얼마일까 알아봤습니다. 매달 5달러 정도면 충분히 이용할 수 있지만 AWS 프리티어 기간이기 때문에 AWS의 S3, CloudFront로 비용 절감을 하면서 기능을 살려볼까 합니다.

 

그리고 추후 비디오 기능도 넣을 수도 있는데, Cloudflare에서는 비디오 요금제에서도 5달러를 따로 결제해야 하는 부분에서도 별로라고 생각했습니다.

 

AWS 프리티어로 대체할 수 있을까?

Amazon S3 (Simple Storage Service) 

• 프리티어 제공량: 매월 5GB 스토리지, 2만 건의 GET 요청, 2000건의 PUT 요청 무료
• 이미지를 업로드하고 URL로 불러올 수 있음

 

Amazon CloudFront (CDN 서비스)

• 프리티어 제공량: 매월 1TB 무료 데이터 전송
• S3만 사용할 경우, 직접 S3에서 이미지 URL을 제공하면 속도가 느릴 수 있음

AWS Lambda 

• 프리티어 제공량: 월별 무료 요청 1백만 건, 월별 400,000GB-초 컴퓨팅 시간
• 이미지 크기 조정(리사이징) 기능이 필요하면 Lambda로 자동 변환 가능

 

Cloudflare에서 AWS S3로 이미지 이전하기

 

1.  Cloudflare에서 기존 이미지 목록 가져오기

Cloudflare Images API를 사용해서 이미지 목록을 가져옵니다. {ACCOUNT_ID}와 {API_TOKEN} 값을 본인 계정에 맞게 설정해주세요.

 

-o images.json → API 응답을 images.json 파일로 저장해줍니다.

curl -X GET "https://api.cloudflare.com/client/v4/accounts/{ACCOUNT_ID}/images/v1" \
     -H "Authorization: Bearer {API_TOKEN}" \
     -H "Content-Type: application/json" \
     -o images.json

 

그리고 images.json에서 result.images에서 variants[0]만 txt로 복사해달라고 하는 명령어를 실행해줬습니다.

 

cat images.json | jq -r '.result.images[] | .variants[0]' > image_urls.txt

2. 기존 이미지 다운로드

확보한 이미지 URL을 이용해서 로컬로 다운로드한 뒤 S3에 업로드하는데요.

 

순조롭게 다운로드되고 있었으나 기존 코드에서는 images의 id로 불러왔기 때문에 기존 코드가 최대한 변하지 않도록 설정하고 싶었는데요. 그러면 images_txt를 바꿔줘야 했습니다.

 

 

 

 

기존 코드와 너무 많이 달라지는 파일 이름.

 

다시 images.json에서 파일 url과 파일 이름으로 지을 id를 추출해줬습니다.

 

cat images.json | jq -r '.result.images[] | "\(.variants[0]) \(.id).jpg"' > download_list.txt

 

 

그리고 url로 다운받고 id로 파일 이름을 하도록 했습니다. 제가 원하는대로 파일 이름이 cloudflare의 id 값으로 저장되어서 코드 변경이 거의 없습니다.

cat download_list.txt | while read url filename; do
  curl -o "images/$filename" "$url"
done

 

AWS S3에 이미지 업로드 설정하기

다운로드 받은 이미지들을 S3에 업로드하기 위해서는 AWS CLI를 이용하면 쉽게 처리할 수 있습니다. 아니면 사이트에서 직접 업로드할 수 있는데요. CLI보다 훨씬 직관적이라서 GUI 방식으로 파일을 관리하려고 합니다.

 

1. AWS 사이트 접속

s3 버킷을 만들어주고 업로드를 하려고 합니다. 버킷 생성할 때 안전하게 관리하기 위해 퍼블릭 엑세스는 차단해줬습니다. 

 

CloudFront로 이미지 배포 설정

 

cloudfront를 배포할때는 전부 다 기본값으로 하고 Origin domain의 경우 방금 생성한 버킷을 선택해줬습니다. 그리고 WAF의 경우 비용이 발생한다고 해서 혹시 몰라서 비활성화해줬습니다.

 

 

Cloudfront와 S3를 모두 설정했는데 퍼블릭 액세스 차단을 설정해서인지 불러와지지 않았는데요. S3 정책에서 Cloudfront에 대한 설정을 추가로 해줬습니다

 

 

 

 

Cloudfront 에서 원본 탭을 누른 후 편집을 누르고 원본 액세스에서 원본 액세스 제어 설정(권장)(OAI)를 선택해줬습니다. 그리고 Create new OAC를 눌러서 S3에 대한 권한 설정을 해줬습니다.

 

 

설정하고 나면 정책 복사 버튼이 나오는데 이 정책을 복사해서 S3의 정책에 붙여넣기를 해주면 cloudfront로 S3를 우회한 이미지가 잘 나오게 됩니다.

 

프로젝트의 코드 변경

Cloudflare에서는 /banner /smAvatar /bgAvater /public 등 총 4가지의 사이즈로 이미지를 사용했는데요.

Lambda를 이용해서 업로드 시 다른 사이즈로 여러 파일로 업로드 할 수 있는데 아직은 복잡해서 하지 않고, 먼저 기존 프로젝트의 코드를 변경해서 이미지가 잘 나오도록 했습니다.

 

cloudflare 기존 코드:

export function makeImageURL(
  id: string,
  variants?: 'public' | 'bigAvatar' | 'smAvatar' | 'banner'
) {
  return `https://imagedelivery.net/mPhC7i6OFJEhfh-kdGX8yQ/${id}/${variants}`;
}

 

aws cloudfront 바뀐 코드:

export function makeImageURL(id: string) {
  return `https://d3319kcxpye19t.cloudfront.net/images/${id}.jpg`;
}

 

 

 

AWS S3랑 CloudFront 처음 설정할 때 문서 보면서 이것저것 설정하는게 꽤 까다로웠는데, 지금 와서 보니 한번 제대로 해두길 잘했다 싶네요.

특히 프리티어 잘 활용하니까 비용이 많이 절감되서 좋았습니다. Cloudflare도 써봤는데, AWS가 설정은 좀 복잡해도 원하는 대로 커스텀하기가 더 좋았어요. 

 

Cloudflare에서 AWS로 옮기느라 몇 시간 날린 거 생각하면 아찔하네요 😅 

일단 글이 길어져서 S3에서 이미지 업로드하는 거는 다음 글에서 적도록 할게요