QDD 1-4. Strapi Headless CMS 및 Cloudinary로 백엔드 구성하기

📍개요

포럼 관련 정보를 저장할 데이터베이스와 이미지 저장용 스토리지를 사용하기 위해, strapi 앱을 만들고 aws s3와 연동한다

 

📍strapi 는?

- strapi의 뜻은 bootstrap your API 에서 유래했다

- 오픈소스 Headless CMS 로서 직접 백엔드를 구성하는 것 대신 스트래피를 선택할 수 있다

 

📍strapi 시작하기

yarn 또는 npx create 를 사용하여 CLI를 통해 strapi 패키지를 자동으로 설치해주는 앱을 시작할 수 있다

yarn create strapi-app my-project
or
npx create-strapi-app@latest my-project

 

이후 CLI에서 quickstart를 사용할지 물어본다

- quickstart를 사용하면 DB가 SQLite로 자동으로 고정된다

- 아니면 MySQL, MariaDB, PostgreSQL 을 선택할 수도 있다

 

설치가 완료되면 strapi 회원가입 및 어드민 페이지로 이동한다

 

📍클라우디너리와 연동하는 플러그인 설치

1. 패키지 설치

yarn add @strapi/provider-upload-cloudinary
# or
npm i @strapi/provider-upload-cloudinary

 

2. 스트래피 앱의 설정 파일 생성

./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: {},
      },
    },
  },
});

 

3. middlewares.js 수정

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': ["'self'", 'data:', 'blob:', 'dl.airtable.com', 'res.cloudinary.com'],
          'media-src': ["'self'", 'data:', 'blob:', 'dl.airtable.com', 'res.cloudinary.com'],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

 

4. .env 파일에 클라우디너리 API 키 추가

클라우디너리에 로그인한 다음 대시보드 패널에서 개인 정보를 확인하여 .env 파일에 넣어준다

⭐.env 파일은 절대 노출되지 않도록 주의!

CLOUDINARY_NAME=
CLOUDINARY_KEY=
CLOUDINARY_SECRET=
정보를 추가한다

 

📍스트라피 admin 페이지에서 collection type 추가하기

collection type은 테이블과 비슷한 개념이다

 

먼저 admin 유저를 추가하기 위해 기존에 존재하는 User collection type으로 이동

admin 유저의 이름과 이메일만 입력하고 추가한다

 

그리고 이제 사용할 Forum collection type 을 추가한다

 

추가가 완료되면, public에서 Forum collection type에 데이터를 CRUD 할 수 있게 하기 위해 setting으로 이동

 

Role 에서 Forum을 클릭하고 모든 권한 부여

 

또한 이미지를 업로드할 수 있게 하기 위해 아래의 Upload 에서 upload 권한 부여

 

📍data fetching

Content Manager 탭에서 데이터 추가했으면 fetching 해본다

 

SELECT *

http://localhost:1337/api/forums?populate=*

⭐populate를 붙이지 않으면 media contents (이미지) 가 불러와지지 않는다