NetLify機能とZapierウェブフック、パート2であなた自身のAPIを構築してください

Jamstackアプリケーションからデータを送信するには、いくつかの作業がありますが、通常はかなり簡単です.APIやServerless関数を呼び出すだけでは、標準の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フィードのリストを監視して、ポストの配列を含むデータファイルに新しい投稿タイトルとURLを追加するNetLify関数を通知します.そうすると、サイトは更新されて、再構築するでしょう.
netlify関数を作成することから始めましょう.これは、Zapierをセットアップする前に我々のZapier Webhookが話す必要があるAPIをテストして、確立するのを許します.これを行うための理由は、Zapierに対するWebhookをテストするためのエンドポイントURLを持つことで、すべての設定を簡単にすることです.
起動するには、私たちのnetlify関数を配置するフォルダを作成しますlambda しかし、あなたはそれに名前を付けることができます.次に、netlify.toml サイトのルートで設定ファイルを設定し、以下の設定を追加して、NetLifyにどこで関数を見つけるかを指定しますlambda 以前に作成したフォルダ).

[build]
  functions = "./lambda"

次にファイル名を作成しますzapierReceive.js インサイドlambda フォルダ.これは私たちの関数のコードを含んでいます.

すばやく脇

私が継続する前に、それがしばしばJamstackとServerlessで働くときにする必要がある精神的なシフトを説明するのを助けるので、私は速い物語を共有します.最初に、私はこの例が非常に単純であると考えました-私はちょうどローカルJSONファイルをロードします、そして、それを更新するためにファイルシステムAPIを使用してください!成功!
皆さんの中には「決して働かないことを待つ」という人もいるかもしれませんそして、あなたは正しいでしょう.最初の問題は、AWSに存在する関数がnetlify上のファイルシステムにアクセスできないことです.第二に、“現実世界”の状況では、データが読み込まれ、静的サイトジェネレータのビルドプロセスの一部としてプリレンダリングされる様々なテンプレート内で使用されます.これは、netlifyのファイルシステムにアクセスしても、私のGitリポジトリによって引き起こされたリビルドから何か変更が上書きされることを意味します.
そこで、私たちが本当に望んでいるのは、Gitリポジトリに変更を書き込むことです.(MainはGithubにあります)、そしてこの変更は自動的にNetLifyをトリガーし、更新されたデータファイルを使用するサイトを再構築します.

関数の作成

私がより良いものを理解したので、私は私のnetlify機能をGithubに話す方法を見つけなければなりませんでした.ありがたいことに、GitHubはツールキットを持っていますOctokit とREST implementation using JavaScript 私のノードベースの機能に接続できます.The documentation APIがとても多くのことをすることができるように圧倒的に見えるかもしれませんが、私はかなり迅速に私が必要とする方法を見つけることができた検索を使用します.インストールするにはnpm install @octokit/rest --savedev .
最初の一歩はdeveloper settings in your GitHub profile そして、我々がREPOへの書き込みアクセスを望むので、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をインポートし、ユーザ名とリポジトリを設定します.私たちは、AutoFly環境変数を使用して、オクトーットをインスタンス化することによって、関数を開始します.次に、タイトルとURLを送信するためのいくつかの非常に基本的な検証を行います.その後、Octokitを使用して、Github APIを呼び出して、私たちが変更しようとするファイルの既存の内容を取得します.これはbase 64として返されます(たぶん、base 64を返しない別の方法がありますが、これは私の目的にはうまくいきました).成功すると、新しい項目を配列に追加し、JSONに戻してOctokitを使用してコミットメッセージでGithubにコンテンツを書き込みます.
フィル!😫 正直に言うと、説明するよりも書くほうがずっと簡単だった.

関数のテスト

関数が書き込まれたので、利用できますNetlify Dev ローカルで関数を実行するPostman テストする.私の経験では、netlify - devで局所的に機能をテストするのは一般的にはNetLifyに最初に存在することを要求します.その後、任意の変更を再配備する必要がなくローカルでテストすることができます.一度完了したら、サイトをローカルで起動しますnetlify dev , これは、ローカルテストのための機能だけでなく、サイトを実行します.
デフォルト設定を使用してnetlify devを実行していると仮定すると、関数をテストするURLはlocalhost:8888/.netlify/functions/zapierReceive . 前方へ進んで、すべてが確実に動いていることを確実とするために、JSONペイロードとともに、ポストマンに接続してください.

