Netlify Serverless Functions + GitHub를 사용하여 Gatsby에 주석 추가

Gatsby 웹 사이트에서 사용자 의견을 수락하고 GitHub에 저장하고 싶었습니다. 마찬가지로 주석이 내 저장소에 있는 comments.json라는 파일로 바로 들어가길 원했습니다. 그래서 나는 다음과 같이 간단한 것을 사용할 수 있습니다.

import comments from "../comments.json"

내 사이트의 코드에서. 데이터베이스가 없습니다. 수십 개의 네트워크 요청을 하는 타사 플러그인이 없습니다.

Netlify serverless functions 덕분에 GitHub의 API를 사용하여 제출된 댓글의 데이터로 이 저장소를 변경할 수 있었습니다. 또한 내 비밀 API 자격 증명을 숨겼습니다.

이 흐름을 사용하는 프로토타입(healeycodes/gatsby-serverless-comments)을 만들었습니다.

👩 사용자가 댓글을 입력하고 제출을 클릭합니다.

⚙️ 서버리스 함수가 ​​데이터를 수신하고 GitHub의 API에 도달합니다.

🔧 기존comments.json을 읽고 새로운 댓글을 추가하여 저장합니다.

🚧 새 커밋이 Netlify 빌드를 트리거합니다.

✅ 새로운 버전의 웹사이트가 배포되었습니다!

새 댓글은 첫 번째 클릭 후 ~30초 ⏰에 사용자에게 표시됩니다.

서버리스 기능

사용자의 댓글을 받는 서버리스 기능을 통해 픽해보자. 설정 → 배포에서 Netlify의 웹사이트를 통해 설정할 수 있는 일부 상수를 사용합니다.



이 함수는 Node.js로 작성되었으며 Netlify's documentation에 설명된 handler 함수를 내보냅니다.

// comment.js

const fetch = require("node-fetch")

const auth = process.env.GITHUB_PAT_TOKEN
const repo = process.env.GITHUB_REPO
const user = process.env.GITHUB_USER
const api =
  "https://api.github.com/repos/" +
  user +
  "/" +
  repo +
  "/contents/src/comments.json"

exports.handler = async function(event, context, callback) {
  // Use the Contents API from GitHub
  // https://developer.github.com/v3/repos/contents/#get-contents
  const existingFile = JSON.parse(
    await fetch(api, {
      headers: {
        // Pass some kind of authorization
        // I'm using a personal access token
        Authorization:
          "Basic " + Buffer.from(user + ":" + auth)
            .toString("base64"),
      },
    }).then(res => res.text())
  )

  // The file's content is stored in base64 encoding
  // Decode that into utf-8 and then parse into an object
  let comments = JSON.parse(
    Buffer.from(existingFile.content, "base64").toString("utf-8")
  )

  // This is the user submitted comment
  // Perhaps we would do some validation here
  const newComment = JSON.parse(event.body)

  // Update the comments
  comments.push({
    author: newComment.author,
    email: newComment.email,
    message: newComment.message,
    date: Date.now(),
  })

  // Use the Contents API to save the changes
  const res = await fetch(api, {
    method: "PUT",
    headers: {
      Authorization:
        "Basic " + Buffer.from(user + ":" + auth).toString("base64"),
    },
    body: JSON.stringify({
      message: "New comment on " + new Date().toDateString(),

      // Turn that object back into a string and encoded it
      content: Buffer(JSON.stringify(comments)).toString("base64"),

      // Required: the blob SHA of the existing file
      sha: existingFile.sha,
    }),
  }).then(res => res.text())

  callback(null, {
    statusCode: 204,
  })
}

잠재적인 단점

누군가 귀하의 웹사이트에 스팸 댓글을 달면 어떻게 됩니까? 글쎄, 당신은 당신의 빌드 시간 제한에 매우 빨리 도달할 것입니다.

또한 두 사람이 동시에 댓글을 달고 이전 댓글을 덮어쓰는 작은 창(API 호출 사이의 10-100밀리초)도 있습니다.

이 두 가지에 대한 수정은 서버리스 기능을 변경하여 의견 변경으로 풀 요청을 여는 것입니다. 이제 댓글이 지연되지만 악의적인 행동으로부터 스스로를 보호하고 적절성을 위해 댓글을 걸러낼 수도 있습니다. 데이터 손실은 없지만 병합 충돌을 처리할 필요가 거의 없습니다.

내 Netlify 리뷰

Netlify는 Jamstack 애플리케이션에 큰 돈을 걸고 있습니다. 나도 할 내기다.

그들의 개발자 경험(DX)은 현재 최고입니다. 제대로 작동하는 제품에 대해 읽은 다음 그렇게 되는 경우는 드뭅니다! 최근에 Netlify의 빠른 배포 덕분에 변경 사항을 서둘러 실행하여 몇 분 안에 문제를 해결할 수 있었습니다.

이것은 미래의 성공에 어떤 의미가 있습니까? 음, Tiny.cloudpoints out는 다음과 같습니다.

DX is kind of a big deal. Developers can play a huge role in the uptake of your product, especially when you consider they are likely to provide guidance on what tools their organization should invest in, even though the final decision usually happens at the executive level.

Netlify의 개발자 도구를 사용하면 구성을 망칠 필요 없이 지금 읽고 있는 것과 같은 프로토타입을 만들 수 있습니다. My Gatsby website은 넉넉한 무료 계층으로 호스팅되며 전송 및 호스팅은 딸꾹질이 없었습니다.

나는 그들을 추천합니다.


코드 및 개인 성장에 대해 내newsletter에 가입한 300명 이상의 사람들과 함께하세요!

기술에 대해 트윗합니다.