IceCraft - Cloudinary 외부호스팅 적용하기

 

프로젝트 진행 중, 페이지에서 영상을 사용하고 있는 곳이 있는데

Supabase 에서 저장해두고, 그 링크를 꺼내서 사용하고 있었다.

근데 트래픽이 크게 몰림에 따라 영상을 사용하고 있는 그 페이지 때문에 자꾸 락이 걸리는 거였음(...)

더 결제해서 사용하면 되지만 우리는 취업준비생에 돈도 없기도 하고 🤣

꼭 영상 하나로 트래픽이 꽉 차서 락이 걸린다면, 영상만 따로 빼서 외부호스팅을 이용해 사용해보기로 했다.

 

 

 

 

 

클라우드너리 홈페이지

Image and Video Upload, Storage, Optimization and CDN

 

 

 

Cloudinary?

클라우드너리는 이미지, 영상 업로드 저장 관리, 변환(사이즈&자르기)등 다양한 기능이 들어있다.

무료로만 이용해도 충분하게 월 25크래딧이 이용가능하다.

 

Docs도 잘 나와있고, 

개발 환경에 맞게 어떻게 해야하는지 알려주고 있다.

 

 

 

 

 

 

Cloudinary 설치 

npm i next-cloudinary
yarn add next-cloudinary

 

but, 나처럼 일반 영상만 (재생 버튼 없이) 삽입할 예정이면, 설치를 따로 진행 안해줘도 됨...!

 

 

사용방법

 

회원가입을 하고 난 뒤, 나는 영상을 업로드 할 예정이므로 먼저 준비한 비디오를 업로드 해준다.

 

 

 

 

 



업로드는 됐다! 어떻게 불러오지?

 

그리고 Media Library를 클릭해주면 내가 업로드한 내용들을 볼 수 있다.

 

 

 

 

 

 

내가 업로드 한 url을 저장해서 가져온다.

 

 

 

 

 

 

프로젝트 src에 수파베이스에서 사용한 url대신

클라우드너리에서 저장한 url을 갈아껴준다.

    <video
          className={S.video}
          src="영상 url"
    ></video>

 

 

 

나는 url만 필요해서 정말 간단하게 구현했지만, 클라우드너리 서비스는 여러가지 기능을 제공해주고 있어서

이미지 편집 기능이나, 영상 재생 관련해서 쓰게 된다면 편하게 사용할 수 있는 사이트이다.

나중에 우리프로젝트에 영상관련해서 제어하는 내용이 필요하다면, 그때는 직접 설치해서 잘 사용해 봐야겠다!

 

끝.

 

 

 

Docs

Cloudinary Image & Video Management - Documentation Home | Cloudinary