NetlifyFunctionsとReactでデータにアクセスします

静的サイトジェネレーターは、速度、セキュリティ、ユーザーエクスペリエンスに人気があります。ただし、サイトが構築されているときに利用できないデータが必要な場合があります。 Reactは、クライアントアプリケーションに動的データを取得および保存するのに役立つユーザーインターフェイスを構築するためのライブラリです。

Faunaは、容量計画、データ複製、スケジュールされたメンテナンスなどの運用上のオーバーヘッドを完全に排除するAPIとして配信される柔軟なサーバーレスデータベースです。 Faunaを使用すると、データをドキュメントとしてモデル化することができ、Reactで書かれたWebアプリケーションに自然に適合します。 JavaScriptドライバーを介してFaunaに直接アクセスできますが、これにはデータベースに接続する各クライアントのカスタム実装が必要です。 FAUNAデータベースをAPIの後ろに配置することにより、プログラミング言語に関係なく、認定クライアントが接続できるようにすることができます。

NetLify関数を使用すると、APIエンドポイントとして機能するサーバー側コードを展開することにより、スケーラブルな動的アプリケーションを構築できます。このチュートリアルでは、React、NetlifyFunctions、およびFaunaを使用してサーバーレスアプリケーションを構築します。動物相でデータを保存して取得することの基本を学びます。 Netlify関数を作成および展開して、動物相のデータに安全にアクセスします。最後に、netlifyにReactアプリケーションを展開します。

動物相を始めましょう

Faunaは、酸に準拠し、マルチモデルインターフェイスを提供する、分散した強く一貫したOLTP NoSQL ServerLessデータベースです。 Faunaは、単一のクエリからドキュメント、リレーショナル、グラフ、および時間データセットもサポートしています。まず、[データベース]タブを選択して[データベースの作成]ボタンをクリックして、Faunaコンソールでデータベースを作成することから始めます。

次に、コレクションを作成する必要があります。このためには、データベースを選択する必要があり、[コレクション]タブの下で、[Create Collection]をクリックします。

Faunaは、持続データに関して特定の構造を使用します。デザインは、以下の例のような属性で構成されています。

 {
  "ref"：ref（collection（ "avengers"）、 "29922108789615749"）、
  「TS」：1623215668240000、
  "データ"： {
    "id"： "db7bd11d-29c5-4877-b30d-dfc4dfb2b90e"、
    「名前」：「キャプテン・アメリカ」、
    「パワー」：「高強度」、
    「説明」：「シールド」
  }
}

動物相は、特定のドキュメントを識別するために使用される一意の識別子であるRef列を保持していることに注意してください。 TS属性は、レコードを作成する時間とデータの原因となるデータ属性を決定するタイムスタンプです。

インデックスを作成することが重要な理由

次に、 Avengersコレクションの2つのインデックスを作成しましょう。これは、プロジェクトの後半でかなり価値があります。 [インデックス]タブまたは[シェル]タブからインデックスを作成できます。タブは、スクリプトを実行するコンソールを提供します。 Faunaは、FQL（Faunaのクエリ言語）とGraphQLの2種類のクエリテクニックをサポートしています。 FQLは、動物相のスキーマに基づいて動作します。これには、ドキュメント、コレクション、インデックス、セット、データベースが含まれます。

シェルからインデックスを作成しましょう。

このコマンドは、コレクションにインデックスを作成し、データオブジェクト内のIDフィールドによってインデックスを作成します。このインデックスは、データオブジェクトのrefを返します。次に、名前属性の別のインデックスを作成し、名前avenger_by_nameに名前を付けます。

サーバーキーの作成

サーバーキーを作成するには、[セキュリティ]タブをナビゲートし、 [新しいキー]ボタンをクリックする必要があります。このセクションでは、選択したデータベースとユーザーの役割のキーを作成するように求められます。

NetlifyFunctionsとReactを開始します

このセクションでは、Reactを使用してNetlify関数を作成する方法を確認します。 Create-React-Appを使用してReactアプリを作成します。

 NPX Create-React-App Avengers-Faunadb

Reactアプリを作成した後、動物相やNetlify依存関係を含むいくつかの依存関係をインストールしましょう。

 yarnは、axios bootstrap node-sass uuid faunadb race-netlify-detlify-detlify-detlify-identity-detwidgetを追加します

