CloudFlare - 서버리스를 위한 next.js 이미지업로드 서비스

리액트만으로 정적인 사이트를 만들면, vercel를 자주 이용했었는데,

이번에 Next.js를 사용하며 좋은 클라우드 서비스를 발견!

 

 

nodejs , react 조합으로 이미지를 업로드할때 

 

 

프론트에서 백엔드로 사진을 보내고 ->  백엔드에서  multer로 받고 -> aws rds 공간에 저장시키고 -> 다시 백엔드에서 프론트로 사진정를 보내고  (원래 해왔던 백엔드 서버에 업로드 보내는 방식)

 

 

하지만 next는 서버리스로 프론트에서 api를 보낼수 있으니 ... 굳이 aws에 비싼 돈을 내면서 ec2를 빌리지 않아도 된다는 말씀

 

 

대역폭이라고 하나.. Bandwidth?? 중간에 백엔드가 중간입장에서 사진을 보내고 받고 보내고 받고 하면서 

쇼핑몰제작때 한달 7만원가량 빠져나간적이 있는데... 내주머니에서 직접빠져나가니 실로 뼈저리게 와닿았다

 

 

그런데 이번에 CloudFlare에서 Direct Creator Uploads라는 서비스를 내놓았는데 이미지 무려 10만개에 5천원 ....

무지무지 저렴한 가격으로 이미지를 저장하고 서비스할수있다니.. 이건 aws 에 돈 내본사람만 앎..

현재 내 소중한돈 5달러 지불하고 Next.js와 Cloud Flare 를 사용하고 있다.. 비용적인 측면에서 먼저 만족하고 보안성 측면에서도 

Cloud Flare가 유저에게  빈저장공간을 내어주는데 바로 이 주소가 1회용 토큰이며, API token을 노출되지 않도록 한다고 하니 보안성 역시 훌륭한것이 장점인것같다. 

 

내친김에 나혼자 볼것같긴하지만 사용법까지 써보자

 

좌측

 

좌측 이미지 클릭 ->  우측 use api 탭 클릭 -> Get an API token here 클릭 

 

 



Create token 클릭후 

 

 

맨밑 create custom token 에서  Get started 클릭

 

 

이름하고 퍼미션만 저렇게 선택후

하단 컨티뉴투 서머리 파랑버튼 클릭하면 

 

크리에이트 토큰 파랑버튼이 나올것이다. 

 

 

 

그러면 나오는 토큰을 .env 환경변수파일에 저장해놓고 

 

그리고 대시보드로 나와서 Acount Id 역시 .env에 넣어서 사용하면 된다.