본문 바로가기

웹 프로그래밍

STRAPI 구현

STRAPI 란?

STRAPI는 DB와 쉽게 연동해서 RESTful 또는 GraphQL 방식으로 데이터를 받고 내주는 백엔드 역활을 해주는 툴이라고 볼 수 있다.

headless CMS

CMS는 저작물 관리 시스템(Content Management System)의 약자로 글이나 사진등의 컨텐츠를 CRUD하면서 관리하는 시스템을 말한다.
CMS는 DB, 백엔드, 프론트 엔드를 모두 갖추고 있는 하나의 완성된 시스템이라면, Headless CMS는 프론트엔드를 뺀 CMS라고 볼 수 있다.
즉 STRAPI가 Headless CMS구조의 백엔드를 책임진다.

STRAPI 설치 방법

STRAPI의 구현 방법은 간단하다 YARN과 NPM, 몽고DB가 설치되어 있다면 쉽게 가능하다.

yarn create strapi-app cms

## mongo 커넥터 추가
yarn add strapi-connector-mongoose

## 커맨드 명령어 실행 가능하도록 추가 전역 설치
npm install strapi@alpha -g

# graphql 사용 추가
yarn strapi install graphql

server.js


module.exports = ({ env }) => ({ 
    host: env('HOST', '0.0.0.0'), 
    port: env.int('PORT', 포트번호), 
    admin: { 
        auth: { 
            secret: env('ADMIN_JWT_SECRET', 'jwt토큰'), }, 
    }, 
});

database.js


module.exports = ({ env }) => ({ 
    defaultConnection: 'default', 
    connections: { 
        default: { 
            connector: 'mongoose', 
            settings: { 
                client: 'mongo', 
                host: env('DATABASE_HOST', 'localhost'), 
                port: env.int('DATABASE_PORT', 27017), 
                database: env('DATABASE_NAME', 'cms'), 
                username: env('DATABASE_USERNAME', 'admin'), 
                password: env('DATABASE_PASSWORD', 'password'), 
            }, 
            options: { 
                authenticationDatabase: env('AUTHENTICATION_DATABASE'), 
                ssl: env('DATABASE_SSL'), 
            }, 
        }, 
    }, 
}); 

추가 플러그인 설치


# strapi sitemap 설치

yarn add strapi-plugin-sitemap

# Responsive image 설치

yarn add strapi-plugin-responsive-image

# Entity Relationship Chart 설치

yarn add strapi-entity-relationship-chart

# ToastUI Wysiwyg 설치

yarn add strapi-plugin-wysiwyg-toastui  

이 외에도 많은 플러그인이 있는데 strapi를 참고하길 바란다.

strapi 구현 모습

'웹 프로그래밍' 카테고리의 다른 글

Webpack이란 무엇인가  (0) 2021.10.08
Rest API  (0) 2021.09.26
[웹 프로그래밍] 스토리지와 쿠키  (0) 2021.09.13
package.json의 역할  (0) 2021.09.07
크로스 브라우징(Cross browsing)  (0) 2021.09.03