次に、最初のnetlfiy関数を作成しましょう。関数を作成するには、まず、Netlifiy CLIをグローバルにインストールする必要があります。

 NPMインストールnetlify -cli -g

CLIがインストールされたので、次のフィールドでプロジェクトルートに.ENVファイルを作成しましょう。

 faunadb_server_secret = <faunadb secret key>
React_app_netlify = <netlify app url></netlify></faunadb>

次に、Netlify関数の作成から始める方法を見てみましょう。このためには、netlifyプロジェクトの構成を維持する責任を負うnetlify.tomlというfunctionsと呼ばれるプロジェクトルートにディレクトリを作成する必要があります。このファイルは、機能のディレクトリ、ビルドディレクトリ、および実行するコマンドを定義します。

 [建てる]
command = "npm run build"
functions = "functions/"
publish = "build"

[[リダイレクト]]
  from = "/api/*"
  to = "/.netlify/functions/:splat"
  ステータス= 200
  力= true

この例のリダイレクトセクションのように、Netlify構成ファイルの追加の構成を実行します。 /.netlify /** to /api /のnetlify関数のデフォルトパスを変更していることに注意してください。この構成は、主にAPI URLの外観とフィールドの改善のためのものです。したがって、関数をトリガーまたは呼び出すには、パスを使用できます。

 https://domain.com/api/getpokemons

…の代わりに：

 https://domain.com/.netlify/getpokemons

次に、 functionsディレクトリにnetlify関数を作成しましょう。しかし、最初に、uuna/connections.jsという動物相の接続ファイルを作成し、動物相接続オブジェクトを返します。

 const faunadb = require（ 'faunadb'）;
const q = faunadb.query

const clientQuery = new faunadb.client（{
  秘密：process.env.faunadb_server_secret、
}）;

module.exports = {clientQuery、q};

次に、アプリケーション全体で何度かデータを解析する必要があるため、参照と戻りをチェックするヘルパー関数を作成しましょう。このファイルはutil/helper.jsになります。

 const ResponseObj =（statusCode、data）=> {
  戻る {
    ステータスコード：statusCode、
    ヘッダー：{
     / * CORSサポートが機能するために必要な */
      「アクセスコントロール - アロウオリジン」：「*」、
      「Access-Control-Allow-Headers」：「*」
      「Access-Control-Allow-Methods」：「Get、Post、Options」、
    }、
   ボディ：json.Stringify（データ）
  };
};

const requestobj =（data）=> {
  json.parse（data）を返します。
}

module.exports = {responsobj：responseobj、requestobj：requestobj}

上記のヘルパー関数は、JSONデータのCORSの問題、ストリング化、解析を処理することに注意してください。すべてのデータを返す最初の関数、 GetAvengersを作成しましょう。

 const {responsobj} = require（ './ util/helper'）;
const {q、clientquery} = require（ './ util/connection'）;

exports.handler = async（event、context）=> {
  試す {
   avengers = await clientquery.query（
     Q.map（
       Q.Paginate（Q.Documents（Q.Collection（ 'Avengers'）））、
       Q.lambda（x => q.get（x））
      ））
    ））
    Return ResponseOBJ（200、Avengers）
  } catch（error）{
    console.log（エラー）
    RESPOSSOBJ（500、エラー）;
  }
};

上記のコードの例では、 MAP 、 Paginate 、 LamdaなどのいくつかのFQLコマンドを使用していることがわかります。マップキーは、配列を介して反復するために使用され、アレイとラムダの2つの引数が必要です。最初のパラメーターのPaginateを渡しました。これにより、リファレンスを確認し、結果のページ（配列）を返します。次に、ES6の匿名の矢印関数に非常に似た匿名関数であるLamdaステートメントを使用しました。

次に、データをコレクションに作成/挿入する責任を負う関数AddAvengerを作成しましょう。

 const {requestobj、responseobj} = require（ './ util/helper'）;
const {q、clientquery} = require（ './ util/connection'）;