あなたが成功を取り戻すならば、我々は次のステップに進むのが良いです.私たちがローカルにそれを呼んだとしても、倉庫があなたのサイトに反映されるあなたのgithubに変化をしていることに注意してください.

Netlifyへの配備

おそらく、すでにテストする関数を展開していますが、問題が発生する可能性があります.octokitを使用していますが、関数を実行しているインスタンスにはインストールされません.それで、あなたがたった今郵便配達人を通してあなたの公共のURLと呼ばれるならば、あなたは誤りを得なければなりません.これには複数の解決策があります.

ビルドまたはビルドステップとしてNPMのインストールを実行します.この方法についての詳細は、support post here . このプロセスが頻繁に実行される場合、これはあなたのビルド分に影響を及ぼす可能性があります.

ビルドステップの一部として依存関係を含むプリバンドルされた関数を作成するNetlify Lambda .

展開するunbundled function netlify CLIとnetlify deploy .

一旦我々が必要な依存関係で我々の機能を展開したならば、我々はURL Liquid[My Netlify URL]/.netlify/functions/zapierReceive . これはURLのリストを更新し、新しいURLを追加してサイトを再構築する原因となります.

ZapierでのWebhookの設定

今、私たちが投稿する(すなわち、私たちのNetlify機能)終点を持っているので、私たちはZapierでプロセスの残りをセットすることができます.新しいZapを検索し、“ZapierでRSS”を検索し、“複数のフィードで新しいアイテム”を選択して起動します.このタスクはRSSフィードのリストを見て、それが新しい投稿を見たときに実行されます.

次に、我々はフィードを選択します.私は私のお気に入りの開発者に焦点を当てたサイトのカップルを選んだ.

したら、次のステップは、Webhookに送信するフィールドにRSSデータをマップすることです.我々の場合、我々はちょうど必要title and link パラメータ.

この手順が完了すると、「テスト＆続行」をクリックしてWebhookの設定に移動できます.
このためにセットアップの一部は、我々は検索し、“Zapier”のタスクによってwebhooksを選択する必要があります.選択されたら、「アクションイベント」オプションとして「POST」を選択します.これはデータがエンドポイントに送られるメソッドを指定します.

“continue”をクリックした後、NetLifyでエンドポイントのURLを指定し、エンドポイントに送信されるパラメータにWebhookから来るデータをマップします.ここでNetLifyで関数のURLを入力し、JSONのペイロードタイプを選択します.次に、既存のマップtitle and link パラメータtitle and link データ中のパラメータ.残りの設定オプションは、デフォルトの設定で残すことができます.

続行をクリックすると、テストし、最終的に設定を保存できます.関数が成功を返すと、Zapを有効にすることができます.ZAPが実行されると、最終的にリンクがサイトのJSONに追加され、レイアウトにマップされたデータがあればサイト自体に反映されます.たとえば、しばらくの間ZAPを実行した後に(美しく設計された)私のものは、ここにあります.

次の手順

明らかに、これはあなたがこれらのツールを使用するかもしれないものの非常に基本的な例です.1500 +アプリZapier統合されているので、あなたのサイトにデータをプルするために統合することができますソースの膨大な量です.たとえば、Instagramに投稿された新しい画像を自動的にプルし、あなたのサイトのギャラリーにそれらのイメージをプッシュすることができます.または、Googleのシートからデータを簡単に編集するには、サイトに表示されるデータのリストを更新することができます.これらは単にアイデアのカップルであり、Zapierを使用している間は必ずしもこれらのいずれかを達成するために必要とされていない、それはプロセスを簡素化し、各特定のAPIのインとアウトに掘削を避けるために役立ちます.
このサンプルコードをチェックしたいなら、https://github.com/remotesynth/webhooks