소개

JAMStack으로 서비스를 만들고 싶었고, 전부터 신경이 쓰인 헤드리스 CMS Contentful을 사용해 보았습니다.
브라우저에서 게시하는 것은 쉽지만 프런트에서 Contentful으로 POST 요청을하는 방법이 문서를 봐도 알기 어려웠기 때문에 정리했습니다.
여러가지 방법이 있다고 생각하므로, 어디까지나 일례로서 참고가 되면 다행입니다.

설정 조건

【대상】 Contentful을 도입한 것으로, 이미 GET의 방법까지는 확인이 끝난 분.

contentful-cli 넣기( contentful-cli 배포 명령 확인 )

【0부터 시작하는 경우】 다음 설정으로 시작합니다.

Nuxt.js로 디렉토리 만들기 (nuxt 패키지 설치)

Contentful 소개

Contentful의 도입부터 GET까지는 이 기사가 참고가 됩니다
(인용: 구루타카 로그 「Nuxt 에 Contentful 를 설정하는 방법. 도입으로부터 데이터 취득까지의 흐름을 정리해 본【스쿠쇼 있음】」 )

POST용 API 키 만들기

나만의 POST용 API 키(토큰)를 만들어야 합니다.

① Contentful에서 작성된 공간 메뉴의 Settings에서 API Keys를 선택

② Content management tokens 를 선택하고 「Generate personal token」버튼으로 자신 전용의 토큰을 작성한다(토큰은 메모해 둔다)

환경 ID · 콘텐츠 유형 ID 확인 (메모)

환경 ID ... 공간 메뉴 "Setting"→ "Environments"→ "Environment ID"


콘텐트 타입 ID ························································································································································································· CONTENT TYPE ID

.env에서 변수로 nuxt.config.js에 추가

.env 에 메모한 상기 3 개를 추기합니다. 이번에 자작한 토큰은 「CTF_FOR_MY_APP_TOKEN 」이라고 하고 있습니다.
그런 다음 nuxt.config.js 파일의 env 열에 다음과 같이 추가합니다.

스크립트에 코드 작성

POST용의 페이지를 이번은 Nuxt.js 로 작성하고 있으므로, script 태그 이하에 기술.
양식 입력 데이터는 v-model로 연결됩니다.
먼저 필요한 상수를 정의합니다.
토큰은 방금 설정한 자작 토큰의 내용입니다.

new.vue

const contentful = require('contentful-management')
const client = contentful.createClient({
  accessToken: process.env.CTF_FOR_MY_APP_TOKEN
})

양식의 데이터 부분도 처음에는 null로 입력해 둡니다. (단어장으로 v-model로 연결됨)

new.vue

data() {
  return {
    formData: {
      word: null,
      meaning: null
    }
  }
},

POST용 메서드 만들기

Contentful 공간에 액세스하여 환경 ID를 호출하여 새 항목 (POST 내용)을 작성하는 흐름입니다.
환경 ID 없이 최초로 실시했습니다만, 비추천이라고 하는 것이므로 재작성했습니다.
createEntry 할 때 콘텐츠 형식 ID가 필요합니다.

new.vue

methods: {
  async postWord() {
    const mySpace = await client.getSpace(process.env.CTF_SPACE_ID)
    const myEnvironment = await mySpace.getEnvironment(
      process.env.CTF_ENVIRONMENT_ID
    )
    const res = await myEnvironment.createEntry(
      process.env.CTF_CONTENT_TYPE_ID,
      {
        fields: {
          word: {
            'en-US': this.formData.word
          },
          meaning: {
            'en-US': this.formData.meaning
          }
        }
      }
    )
    await res.publish()
    console.log(res)
  }
}

주의점

Contentful 의 사양상, fields 내에 POST 하는 내용을 넣어 갑니다만, 상기와 같이 밸리데이션을 지정해 오브젝트 형식으로 하지 않으면 에러가 나 버리므로 요주의입니다.

그리고, POST 하는 것만이라면 드래프트인 채이므로, publish() 로 마지막에 공개 상태로 변경하고 있습니다.

요약

Contentful은 POST로 요청할 때 객체를 쓰는 방법이 특수하고 문서를 참고해도 알기 어려운 부분이 많습니다만, GET로 취급하는 경우는 여러가지 취급 방법이 생길 것 같기 때문에 가능성은 크 것 같습니다.
사양에 익숙해지면 사용하기 쉽기 때문에 (물론 Contentful 사이트에서 직접 게시하는 것은 간단합니다), 다른 사람도 사용하고 싶습니다