Cloudinary & Astro
Cloudinary는 이미지 및 동영상 플랫폼이자 헤드리스 디지털 자산 관리자 (DAM)로, 콘텐츠 전송 네트워크 (CDN)에 자산을 호스팅하고 전송할 수 있는 서비스입니다.
Cloudinary에서 제공하는 경우, 배경 제거, 동적 자르기 및 크기 조정, 생성형 AI와 같은 도구를 사용하여 자산을 편집할 수 있는 Transformation API에 추가로 액세스할 수 있습니다.
Astro에서 Cloudinary 사용
섹션 제목: Astro에서 Cloudinary 사용Cloudinary는 Astro 환경에 따라 사용할 수 있는 다양한 SDK를 지원합니다.
Cloudinary Astro SDK는 이미지, 동영상, 업로드 컴포넌트를 포함한 기본 Astro 컴포넌트와 Astro 콘텐츠 컬렉션과 함께 사용할 수 있는 콘텐츠 로더를 제공합니다.
또는 Cloudinary Node.js SDK와 JavaScript SDK를 모두 사용하여 이미지의 URL을 생성할 수 있습니다. Node.js SDK는 Cloudinary API에 자산 업로드, 리소스 요청, 콘텐츠 분석 실행 등 추가 요청을 할 수 있습니다.
전제 조건
섹션 제목: 전제 조건- 기존 Astro 프로젝트
- Cloudinary 계정
Astro Cloudinary 설치
섹션 제목: Astro Cloudinary 설치패키지 관리자에 적합한 명령을 실행하여 Cloudinary Astro SDK를 설치합니다:
계정 구성
섹션 제목: 계정 구성프로젝트의 루트에 새 .env
파일을 만들고 Cloudinary 자격 증명을 추가합니다:
Cloudinary 이미지 사용
섹션 제목: Cloudinary 이미지 사용이미지 데이터 (예: src
, width
, alt
)를 <CldImage>
컴포넌트에 전달하여 .astro
컴포넌트에 이미지를 추가합니다. 이렇게 하면 이미지가 자동으로 최적화되고 Transformations API에 액세스할 수 있습니다.
자세한 내용은 Cloudinary의 <CldImage>
문서를 참조하세요.
Cloudinary 동영상 사용
섹션 제목: Cloudinary 동영상 사용.astro
컴포넌트에 동영상을 추가하려면 <CldVideoPlayer>
를 추가하고 적절한 속성을 전달하세요. 이 컴포넌트는 Cloudinary 비디오 플레이어를 사용하여 동영상을 자동으로 최적화하고 임베드합니다.
자세한 내용은 Cloudinary의 <CldVideoPlayer>
문서를 참조하세요.
Cloudinary 업로드 활성화
섹션 제목: Cloudinary 업로드 활성화웹사이트나 앱의 UI에서 파일 업로드를 활성화하려면 Cloudinary Upload Widget을 임베드하는 <CldUploadWidget>
을 추가합니다.
다음 예시는 서명되지 않은 Upload Preset을 전달하여 서명되지 않은 업로드를 허용하는 위젯을 만듭니다:
서명된 업로드에 대한 가이드 및 예시는 Astro Cloudinary 문서에서 확인할 수 있습니다.
자세한 내용은 Cloudinary의 <CldUploadWidget>
문서를 참조하세요.
Cloudinary 콘텐츠 로더
섹션 제목: Cloudinary 콘텐츠 로더Cloudinary Astro SDK는 콘텐츠 컬렉션을 위한 Cloudinary 자산을 불러오는 cldAssetsLoader
콘텐츠 로더를 제공합니다.
이미지 또는 동영상 컬렉션을 불러오려면 loader: cldAssetsLoader ({})
의 folder
를 설정합니다 (필요한 경우):
그런 다음 getCollection()
또는 getEntry()
쿼리 함수를 사용하여 컬렉션에서 하나 이상의 이미지 또는 동영상을 선택할 수 있습니다.
자세한 내용은 Cloudinary의 cldAssetsLoader
문서를 참조하세요.
Cloudinary 이미지 URL 생성
섹션 제목: Cloudinary 이미지 URL 생성Astro Cloudinary SDK는 이미지의 URL을 생성하고 사용하기 위한 getCldOgImageUrl()
헬퍼를 제공합니다. 이미지를 표시하기 위해 컴포넌트 대신 URL이 필요할 때 이 함수를 사용하세요.
URL의 일반적인 용도 중 하나는 소셜 미디어 카드를 위한 <meta>
태그의 오픈 그래프 이미지입니다. 이 헬퍼는 컴포넌트와 마찬가지로 Cloudinary transformations에 액세스하여 모든 페이지에 대한 동적이고 고유한 소셜 카드를 만들 수 있습니다.
다음 예시는 소셜 미디어 카드에 필요한 <meta>
태그와 getCldOgImageUrl()
을 사용하여 오픈 그래프 이미지를 생성하는 방법을 보여줍니다:
Cloudinary 문서에서 Cloudinary 소셜 미디어 카드 템플릿을 찾으세요.
자세한 내용은 Cloudinary의 getCldOgImageUrl()
문서를 참조하세요.
Node.js에서 Cloudinary 사용
섹션 제목: Node.js에서 Cloudinary 사용Astro Node.js 환경에서 작업할 때, 보다 복잡한 자산 관리, 업로드 또는 분석이 필요한 경우 Cloudinary Node.js SDK를 사용할 수 있습니다.
패키지 관리자에 적합한 명령을 실행하여 Cloudinary Node.js SDK를 설치합니다:
.env
파일에 다음 환경 변수를 추가합니다:
Astro 컴포넌트의 펜스 사이에 다음 코드를 추가하여 새 Cloudinary 인스턴스로 계정을 구성합니다:
이렇게 하면 이미지, 동영상 및 기타 지원되는 파일과 상호 작용할 수 있는 모든 Cloudinary API에 액세스할 수 있습니다.
Astro Forms와 Cloudinary Node.js SDK를 사용하여 파일을 업로드하는 방법을 알아보세요.
공식 리소스
섹션 제목: 공식 리소스- Cloudinary Astro SDK
- Cloudinary Node.js SDK
- Using Cloudinary with Astro (YouTube)
- Code Examples Using Cloudinary Astro SDK (GitHub)