Gatsby와 Contentful 연동하기

Gatsby와 Contentful 연동하기

 

최근에 Gatsby로 블로그를 구축하면서 Contentful을 연동했습니다. Gatsy와 컨텐츠를 분리하고 싶어 CMS를 찾던 중, Contentful이 괜찮아 보여 도입을 했습니다. 시행착오도 많아, 연동 구글링 하시는 분들에게 조금이나마 도움이 되었으면 좋겠습니다.

 

Contentful

• Headless CMS (Content Management System) 입니다.
• 간편하게 Markdown으로 컨텐츠를 관리할 수 있습니다.
• Record (entries + assets) 25k까지 무료입니다.

Starter 패키지로 gatsby-source-contentful도 있으니 해당 스타터 패키지로 시작하셔도 무방합니다.

Contentful 가입 후 모델생성하기

 

간단하게 다음과 같은 Post Model을 생성해보겠습니다

• Post
  • title
  • slug (url이 될 slug)
  • content (마크다운 문법으로 작성 될 포스트 내용)
    
    

 

(content는 Text -> Long Text로 지정해야 마크다운 작성이 가능합니다)

Post 생성

 

Model 생성 후, 다음과 같이 Post를 생성해 봅니다. 작성 후 publish까지 하면 정상적으로 contentful 데이터를 받아올 수 있습니다.

 

gatsby-source-contentful 설치

 

Gatsby 프로젝트에 gatsby-source-contentful을 설치합니다.

 yarn add gatsby-source-contentful 

 

설치 후 __gatsby-config.js__ 에 플러그인을 추가해줍니다.

module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-contentful`,
        options: {
          spaceId: process.env.CONTENTFUL_SPACE_ID,
          accessToken: process.env.CONTENTFUL_ACCESS_TOKEN,
        },
     },
    ],
 }

 

플러그인 추가에 필요한 CONTENTFUL_SPACE_ID와 CONTENTFUL_ACCESS_TOKEN는
CONTENTFUL -> SETTINGS -> API에서 확인할 수 있습니다.
두 키 모두 외부에 노출되면 안되므로 각각 .env.development, env.production을 루트폴더에 생성해 저장해 두고 github에는 안 올라가도록 .gitignore에 추가해주세요.

배포중인 서비스가 github page, vercel 혹은 다른 서비스라면 해당 서비스의 deploy 환경변수에 두 값을 저장해둬야 배포환경이 설정됩니다.

 

Contentful 데이터로 페이지 작성하기

 

플러그인까지 정상적으로 저장을 했으면 Gatsby Graphql http://localhost:8000/___graphql 에서 다음과 같이 정상적으로 Contentful 데이터가 보입니다.

 

(markdown 문법으로 작성한 content도 정상적으로 보입니다)

Contentful 데이터가 정상적으로 뿌려짐을 확인했으니, 해당 데이터를 가지고 gatsby-node.js에서 Post 페이지를 만들어 줍니다.

 

const result = await graphql(`
  {
    allContentfulBlog {
        nodes {
            id
            title
            slug
            createdAt
          }
      }
  }
`
const contentfulPosts = result.data.allContentfulPost.nodes;

contentfulPosts.forEach(({ title, slug, createdAt }) => {
    createPage({
        path: `/${slug}`,
        component: postTemplate,
        context: {
            title,
            slug,
        },
    });
});

 

contentful에서 작성한 slug로 url을 지정해주고, 해당 url로 접속하면 다음과 같은 예시 화면이 나옵니다.

 

 

하지만 아쉽게도 마크다운으로 작성한 content 내용이 변환되지 않고 그대로 노출되고 있습니다.
따라서 해당 마크다운을 HTML로 변환시켜주는 작업이 필요합니다.

 

gatsby-transformer-remark 설치

yarn add gatsby-source-contentful

 

패키지 설치 후 전과 동일하게 gatsby-config.js에 플러그인을 등록합니다.

 

plugins: [
  {
    resolve: `gatsby-transformer-remark`,
      options: {
        // Footnotes mode (default: true)
        ootnotes: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [],
       },
    },
  ],

 

플러그인 등록 후 graphqlQuery에서 Markdown -> HTML로 변환을 원하는 부분에 childMarkdownRemark 으로 감싸줍니다.

 

export const postQuery = graphql`
  query MyQuery($slug: String!) {
    contentfulPost(slug: { eq: $slug }) {
    id
    slug
    title
    content {
          childMarkdownRemark {
                html
          }
      }
  }
}
`;

 

쿼리 수정 후 Html을 출력시키면 다음과 같이 원래 마크다운 형태로 출력이 됩니다.

 

Contentful에 Webhook 적용하기

 

우리는 Contentful에 컨텐츠를 등록하고, 수정 하는 작업을 거치게 됩니다. 하지만 Gatsby는 정적 사이트 생성기이기 때문에, 해당 컨텐츠가 수정 될 때마다 다시 배포를 해야합니다. 컨텐츠가 수정 될 때마다 수동으로 배포하는 것은 번거롭기에, webhook을 적용 해 컨텐츠가 수정이 될 때마다 자동으로 배포하게 설정해보겠습니다.
(저는 Vercel로 배포를 해, Vercel 기준으로 설명하겠습니다. Github Page, Netlify 사용하시는 분들은 해당 서비스의 webhook을 등록 해 주면 됩니다.)

• Vercel 프로젝트에서 Settings -> Git으로 들어갑니다.
• Deploy Hooks 메뉴에서 원하는 hook 이름과 자동으로 배포가 되는 branch 이름을 입력합니다. (master 혹은 main 등등)
• Hook을 생성하고 복사해줍니다.

 

 

• Contenful -> Settings -> Webhooks -> Add Webhook으로 들어갑니다.
• 좀전에 생성한 webhook의 name, api를 입력하고 (post방식) active로 바꿔줍니다.
• 해당 작업까지 마무리하면, 이제 컨텐츠의 내용이 수정 될 때마다 Gatbsy가 재배포 됩니다.

 

 

마무리

 

지금까지 Gatsby와 Contentful 연동 및, HTML 변환으로 Markdown 문법까지 출력해 봤습니다. 버전 맞추기도 힘들고 연동이 쉽지는 않았지만 Contentful의 강력한 CMS 기능을 사용할 수 있어서 많은 분들에게 추천드립니다. 블로그 뿐만 아니라 사이트의 간단한 페이지, 및 다양한 부분에서 유용하게 사용할 수 있을것 같습니다.