Strapi Headless CMS + GraphQL을 사용한 평가 및 조정

최근에 우리는 채용 웹사이트를 개발했습니다. 우리는 프로젝트 실행 중에 범위, 예산 및 시간을 유지하면서 레거시 코드 통합의 위험을 완화해야 하는 과제에 직면했습니다. 핵심 요구 사항은 Salesforce 및 XING과 같은 API의 통합이었습니다. 우리는 이전 개발자에 대한 액세스가 제한되어 있어 예상치 못한 잠재적인 병목 현상으로 인해 위험이 증가했습니다.

우리가 선택한 접근 방식은 개발자와 클라이언트(웹 사이트 콘텐츠를 유지 관리하는 사람)에게 지나치게 복잡하지 않으면서 우리 사양에 맞는 충분한 기능을 갖춘 가벼운 CMS 백엔드를 찾는 것이었습니다.

우리가 비교한 다양한 헤드리스 CMS 옵션(예: Contentful , Prismic , Netlify CMS 및 Kirby )에서 우리는 Strapi가 우리의 경우에 가장 적합하다는 것을 확인했습니다. Strapi(NodeJS Vue.JS 기반 CMS)는 최소한의 UI와 React 및 GraphQL 프런트엔드 기술 스택과의 간단한 통합을 확신합니다.

스트라피의 좋은점은?

미니멀하고 깔끔한 UI

매우 간단한 역할 및 사용자 관리

데이터 유형(컬렉션), 페이지 및 모듈용 끌어서 놓기 빌더

직관적인 콘텐츠 관리

GraphQL 통합 + 플레이그라운드(CMS 관리자 패널에 플러그인을 설치해야 함)

성장하는 커뮤니티 및 지속적인 개발

자체 호스팅 CMS(데이터 개인 정보 보호에 적합!)

개선의 여지는 어디에 있습니까?

긴 초기 설치 프로세스(Docker 컨테이너 사용)

기본 Docker 이미지가 Gitlab CI/CD 및 Ansible과 쉽게 통합될 준비가 되지 않았습니다

.

사용자 및 콘텐츠에 대한 JWT 인증 프로세스에 대해 약간 지친 설명서

일부 버그가 있는 초기 개발 단계(예: 데이터 모델/스키마를 변경할 때마다 도커 컨테이너를 다시 시작해야 함)

결론: Strapi는 우리 프로젝트에서 어떻게 작동했습니까?

Docker를 사용하여 Strapi를 설정하기 위한 초기 투쟁은 궁극적으로 웹 사이트 개발 중에 귀중한 시간을 절약하게 되었습니다. 우리는 React 구성 요소를 빌드하고 CMS 데이터 스키마와 잘 매핑할 수 있습니다(아래 해킹 참조). GraphQL을 사용하면 데이터를 쉽게 쿼리할 수 있습니다. Strapi + GraphQL 플레이그라운드는 실시간으로 쿼리를 디버그할 수 있는 동시에 쿼리 작성을 매우 간단하게 만들었습니다. 결국 이 기술 스택은 전체 개발 시간을 거의 30% 단축했습니다.

이를 통해 일정을 유지하면서 레거시 코드를 통합하고 디버깅하는 데 사용한 개발 시간을 확보했습니다. 기존 Strapi REST API는 잘 문서화되어 있어 Salesforce API와 자체 데이터베이스 간에 데이터를 동기화하는 워크플로를 구축했습니다.

우리 클라이언트는 직관적인 UI 때문에 Strapi를 좋아하고 개발자로서 콘텐츠 품질을 유지하고 디자인 손상을 방지하기 위해 텍스트 길이 제한, 필수 양식 필드 등과 같은 입력 제한을 적용할 수 있습니다.

Strapi로 개발할 때 세 가지 조정

(1) 쿼리 제한 제거

초기에 반환되는 GraphQL 쿼리는 100개 항목으로 제한됩니다. 이는/extensions/graphql/config의 settings.json을 사용하여 변경할 수 있습니다. 자세한 내용은 설명서를 참조하십시오.

{
  "endpoint": "/graphql",
  "tracing": false,
  "shadowCRUD": true,
  "playgroundAlways": false,
  "depthLimit": 7,
  "amountLimit": 1000,
  "federation": false
}

(2) Strapi 마크업을 HTML로 시각화

Rich Text 콘텐츠를 시각화하기 위해 React Markup을 사용했습니다. 그러나 밑줄과 같은 일부 서식은 수동으로 처리해야 합니다.

(3) 프런트엔드와 백엔드의 일관된 정보 아키텍처

React 구성 요소 속성을 1:1로 Strapi 데이터 모델에 매핑했습니다. 이것은 기술 전반에 걸쳐 일관성을 만듭니다.

CMS 백엔드:


GraphQL 쿼리:

또한 GraphQL 조각을 사용하여 코드를 재사용 가능하고 CMS 스키마가 변경될 때 쉽게 변경할 수 있도록 했습니다.

export const BUTTON_FRAGMENT = `
  title
  className
  fontColor
  buttonColor
  type
  route
`;

Typescript로 컴포넌트 반응:

export type ButtonProps = {
  title: string,
  className?: string,
  fontColor?: string,
  buttonColor?: string,
  type?: string,
  onClick?: () => void,
  route?: string,
};

const Button = (props: ButtonProps): JSX.Element => {
  <ButtonEl className={`${props.className || ''} button`} onClick={props.onClick}>
  ...
  </ButtonEl>
};

export default Button;