이미지/동영상 업로드를 위해 Strapi CMS에 Cloudinary를 추가하는 방법

Strapi은 오픈 소스 헤드리스 CMS입니다.

TL;DR:

이 기사의 데모 소스 코드는 GitHub에서 찾을 수 있습니다.

시작하려면 컴퓨터에 다음이 필요합니다.

NodeJS v14 +

Cloudinary 계좌

스트라피 프로젝트 생성

새 strapi 프로젝트를 만들려면 다음을 실행합니다.

npx create-strapi-app@latest my-project --quickstart

성공적으로 설치한 후, Strapi는 로컬 계정을 생성할 수 있도록 자동으로 새 브라우저를 엽니다.



브라우저에서: http://localhost:1337/admin/auth/register-admin

Cloudinary 업로드 플러그인 설치

Strapi 프로젝트에 Cloudinary를 통합하려면 provider-upload-cloudinary를 설치해야 합니다.

https://www.npmjs.com/package/@strapi/provider-upload-cloudinary

설치하려면 프로젝트의 루트 내에서 다음을 실행합니다.

npm install @strapi/provider-upload-cloudinary

./config 폴더 안에 새 파일(plugins.js)을 만들고 다음을 붙여넣습니다.

module.exports = ({ env }) => ({
  upload: {
    config: {
      provider: "cloudinary",
      providerOptions: {
        cloud_name: env("CLOUDINARY_NAME"),
        api_key: env("CLOUDINARY_KEY"),
        api_secret: env("CLOUDINARY_SECRET"),
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
    },
  },
});

환경 변수 구성

프로젝트 폴더의 루트에서 .env 폴더를 찾고 다음을 추가합니다.

CLOUDINARY_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=

자격 증명을 찾으려면 Cloudinary 계정에 로그인하고 account console/dashboard으로 이동하십시오.



대시보드에서 API 키와 암호를 찾아 .env 파일에 붙여넣습니다. 개발 서버를 저장하고 다시 시작합니다.

npm run develop

관리 대시보드에서 미디어 라이브러리로 이동하여 통합을 테스트합니다. 이미지를 업로드하려면 + Add new assets를 클릭하십시오.



성공적으로 업로드되면 터미널의 상태 코드는 200이거나 Cloudinary 대시보드를 확인하면 Strapi를 통해 업로드된 이미지가 표시됩니다.

결론

이 게시물은 Cloudinary을 Strapi Headless CMS 프로젝트와 연결하는 단계를 다룹니다.