Netlify 함수와 Zapier Webhooks를 사용하여 자체 API 구축, 2부

JAMstack 응용 프로그램에서 데이터를 보내는 데는 약간의 작업이 필요할 수 있지만, 일반적으로 상당히 간단하다.API 또는 서버 함수 없음을 호출하려면 표준 JavaScript가 조금만 필요합니다.그런데 데이터 수신은요?애플리케이션 소스가 정적 상태일 때 API는 어떻게 애플리케이션과 통신합니까?
이 점을 실현할 수 있는 방법은 매우 많지만 본 강좌에서 우리는 다양한 도구 조합을 사용하는 해결 방안을 연구할 것이다. 예를 들어 Webhooks by Zapier, Netlify Functions, GitHub API 등이다.이 도구들은 우리가 외부 출처에서 온 데이터를 수신하고 필요한 상세한 정보를 우리 사이트의 원본에 추가하며 새로운 상세한 정보를 사용하여 자동으로 사이트를 재구성할 수 있도록 할 것이다.

Check out of this series that covered sending data from your application using a Zapier Webhook and Netlify Functions.

Note webhooks by Zapier are currently a premium feature.

이 글의 예시 코드는 https://github.com/remotesynth/webhooks 에서 얻을 수 있다.

Netlify 기능 설정