exports.handler = async（event、context）=> {
  let data = requestobj（event.body）;

  試す {
    avenger = wait wait clientQuery.Query（
      Q.Create（
        Q.Collection（ 'Avengers'）、
        {
          データ： {
            ID：data.id、
            名前：data.name、
            パワー：data.power、
            説明：data.description
          }
        }
      ））
    ）;

    Return ResponseOBJ（200、Avenger）
  } catch（error）{
    console.log（エラー）
    RESPOSSOBJ（500、エラー）;
  }
 
};

特定のコレクションのデータを保存するには、上記のコード例のように、データに渡すか、データにデータを渡す必要があります。{}オブジェクト。次に、それを作成する関数に渡し、必要なコレクションとデータを指す必要があります。それでは、コードを実行して、 Netlify devコマンドを介してどのように機能するかを見てみましょう。

URL http：// localhost：8888/api/getAvengersを介してブラウザを介してgetAvengers機能をトリガーしましょう。

上記の関数は、 Avenger_by_nameインデックスから検索する名前のプロパティによってAvengerオブジェクトを取得します。ただし、最初に、NetLify関数を介してGetAvengerByName関数を呼び出しましょう。そのために、 SearchAvengerという関数を作成しましょう。

 const {responsobj} = require（ './ util/helper'）;
const {q、clientquery} = require（ './ util/connection'）;

exports.handler = async（event、context）=> {
  const {
    QueryStringParameters：{name}、
  } = event;

  試す {
    avenger = wait wait clientQuery.Query（
      Q.Call（Q.Function（ "GetAvengerbyName"）、[name]）
    ）;
    Return ResponseOBJ（200、Avenger）
  } catch（error）{
    console.log（エラー）
    RESPOSSOBJ（500、エラー）;
  }
};

コール関数は、最初のパラメーターが作成したFQL関数の参照と、関数に渡す必要があるデータの2つの引数を取得することに注意してください。

Reactを介してNetlify関数を呼び出します

いくつかの関数が利用可能になったので、Reactを通じてそれらの関数を消費しましょう。関数はREST APIであるため、 Axiosを介してそれらを消費しましょう。州の管理のために、ReactのコンテキストAPIを使用しましょう。 AppContext.jsというアプリケーションコンテキストから始めましょう。

 "React"から{createContext、usereducer}をimport;
「./Appreducer」からAppReducerをインポート

const InitialState = {
    Isediting：false、
    avenger：{name： ''、description： ''、power： ''}、
    アベンジャーズ：[]、
    ユーザー：null、
    Isloggedin：false
};

const appcontext = createcontext（initialstate）;

const const appContextProvider =（{Children}）=> {
    const [state、dispatch] = usereducer（appreducer、initialstate）;

    const login =（data）=> {dispatch（{type： 'login'、payload：data}）}
    const logout =（data）=> {dispatch（{type： 'logout'、payload：data}）}
    const getAvenger =（data）=> {dispatch（{type： 'get_avenger'、payload：data}）}
    const updateavenger =（data）=> {dispatch（{type： 'update_avenger'、payload：data}）}
    const clearavenger =（data）=> {dispatch（{type： 'clear_avenger'、payload：data}）}
    const selectavenger =（data）=> {dispatch（{type： 'select_avenger'、payload：data}）}
    const getAvengers =（data）=> {dispatch（{type： 'get_avengers'、ペイロード：データ}）}
    const createavenger =（data）=> {dispatch（{type： 'create_avenger'、payload：data}）}
    const deleteavengers =（data）=> {dispatch（{type： 'delete_avenger'、payload：data}）}}

    return <appcontext.provider value="{{" ... selectavenger updateavenger clearavenger getavenger getavengers createavenger deleteavengers> {children} </appcontext.provider>
}

デフォルトのAppContextProviderをエクスポートします。

AppReducer.jsファイルにこのコンテキストの還元剤を作成しましょう。これは、アプリケーションコンテキストの各操作の還元剤関数で構成されます。

 const updateItem =（avengers、data）=> {
    let avenger = avengers.find（（avenger）=> avenger.id === data.id）;
    reldatedavenger = {... avenger、... data};
    let avengerindex = avengers.findindex（（avenger）=> avenger.id === data.id）;
    戻る [
        ... avengers.slice（0、avengerindex）、
        updatedavenger、
        ... avengers.slice（avengerindex）、
    ];
}

