국산 헤드리스 CMS'미크로 CMS'를 시도했습니다.

이른바 Headless CMS

헤드리스 CMS는 워드프레스 등과 달리 호스트의 웹사이트와 관리 화면이 완전히 분리된 것이 특징이다.
이걸 사용하면 프런트엔드와 CMS 측면이 분리되기 때문에 각각 다른 곳에 배치할 수 있습니다.
서버가 없으면 동적 내용을 표시할 수 있다는 것이 매력이다.

Microsoft CMS

마이크로소프트 CMS는 국산 헤드리스 CMS다.
지금까지의 헤드리스 CMS 하면'콘텐츠풀'이 주류라고 생각한다.
콘텐츠풀은 일본의 서비스가 아니기 때문에 영어는 기본이지만 마이크로소프트는 기본적으로 일본어를 지원하고 일본어의 채팅 지원이 있는 것이 좋다고 생각합니다.

사용법

등록!

위 화면의 "무료 시작"또는 "신규 로그인"에서 시작합니다.
나는 특별히 어려운 점이 없다고 생각해서 사랑을 끊었다.

새 서비스

자신의 화면은 이미 서비스를 만들었지만, 새로 등록하면 대체적으로 위의 이미지와 같은 서비스를 위한 준비 화면을 만들어야 한다고 생각합니다.
'좋아하는 서비스 이름'과'도메인 이름'을 결정합니다.
도메인 이름은 유일하기 때문에 다른 사람과 접촉하지 않아야 한다.
화면 오른쪽 하단의'다음'으로 가면 그림의 설정이 완성됩니다.
참고로 그림의 로그인은 임의로 할 수 있으니 건너뛸 수 있습니다.
서비스 제작은 여기서 마치겠습니다.

새 API

다음은 외부에서 컨텐트를 가져오는 데 사용되는 API를 생성합니다.
위 이미지는 가까운 화면이 나올 것 같고, 사이드바의'+'버튼을 클릭하면 API를 만드는 화면이 나올 것 같다.
새로 제작된 서비스와 비슷하지만 API이기 때문에 다른 것이다.

새로 들어온 소식을 소재로 콘텐츠를 만들어 보려고 합니다.

이번에'알림'콘텐츠를 만들려고 하기 때문에 API명을'알림'으로 쓰는 최종점은'news'다.

용도와 취향에 따라 API의 유형을 선택하고, 이번에는 리스트 형식으로 한다.

필드 만들기

데이터베이스 테이블을 만드는 느낌으로 필드를 만듭니다.
알림에는 제목 본문 투고 날짜가 필요합니다.
따라서 제목 필드와 본문 필드를 만들고 발표 날짜와 시간은 기본값createdAt입니다. 사용하십시오.

컨텐트 투고 화면의 미리 보기 표시

Wordpress와 같은 편집기의 화면에 나타납니다.
아무 문제 없으면 끝이야.

투고 내용을 시험해 보다

"추가"단추를 누르면 제목과 본문 투고를 적당히 추가합니다
공개 버튼을 눌러 완료합니다.

API 두드려봐.

그럼, 드디어 내용을 얻으려고 합니다.

· 탭 부분의 "API"를 클릭
• X-API-KEY의 표시 버튼을 눌러 API-KEY 확인
그런 다음 자신의 도메인 이름.microcm.io/appi/v1/끝점에 대해 사용자 정의 헤더 "X-API-Key"의 Value에 위에 표시된 API-KEY를 추가하고 GET 요청을 합니다.
얻을 수 있다.
'해봐'버튼을 누르면 상대방이 어떤 형태로 답장을 했는지 확인할 수 있다.
서비스 첫 페이지에는 JavaScript에서 얻은 예도 있습니다.
https://microcms.io/

한 번 시험해 보았다

쉽고 습관적인 방법으로 하고 싶어서, CodesandBox의 Vue.js 프로젝트에서 Axios를 사용하여 가져오려고 시도합니다.
http 팟캐스트를 할 수 있다면fetch든 다른 언어든 가능합니다.

무사히 돌아오다

투고 내용은 잘 받았네.

총결산

상당히 간단한 CMS 구축과 API가 공개됐다.
제한은 있지만 무료로 제한이 있습니다.(2019년 9월 기준)
나는 이 사이트가 약간의 동적 기능이 있는 사이트(기업 사이트, 활동 알림 사이트)에 매우 적합하다고 생각한다.
엔지니어로서는 뷰, 리액트 등의 프레임과도 잘 어울린다.
아무튼 이상!