저희가 구축한 예는 Zapier를 사용하여 RSS 요약 목록의 변경 사항을 보고 Netlify 함수에 알립니다. 이 함수는 새로운 게시물 제목과 URL을 게시물 그룹을 포함하는 데이터 파일에 추가합니다.이것은 사이트 업데이트와 재건을 초래할 것이다.
Netlify 함수를 만드는 것부터 시작하겠습니다.이것은 Zapier 웹 훅이 Zapier를 설정하기 전에 대화해야 하는 API를 테스트하고 구축할 수 있도록 합니다.먼저 이렇게 하는 이유는 Zapier에 웹 훅을 테스트하는 단점 URL이 있기 때문에 모든 과정을 간소화할 수 있다.
우선, Netlify 함수를 놓을 폴더를 만듭니다. (마인 lambda 이라고 명명하지만, 무엇이든 명명할 수 있습니다.다음은 사이트의 루트 디렉터리에 netlify.toml 프로필을 만들고 다음 프로필을 추가하여 Netlify가 우리의 함수(즉 우리가 이전에 만든 lambda 폴더를 어디서 찾을 수 있는지 알려 줍니다.

[build]
  functions = "./lambda"

다음은 zapierReceive.js 폴더에 lambda 라는 파일을 만듭니다.이것은 우리 함수의 코드를 포함할 것이다.

빠른 사이드 스톱

계속하기 전에 저는 여러분과 간단한 이야기를 나눌 것입니다. 왜냐하면 JAMstack과 serverless를 사용할 때 자주 해야 할 심리적 변화를 설명하는 데 도움이 되기 때문입니다.처음에 나는 이 예가 매우 간단하다고 생각했다. - 나는 로컬 JSON 파일을 불러오고 파일 시스템 API를 사용하여 업데이트를 하고 - whamo! -성공
너희들 중 몇몇은 아마도 "잠깐만, 이건 근본적으로 쓸모가 없어!"라고 말할 것이다.네가 옳다.첫 번째 문제는 AWS에 있는 함수가 Netlify의 파일 시스템에 액세스할 수 없다는 것입니다.그 다음으로 "진실한 세계"상황에서 귀하의 데이터는 각종 템플릿에 불러오고 사용될 수 있습니다. 이 템플릿들은 정적 사이트 생성기 구축 과정의 일부분으로 미리 표시됩니다.이것은 내가 Netlify의 파일 시스템에 접근할 수 있어도 모든 변경 사항은git 저장소에서 촉발한 재구성에 덮어씌워진다는 것을 의미한다.
따라서 우리가 진정으로 원하는 것은git 저장소 (GitHub에 있는) 에 변경 사항을 쓰는 것입니다. 그리고 이 변경 사항은 자동으로 Netlify를 터치하여 내가 업데이트한 데이터 파일을 사용하는 사이트를 재구성합니다.

함수 만들기

이제 제가 구축하고자 하는 내용을 더 잘 이해했습니다. Netlify 함수와GitHub를 대화할 수 있는 방법을 찾아야 합니다.고맙습니다. GitHub에는 Octokit라는 도구 패키지가 있습니다. 그 중 하나REST implementation using JavaScript는 노드 기반 함수에 삽입할 수 있습니다.documentation API는 많은 일을 할 수 있기 때문에 막을 수 없을 것 같지만 검색을 통해 내가 필요로 하는 방법을 곧 찾을 수 있다.설치하려면 를 사용하십시오 npm install @octokit/rest --savedev.
첫 번째 단계는 developer settings in your GitHub profile에 들어가서 접근 영패를 만드는 것입니다. 이 영패는 API를 통해 인증을 할 수 있습니다. 왜냐하면 우리는 리포에 대한 쓰기 접근이 필요하기 때문입니다.패키지를 쓰고 읽을 수 있도록 영패 접근 권한을 부여해야 합니다.

토큰을 복사하여 사이트에 전송하는 Netlify 관리자(기존 사이트가 없는 경우 사이트를 설정해야 함).설정 > 구축 및 배포 > 환경으로 이동합니다.함수 코드에서 접근할 수 있도록 영패를 포함하는 새로운 환경 변수를 만듭니다. 공개할 필요가 없습니다.

이제 zapierReceive.js의 내용을 봅시다.일은 많지만, 나는 내가 할 수 있는 대로 설명할 것이다.

const Octokit = require("@octokit/rest"),
      owner = 'remotesynth',
      repo = 'webhooks';

exports.handler = async (event, context, callback) => {
  try {
    const octokit = new Octokit({auth:process.env.GITHUB_TOKEN});
    if(!event.body) {
      return { 
          statusCode: 500, 
          body: 'Title and link are required.'
      };
    }
    const body = JSON.parse(event.body);
    const newItem = {};
    newItem.title = body.title;
    newItem.link = body.link;
    if(!newItem.title) {
        return { 
            statusCode: 500, 
            body: 'title parameter required' 
        };
    }
    if(!newItem.link) {
        return { 
            statusCode: 500, 
            body: 'link parameter required' 
        };
    }
    let path = 'links.json';
    return octokit.repos.getContents({
      owner,
      repo,
      path
    }).then(res => {
      console.log(res);
      let buff = Buffer.from(res.data.content, 'base64');
      let linksRaw = buff.toString('utf-8');
      let linksJSON = JSON.parse(linksRaw);
      let message = 'Updated links';
      let content = '';
      let sha = res.data.sha;
      linksJSON.links.push(newItem);
      linksRaw = JSON.stringify(linksJSON);
      buff = Buffer.from(linksRaw);
      content = buff.toString('base64');
      return octokit.repos.createOrUpdateFile({
        owner,
        repo,
        path,
        message,
        content,
        sha
      }).then(res => {
        return {
          statusCode:200, 
          body: '{"success":"true"}'
        }
      })
    });


  } catch (err) {[]
    return { statusCode: 500, body: err.toString() };
  }

};

이전 줄에서 Octokit을 가져오고 연결할 사용자 이름과 저장소에 변수를 설정합니다.우선 auth에 설정된 Netlify 환경 변수를 사용하여 Octokit을 실례화합니다.다음은 제목과 URL이 발송되었는지 확인하기 위해 매우 기본적인 검증을 하겠습니다.그 다음에 Octokit을 사용하여 GitHub API를 호출하고 변경하고자 하는 파일의 기존 내용을 가져옵니다. 이 파일은 Base64로 되돌아옵니다. (또 다른 방법은 Base64로 되돌아오지 않을 수도 있지만, 제 목적으로는 잘 작동합니다.)성공하면 새 항목을 그룹에 추가하고 JSON으로 변환한 다음 Octokit을 사용하여 GitHub에 내용을 쓰고 제출 메시지를 보냅니다.
아이고!😫 솔직히 말하면 해석보다 쓰기가 훨씬 쉽다.

테스트 기능

현재 함수는 이미 작성되었습니다. 우리는 Netlify Dev 로컬에서 함수를 실행하고 Postman 같은 도구를 사용하여 테스트할 수 있습니다.제 경험에 의하면 Netlify Dev를 사용하여 로컬 테스트 함수를 사용하려면 Netlify에 이 함수를 먼저 존재해야 하기 때문에 이 함수를 배치하지 않았다면 이렇게 하십시오.이후 모든 변경 사항은 로컬에서 테스트할 수 있으며 재배치할 필요가 없습니다.완료되면 netlify dev 를 사용하여 로컬에서 사이트를 시작하고 사이트를 실행하며 로컬 테스트에 사용할 수 있습니다.
Netlify Dev를 기본 설정으로 실행하는 경우 테스트 함수의 URL은 localhost:8888/.netlify/functions/zapierReceive 이어야 합니다.계속해서 JSON 부하와 함께 Postman을 삽입하여 모든 것이 정상적으로 작동하도록 합니다.

만약 네가 다시 성공을 얻게 된다면, 우리는 기꺼이 다음 단계를 계속할 것이다.주의해야 할 것은 우리가 로컬에서 그것을 호출했지만, GitHub를 변경하고 있으며, 어느 저장소가 사이트에 반영될지 여부입니다.

Netlify에 배포

이 함수를 테스트하기 위해 배치되었을 수도 있지만, 문제가 발생할 수도 있습니다.Octokit을 사용하고 있지만 이 함수를 실행하는 실례에 설치되어 있지 않습니다.그래서 만약 당신이 지금 우체부를 통해 당신의 공공 URL을 호출한다면, 당신은 오류를 얻을 수 있을 것입니다.다양한 솔루션이 있습니다.

npm 설치를 사전 구축 또는 구축 절차로 실행합니다.이 작업을 수행하는 방법에 대한 자세한 내용은 support post here 에서 확인할 수 있습니다.이것은 구축 시간에 영향을 미칠 수 있으며, 이 과정이 빈번하게 실행되면 비용이 발생할 수 있다는 것을 기억하십시오.

Netlify Lambda를 사용하여 예비 귀속 함수를 만듭니다. 이 함수는 의존항을 포함하여 구축 절차의 일부분입니다.

Netlify CLI 및 netlify deploy 배포unbundled function를 사용합니다.

일단 우리가 필요한 의존 관계를 가진 함수를 배치하면, 우리는 URL 구조(예를 들어 [My Netlify URL]/.netlify/functions/zapierReceive를 사용하여 Postman 내부에서 Netlify의 함수를 호출할 수 있어야 한다.이것은 URL 목록을 업데이트하고 추가된 새 URL을 사용하여 사이트를 재구성합니다.

Zapier에서 Webhook 설정

이제 게시할 노드 (즉 Netlify 함수) 가 있습니다. Zapier에서 나머지 프로세스를 설정할 수 있습니다.새로운 zap을 만드는 것부터 시작하여 "Zapier의 RSS"를 검색하고 "여러 개의 요약 중의 새로운 항목"을 선택하십시오.이 작업은 RSS 요약 목록을 보고 새 게시물을 볼 때 실행됩니다.

다음으로, 우리는 구독원을 선택할 것이다.나는 내가 가장 좋아하는 개발자 중심의 사이트 몇 개를 선택했다.

필요한 요약을 설정하면 다음 단계는 RSS 데이터를 웹훅에 보낼 필드에 비추는 것입니다.우리의 예에서 우리는 title과link 파라미터만 필요로 한다.

이 절차를 마치면 "테스트 및 계속"을 누르면 웹 훅을 계속 설정할 수 있습니다.
'이거 하면...'설정 부분에서 "Zapier의 Webhooks"작업을 검색하고 선택해야 합니다.선택한 후 작업 이벤트 옵션으로 POST를 선택합니다.이것은 데이터를 단점으로 보내는 방법을 지정합니다.

"계속"을 누르면 Netlify에서 노드의 URL을 지정하고 웹hook에서 온 데이터를 노드로 보내는 매개 변수에 비칩니다.Netlify에서 함수의 URL을 입력하고 JSON의 유효 로드 유형을 선택합니다.그리고 기존 title 및 link 매개변수를 데이터의 title 및 link 매개변수에 매핑합니다.나머지 구성 옵션은 기본 설정을 유지할 수 있습니다.

"계속"을 누르면 구성을 테스트하고 저장할 수 있습니다.함수가 성공적으로 되돌아왔다고 가정하면 우리zap를 사용할 수 있습니다.zap가 실행되면 사이트에 JSON이 추가된 링크를 볼 수 있습니다. 이 데이터를 레이아웃에 비추면 이 링크는 사이트 자체에 반영됩니다.예를 들어zap를 한동안 실행하게 한 후에 여기는 나의 것이다.

다음 단계

분명히 이것은 매우 기본적인 예시로 이 도구를 사용하면 무엇을 할 수 있는지 설명한다.Zapier는 1500여 개의 응용 프로그램을 통합했기 때문에 당신은 대량의 자원을 통합하여 데이터를 당신의 사이트에 끌어들일 수 있습니다.예를 들어 인스타그램에 게시된 새 이미지를 자동으로 끌어 넣고 웹 사이트의 갤러리로 전송할 수 있습니다.아니면 구글 페이지에서 데이터를 추출해서 편집하면 사이트에 나오는 데이터 목록을 쉽게 업데이트할 수 있다.이것은 단지 몇 가지 생각일 뿐이다. 반드시 Zapier를 사용하여 그 중 하나를 완성해야 하는 것은 아니지만, 과정을 간소화하고 각 특정 API의 세부 사항을 깊이 파고들지 않도록 도와준다.
이 합에 대한 예시 코드를 확인하려면 https://github.com/remotesynth/webhooks