const deleteItem =（avengers、id）=> {
    return avengers.filter（（avenger）=> avenger.data.id！== id）
}

const appreducer =（state、action）=> {
    switch（action.type）{
        ケース 'Select_Avenger'：
            戻る {
                ...州、
                Isediting：本当、
                アベンジャー：Action.Payload
            }
        ケース「Clear_Avenger」：
            戻る {
                ...州、
                Isediting：false、
                avenger：{name： ''、description： ''、power： ''}
            }
        ケース 'update_avenger'：
            戻る {
                ...州、
                Isediting：false、
                Avengers：updateItem（state.avengers、action.payload）
            }
        ケース 'get_avenger'：
            戻る {
                ...州、
                アベンジャー：Action.PayLoad.Data
            }
        ケース 'get_avengers'：
            戻る {
                ...州、
                Avengers：array.isarray（action.payload && action.payload.data）？ action.payload.data：[{... action.payload}]
            };
        case 'create_avenger'：
            戻る {
                ...州、
                Avengers：[{data：Action.Payload}、... State.Avengers]
            };
        ケース 'Delete_Avenger'：
            戻る {
                ...州、
                Avengers：deleteItem（state.avengers、action.payload）
            };
        ケース「ログイン」：
            戻る {
                ...州、
                ユーザー：Action.PayLoad、
                Isloggedin：本当です
            };
        ケース「ログアウト」：
            戻る {
                ...州、
                ユーザー：null、
                Isloggedin：false
            };
        デフォルト：
            返品状態
    }
}

デフォルトのAppReducerをエクスポートします。

アプリケーションのコンテキストが利用可能になるので、作成したNetlifyFunctionsからデータを取得し、アプリケーションコンテキストでそれらを持続できます。それでは、これらの関数のいずれかを呼び出す方法を見てみましょう。

 const {avengers、getAvengers} = useContext（appContext）;

const getAvengers = async（）=> {
  let {data} = axios.get（ '/api/getAvengers）;
  getAvengers（データ）
}

アプリケーションコンテキストにデータを取得するには、アプリケーションコンテキストから関数getAvengersをインポートし、Get Callによって取得されたデータを渡します。この関数は、還元剤関数を呼び出し、コンテキストにデータを保持します。コンテキストにアクセスするには、 Avengersと呼ばれる属性を使用できます。次に、アベンジャーズコレクションのデータを保存する方法を見てみましょう。

 const {createavenger} = usecontext（appContext）;

const createavenger = async（e）=> {
  E.PreventDefault（）;
  let new_avenger = {id：uuid（）、... newavenger}
  axios.post（ '/api/addavenger'、new_avenger）;
  クリア（）;
  createavenger（new_avenger）
}

上記のNewAvengerオブジェクトは、フォームデータを保持する状態オブジェクトです。タイプUUIDの新しいIDを各ドキュメントに渡すことに注意してください。したがって、ファウナにデータが保存されると、アプリケーションコンテキストでCreateAvenger関数を使用して、コンテキストにデータを保存します。同様に、Axiosを介してこのようなCRUD操作を使用して、すべてのNetlify関数を呼び出すことができます。

アプリケーションを展開する方法Netlify

作業アプリケーションができたので、このアプリを展開してNetLifyを展開できます。このアプリケーションを展開できる方法はいくつかあります。

1. GitHubを介してアプリケーションを接続および展開します
2. Netlify CLIを介してアプリケーションを展開します

CLIを使用すると、特定の詳細と選択を入力するように促され、CLIは残りを処理します。ただし、この例では、GitHubを介してアプリケーションを展開します。最初に、Netlifyダッシュボードにログインし、 Gitボタンから新しいサイトをクリックしましょう。次に、展開する必要があるリポジトリと、ビルドコマンド、ビルドフォルダーなどのサイトの構成を選択するように求められます。

Netlify IDによって機能を認証および承認する方法

Netlify IDは、アプリケーションに認証されたユーザーを管理するのに役立つ、アプリケーションに認証機能の完全なスイートを提供します。 Netlify IDは、他のサードパーティサービスやライブラリを使用せずにアプリケーションに簡単に統合できます。 NetLify IDを有効にするには、Neltifyダッシュボードにログインする必要があります。展開されたサイトの下で、IDタブに移動してID機能を許可する必要があります。

