Nuxt와 Vercel로 서버리스 마크다운 블로그 구축하기

Nuxt와 Vercel은 이상적인 조합으로서, 서버리스 환경에서 매력적인 웹 애플리케이션을 구축할 수 있습니다. 이번 포스트에서는 이 두 기술을 활용하여 OpenAI GPT API로 마크다운 콘텐츠를 생성하고, GitHub에 자동으로 커밋하는 마크다운 블로그를 만드는 방법을 살펴봅니다.

🔐 필요한 키

이 프로젝트를 진행하기 위해 필요한 것들은 다음과 같습니다:

OPENAI_API_KEY: OpenAI API를 사용하기 위한 키입니다. 이 키는 Vercel 환경 변수에 저장합니다.
GITHUB_TOKEN: GitHub Personal Access Token입니다. 이를 이용해 GitHub에 커밋을 합니다.
Nuxt 서버 API: 우리가 작성할 서버리스 함수입니다. 이 함수는 OpenAI와 GitHub API를 연동합니다.

🌐 흐름

이 서버리스 마크다운 블로그의 전체 작동 방식은 다음과 같습니다:

사용자가 웹 클라이언트에서 주제를 입력합니다 (예: “판도라 이야기 써줘”).
이 주제를 바탕으로 Nuxt API (/server/api/generate.post.ts)가 호출됩니다.
이 API는 다음 작업을 수행합니다:
- OpenAI API를 호출하고 응답 텍스트를 받습니다.
- 받은 텍스트를 .md 형식으로 포맷팅합니다.
- GitHub API를 이용해 .md 파일을 GitHub에 업로드합니다. (PUT /contents/xxx.md)
이후 블로그는 자동으로 생성되고 커밋이 이루어집니다.

이러한 흐름은 아래 서버 코드에서 확인할 수 있습니다:

export default defineEventHandler(async (event) => {
  const { title, prompt } = await readBody(event)

  const gptResponse = await $fetch('https://api.openai.com/v1/chat/completions', {
    method: 'POST',
    headers: {
      Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
      'Content-Type': 'application/json'
    },
    body: {
      model: 'gpt-4',
      messages: [{ role: 'user', content: prompt }]
    }
  })

  const content = gptResponse.choices[0].message.content
  const base64Content = Buffer.from(`# ${title}\n\n${content}`).toString('base64')

  await $fetch(`https://api.github.com/repos/you/blog/contents/content/${title}.md`, {
    method: 'PUT',
    headers: {
      Authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
      Accept: 'application/vnd.github+json'
    },
    body: {
      message: `Add post: ${title}`,
      content: base64Content,
      branch: 'main'
    }
  })

  return { success: true }
})

이 글에서는 Nuxt와 Vercel을 이용해 서버리스 마크다운 블로그를 구축하는 방법을 살펴보았습니다. OpenAI를 이용해 자동으로 콘텐츠를 생성하고, 이를 GitHub에 커밋하는 흐름을 Vercel 서버리스 함수 안에서 완벽히 처리할 수 있었습니다. FastAPI나 Express 같은 별도의 백엔드 서버를 필요로 하지 않는다는 점에서 매력적인 해법이죠.

이제 이 프로세스를 템플릿화하거나, 사용자가 블로그에 바로 글을 작성할 수 있도록 UI를 추가하는 등 다양한 확장이 가능합니다. 서버리스의 세계에서는 가능성이 무궁무진하니까요.

Nuxt와 Vercel로 서버리스 마크다운 블로그 구축하기

🔐 필요한 키

🌐 흐름

💡 마무리