GatsbyJS에서 Headless CMS(Contentful, Strapi) 연동하기: 콘텐츠 관리 자동화

GatsbyJS에서 Headless CMS(Contentful, Strapi) 연동하기: 콘텐츠 관리 자동화

정적인 Gatsby 사이트라도 Headless CMS와 연결하면 실시간 콘텐츠 관리가 가능해집니다.
이번 글에서는 Gatsby와 대표적인 CMS인 Contentful과 Strapi를 연동하는 방법을 단계별로 설명하겠습니다. 🚀

---

1. Headless CMS란 무엇인가요?

✅ Headless CMS의 특징

항목 설명

컨텐츠 중심 구조	백엔드(CMS)는 콘텐츠 제공, 프론트엔드는 자유롭게 디자인
API 기반 통신	REST 또는 GraphQL API로 콘텐츠 데이터 제공
관리 UI 제공	Markdown, 이미지, 태그 등을 GUI로 관리
정적 사이트와 호환	Gatsby, Next.js, Hugo 등 SSG와 연동 가능

🚀 정적 사이트 + CMS 구조는 빠르면서도 유지보수가 쉬운 현대적 웹사이트 구조입니다.

---

2. Contentful + Gatsby 연동하기

반응형

✅ Contentful 기본 설정

1. https://www.contentful.com 가입
2. 공간(Space) 생성 → Content Model 정의 (예: BlogPost)
3. Content Type에 title, slug, body, image 등 필드 추가
4. API 키 생성: Space ID, Access Token 복사

---

✅ Gatsby에 플러그인 설치

npm install gatsby-source-contentful

📌 gatsby-config.js 설정

require("dotenv").config();

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

📌 .env 파일에 환경변수 등록

CONTENTFUL_SPACE_ID=xxxxx
CONTENTFUL_ACCESS_TOKEN=yyyyy

---

✅ GraphQL로 데이터 확인

http://localhost:8000/___graphql 접속 후 아래 쿼리 입력:

{
  allContentfulBlogPost {
    nodes {
      title
      slug
      body {
        raw
      }
    }
  }
}

🚀 이제 Contentful에서 작성한 콘텐츠를 Gatsby에서 사용할 수 있습니다!

---

3. Strapi + Gatsby 연동하기

✅ Strapi 기본 설정

1. https://strapi.io 접속 → npx create-strapi-app으로 프로젝트 생성
2. Admin UI에서 Collection Type 생성 (예: Post)
3. 필드 추가: title, slug, content, thumbnail 등
4. API 권한 허용
   • Settings > Roles > Public에서 GET 권한 허용

---

✅ Gatsby 플러그인 설치

npm install gatsby-source-strapi

📌 gatsby-config.js 설정

module.exports = {
  plugins: [
    {
      resolve: "gatsby-source-strapi",
      options: {
        apiURL: "http://localhost:1337",
        collectionTypes: ["post"],
      },
    },
  ],
};

---

✅ GraphQL로 데이터 확인

{
  allStrapiPost {
    nodes {
      id
      title
      slug
      content
    }
  }
}

🚀 Strapi도 Gatsby에 콘텐츠를 동적으로 제공할 수 있습니다!

---

4. CMS 콘텐츠로 동적 페이지 생성하기

📌 gatsby-node.js 예제 (Contentful 기준)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions;
  const result = await graphql(`
    {
      allContentfulBlogPost {
        nodes {
          slug
        }
      }
    }
  `);

  result.data.allContentfulBlogPost.nodes.forEach(post => {
    createPage({
      path: `/blog/${post.slug}`,
      component: require.resolve("./src/templates/blog-template.js"),
      context: { slug: post.slug },
    });
  });
};

📌 GraphQL로 slug 기반 콘텐츠 가져오기

query ($slug: String!) {
  contentfulBlogPost(slug: { eq: $slug }) {
    title
    body {
      raw
    }
  }
}

🚀 CMS에서 관리한 블로그 글이 Gatsby 페이지로 생성됩니다!

---

5. 배포 시 CMS 데이터 최신화 전략

전략 설명

웹훅(Webhook)	CMS에서 콘텐츠가 변경되면 Gatsby 빌드를 자동 트리거
Incremental Builds	변경된 콘텐츠만 다시 빌드하여 속도 향상 (Netlify/Vercel 지원)
Gatsby Cloud 활용	Gatsby 전용 빌드/배포 플랫폼, Webhook 설정 쉬움

---

6. 결론

이번 글에서는 Gatsby에서 Headless CMS를 연동하여 콘텐츠를 효율적으로 관리하는 방법을 배웠습니다.

✔ Contentful과 Strapi를 Gatsby에 연결하여 실시간 콘텐츠 제공
✔ GraphQL을 통해 콘텐츠를 가져오고, slug로 동적 페이지 생성
✔ 자동 배포와 Webhook 연동으로 운영 효율성 향상

🚀 다음 글에서는 Gatsby에서 국제화(i18n)를 구현하는 방법을 다루겠습니다!

---