[Netlify] 티스토리 RSS 호출 Function만들기

취미로 수정하고 있는 개인 CV 페이지가 있는데 여기에 최신 티스토리 블로그 작성글을 추가하고 싶어졌다. 티스토리에서 제공하는 RSS 를 활용하여 기능을 추가 하기로 했다.

 

기존의 사이트는 React로 만들어서 Netlify에 배포하고 있는데, 프론트 페이지만 있는 사이트다 보니 티스토리 RSS API호출시 CORS에러가 발생한다. 이 간단한 호출 기능 때문에 별도의 Server를 만들기는 애매해서 알아보던중 Netlify Function이라는 것을 알게 되었다.

 

Netlify Functions은 서버리스 함수를 통해 동적인 백엔드 기능을 손쉽게 추가할 수 있는 기능이다. 이 함수들은 AWS Lambda를 기반으로 하며, Netlify는 이를 쉽게 배포하고 관리할 수 있는 인터페이스를 제공한다. Netlify Functions를 사용하면 복잡한 서버 구성이 필요 없이, 필요한 API와 서버 기능을 빠르게 추가할 수 있다.

 

무료버전은 월간 125,000호출 까지 무료로 제공하고 그 이상은 유료 결제를 해야 하지만, 개인 플젝 정도는 무리 없이 이용 가능할듯함.

 

사용법은 간단하다.

 

1) 최상위 경로에 Netlify 폴더를 생성 후, 그 하위에 functions폴더를 생성한다.
생성한 functions 폴더에 API호출 스크립트를 작성한다.

이때 API 스크립트는 node.js환경임을 주의 해야 한다.

 

const fetch = require("node-fetch")

exports.handler = async function (event, context) {
  try {
    const response = await fetch("https://anji0.tistory.com/rss")
    const data = await response.text()
    return {
      statusCode: 200,
      headers: {
        "Content-Type": "application/xml",
      },
      body: data,
    }
  } catch (error) {
    console.error("Error fetching RSS feed:", error)
    return {
      statusCode: 500,
      body: JSON.stringify({ error: "Failed to fetch RSS feed" }),
    }
  }
}

 

2) netlify.toml 파일을 생성후 작성한다.

#netlify.toml

[build]
  command = "npm run build"  
  publish = "build" 

[functions]
  directory = "netlify/functions"

[build.environment]
  CI = "false" # 나는 이 부분이 없으면 빌드시 에러가 발생하여 작성. 에러가 안난다면 안넣어도 됨.

 

3) 로컬에서 테스트

API를 호출하는 URL "/.netlify/functions/파일명" 으로 작성해주면 된다.

이후 Netlify cli를 통해 로컬 환경에서 실행 해 본다.

* 기존에는 npm run을 통해 실행 했으나, Netlify Functions을 로컬에서 테스트 하기 위해서는 Netlify dev를 통해 실행해야 확인 가능하다.

 

최종 접속은 8888포트로 하면 된다.

 

api실행 조회를 하고 싶다면, 8888뒤에api경로를 붙여 조회하면 된다.

 

 

잘 동작하는 것을 확인하면 빌드후 배포 하면 완료 !