アイデンティティを有効にすると、Netlify IDへのリンクが提供されます。そのURLをコピーして、 React_App_Netlifyのアプリケーションの.ENVファイルに追加する必要があります。次に、 Netlify-Identity-widgetおよびNetlify機能を介して、Netlify IDをReactアプリケーションに追加する必要があります。ただし、最初に、index.jsファイルのIDコンテキストプロバイダーコンポーネントにReact_App_Netlifyプロパティを追加しましょう。

 「React」からのImport React;
「React-dom」からReactdomをインポートします。
Import './index.css';
インポート「React-Netlify-Identity-widget/styles.css」
'bootstrap/dist/css/bootstrap.css'をインポートします。
'./App'からアプリをインポートします。
「race-netlify-identity-widget」から{IdentityContextProvider}をインポート
const url = process.env.ReaCt_App_Netlify;

Reactdom.Render（
  <identitycontextprovider url="{url}">
    <app></app>
  、
  document.getElementById（ 'root'）
）;</identitycontextprovider>

このコンポーネントは、このアプリケーションで使用するナビゲーションバーです。このコンポーネントは、認証を処理するのに理想的な場所になるために、他のすべてのコンポーネントの上にあります。このReact-Netlify-Identity-Widgetは、ユーザーのsigni = inとサインアップを処理する別のコンポーネントを追加します。

次に、netlify関数でアイデンティティを使用しましょう。 IDは、以下の関数GetAvengerのように、私たちの機能にいくつかの小さな変更を導入します。

 const {responsobj} = require（ './ util/helper'）;
const {q、clientquery} = require（ './ util/connection'）;

exports.handler = async（event、context）=> {
    if（context.clientContext.user）{
        const {
            QueryStringParameters：{id}、
        } = event;
        試す {
            const avenger = await clientQuery.Query（
                Q.get（
                    Q.Match（Q.index（ 'avenger_by_id'）、id）
                ））
            ）;
            Return ResponseOBJ（200、Avenger）
        } catch（error）{
            console.log（エラー）
            RESPOSSOBJ（500、エラー）;
        }
    } それ以外 {
        Return ResponseOBJ（401、 'Unauthorized'）;
    }
};

各リクエストのコンテキストは、 ClientContextというプロパティで構成されます。 認証されたユーザーの詳細で構成されます。上記の例では、単純な場合の条件を使用して、ユーザーのコンテキストを確認します。

各リクエストでClientContextを取得するには、ユーザートークンを承認ヘッダーに渡す必要があります。

 const {user} = useidentitycontext（）;

const getAvenger = async（id）=> {
  let {data} = axios.get（ '/api/getavenger/？id =' id、user && {
    ヘッダー：{
      承認： `Bearer $ {user.token.access_token}`
    }
  }）;
  GetAvenger（データ）
}

このユーザートークンは、NetLify IDウィジェットを介してアプリケーションにログインすると、ユーザーコンテキストで利用可能になります。

ご覧のとおり、NetlifyFunctionsとFaunaは、サーバーレスアプリケーションを構築するための有望なデュオであると考えています。完全なコードについては、このgithubリポジトリをフォローし、作業デモについてはこのURLを参照できます。

結論

結論として、FaunaとNetlifyは、サーバーレスアプリケーションを構築するための有望なデュオであると見ています。 Netlifyは、エクスペリエンスを強化するために、プラグインを介して機能を拡張する柔軟性を提供します。あなたが行くときの支払いとの価格設定計画は、開発者が動物相を始めるのに理想的です。動物相は非常に高速であり、自動スケールであるため、開発者はこれまで以上に開発に集中する時間があります。動物相は、複雑なデータベース操作を処理できます。ここでは、リレーショナル、ドキュメント、グラフ、時間データベースで見つけることができます。 FAUNAドライバーは、Android、C＃、Go、Java、JavaScript、Python、Ruby、Scala、Swiftなどのすべての主要言語をサポートしています。これらすべての優れた機能により、Faunaは最高のサーバーレスデータベースの1つであるように見えます。詳細については、Faunaのドキュメントをご覧ください。

以上がNetlifyFunctionsとReactでデータにアクセスしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。