How to Build a Backend for Gatsby?

イントロダクション このチュートリアルでは、 gatsbyのバックエンドを構築する方法 を学びます。 back4appの機能（データベース管理、cloud code functions、 rest api 、および graphqlクエリ 機能、ユーザー認証、リアルタイムクエリ（ライブクエリ）など）を統合して、あなたの gatsbyサイト からアクセスできる安全でスケーラブル、かつ堅牢なバックエンドを作成する方法をお見せします。 また、back4appの迅速なセットアップと直感的な環境が、バックエンドタスクを処理するための時間と労力を大幅に削減できることもご覧いただけます。 最後には、データを保存および取得し、認証を処理し、クラウド機能を統合する gatsbyのバックエンドを構築する方法 を正確に理解できるようになります。 これにより、カスタムロジックを簡単に組み込んだり、サードパーティのapiを追加したり、従来のサーバーメンテナンスを気にせずにデータモデルを拡張したりすることができます。 あなたが構築するものとその価値 完全なバックエンド統合 あなたのgatsbyサイトのために、動的データニーズに最適なparse sdkを組み込んだスケーラブルなバックエンド構造を作成します。 時間の節約 back4appは、バックエンドの作成を迅速化するaiエージェント、リアルタイムクエリ、クラウドジョブなどのツールを提供します。 拡張可能なスキル 完成後、ビルド時にページを作成したり、動的操作のためにサーバーレス機能にフックしたりするなど、より高度なgatsby機能にこれらの概念を適応させることができるようになります。 前提条件 back4appアカウントと新しいback4appプロジェクト back4appの始め方。 https //www back4app com/docs/get started/new parse app アカウントを持っていない場合は、無料で作成できます。上記のガイドに従ってプロジェクトを準備してください。 基本的なgatsby開発環境 これを設定するには、 gatsby cli https //www gatsbyjs com/docs/tutorial/part 0/#install gatsby cli をインストールし、次のコマンドを実行します node js（バージョン14以上）がインストールされていること node jsのインストール https //nodejs org/en/download/ javascriptとgatsbyの概念に慣れていること gatsby公式ドキュメント。 https //www gatsbyjs com/docs/ gatsbyが初めての場合は、ドキュメントや初心者向けのチュートリアルを読んでください。 これらの要件が設定されていることを確認してください。これにより、 新しいファイルを作成する 際や、gatsby環境でgraphqlクエリを実行する際にスムーズな体験が保証されます。 ステップ1 – back4appプロジェクトの設定 新しいプロジェクトを作成する back4appでgatsbyのバックエンドを構築するための最初のステップは、新しいプロジェクトを作成することです。まだ作成していない場合は back4appアカウントにログインする 。 ダッシュボードの「新しいアプリ」ボタンをクリックする 。 アプリに名前を付ける （例：「gatsby backend tutorial」）。 プロジェクトを作成すると、それはあなたのback4appダッシュボードに表示されます。このプロジェクトを私たちのバックエンドのコアとして使用します。 parse sdkを接続する back4appは、データを管理し、リアルタイム機能を提供し、ユーザー認証を処理するためにparseプラットフォームを使用しています。gatsbyの場合、まだ npm install parse を実行し、それをソースファイルに統合できます あなたのparseキーを取得する あなたのback4appダッシュボードで、 アプリケーションid と javascriptキー , 通常は「アプリ設定」または「セキュリティとキー」の下にあります。また、 parseサーバーurl （通常は https //parseapi back4app com ) を見つけることができます。 gatsbyサイトにparse sdkをインストールする には npm install parse gatsbyプロジェクトのルートディレクトリまたは src/ 内に parseconfig js を作成します src/parseconfig js // src/parseconfig js import parse from 'parse'; // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key'); parse serverurl = 'https //parseapi back4app com'; export default parse; gatsbyファイル（例 parseconfig js をインポートするたびに、 gatsby node js , gatsby browser js , またはページ/コンポーネント）で、あなたはバックエンドにクエリを行うための事前設定されたインスタンスを持つことになります。 ステップ2 – データベースの設定 データモデルの作成 back4appでは、データは「クラス」（テーブルに似ている）として管理され、データのフィールドがあります。デモのために「todo」クラスを作成しましょう。gatsbyでparseを使用してデータを 保存および取得する 方法をいくつか示します。 「データベース」セクションに移動 あなたのback4appダッシュボードで。 新しいクラスを作成 （例：「todo」）し、タイトル（string）やiscompleted（boolean）などのカラムを追加します。 また、parseがオブジェクトが最初にコードから保存されるときに自動的にカラムを作成することを許可することもできます。 aiエージェントを使用したデータモデルの作成 back4appは、データ構造を定義するのを助けるためにaiエージェントを提供します。 aiエージェントを開く あなたのアプリダッシュボードまたはメニューから。 データモデルを説明する （例：「新しいtodoアプリのスキーマをタイトルと完了状況で作成してください。」）。 aiエージェントに生成させる スキーマを。 sdkを使用したデータの読み書き gatsbyのサンプルスニペットは、次のようになります（例えば、reactベースのページや gatsby browser js ) import parse from ' /parseconfig'; async function createtodoitem(title, iscompleted) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); todo set('iscompleted', iscompleted); try { const savedtodo = await todo save(); console log('todo saved successfully ', savedtodo); return savedtodo; } catch (error) { console error('error saving todo ', error); } } async function fetchtodos() { const todo = parse object extend('todo'); const query = new parse query(todo); try { const results = await query find(); console log('fetched todo items ', results); return results; } catch (error) { console error('error fetching todos ', error); } } rest apiを使用したデータの読み取りと書き込み また、次のようにデータベースと対話することもできます。 rest api curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo graphql apiを使用したデータの読み取りと書き込み back4appはまた、次のような graphql api をサポートしているため、クエリやミューテーションを実行できます mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } これは、gatsbyサイトがビルド時にgraphqlクエリを介してデータを取得する場合に特に便利です。 ライブクエリの操作 gatsbyは静的サイトジェネレーターですが、parse ライブクエリ を使用して動的なリアルタイム接続を設定することもできます。これは、ブラウザで実行されるコードや独自のサーバーレスフックで役立ちます。 ライブクエリを有効にする には、back4appダッシュボード（サーバー設定の下）で行います。 ライブクエリサーバーのurlを追加する には、 parseconfig js parse livequeryserverurl = 'wss\ //your subdomain here b4a io'; クラスにサブスクライブしてリアルタイム通知を受け取る には async function subscribetotodos(callback) { const query = new parse query('todo'); const subscription = await query subscribe(); subscription on('create', (newtodo) => { callback('create', newtodo); }); subscription on('update', (updatedtodo) => { callback('update', updatedtodo); }); subscription on('delete', (deletedtodo) => { callback('delete', deletedtodo); }); return subscription; } これにより、gatsbyプロジェクトのフロントエンドにリアルタイムデータの更新がプッシュされます。 ステップ3 – aclとclpによるセキュリティの適用 aclとclpとは何ですか？ acl（アクセス制御リスト） は、個々のオブジェクトに対する権限を定義でき、 clp（クラスレベルの権限） は、back4appデータベース内の全クラスに適用されます。 クラスレベルの権限の設定 「 クラスを選択します（例： todo ）。 「 クラスレベルの権限 」タブをクリックします。 クラスが公開読み取り可能か、認証が必要か、特定の役割に制限されているかを設定します。 コード内でのaclの使用 gatsbyコード内で、各新しいオブジェクトのaclを定義できます。 async function createprivatetodo(title, owneruser) { const todo = parse object extend('todo'); const todo = new todo(); todo set('title', title); const acl = new parse acl(owneruser); acl setpublicreadaccess(false); acl setpublicwriteaccess(false); todo setacl(acl); try { return await todo save(); } catch (err) { console error('error saving private todo ', err); } } ステップ4 – クラウドコード関数の作成 なぜクラウドコード？ クラウドコードを使用すると、back4appバックエンドにカスタムサーバーサイドロジックを追加できます。これは、ビジネスルール、 rest api の変換、トリガー、またはクライアント側から安全に保ちたいデータ検証に最適です。 クラウド関数の例 // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params; if (!text) { throw new error('no text provided'); } return { length text length }; }); クラウドコードのデプロイ back4app cli経由 cliをインストールして設定し、次に b4a deploy を実行します。 ダッシュボード経由 ダッシュボードの cloud code > functions に移動し、コードを main js に貼り付けて、 デプロイ をクリックします。 関数の呼び出し gatsby/parse sdkから import parse from ' /parseconfig'; async function gettextlength(text) { try { const result = await parse cloud run('calculatetextlength', { text }); console log('text length ', result length); } catch (err) { console error('error calling cloud function ', err); } } ステップ 5 – 認証の設定 parse ユーザークラス back4app は parse user クラスを認証に使用します。デフォルトでは、パスワードのハッシュ化、セッション、および安全なストレージを処理します。 gatsby でのサインアップとログイン import parse from ' /parseconfig'; // signup async function signupuser(username, password, email) { const user = new parse user(); user set('username', username); user set('password', password); user set('email', email); try { await user signup(); console log('user signed up successfully!'); } catch (error) { console error('error signing up user ', error); } } // login async function loginuser(username, password) { try { const user = await parse user login(username, password); console log('user logged in ', user); } catch (error) { console error('error logging in user ', error); } } ログイン後、ユーザーがログインしているかどうかを確認するには parse user current() を呼び出すことができます。 ソーシャルログイン 追加の設定を行うことで、 google , facebook , apple , および他のプロバイダーを統合できます。詳細は ソーシャルログインのドキュメント。 https //www back4app com/docs/platform/sign in with apple ステップ 6 – ファイルストレージの処理 ファイルのアップロード 画像や他のファイルをアップロードするには parse file を使用します。例えば、gatsby コンポーネント内で async function uploadimage(file) { const name = file name; const parsefile = new parse file(name, file); try { const savedfile = await parsefile save(); console log('file saved ', savedfile url()); return savedfile url(); } catch (err) { console error('error uploading file ', err); } } このファイルを parse オブジェクトに添付し、保存し、後でファイルの url を取得して gatsby サイトに表示することができます。 ステップ 7 – メール確認とパスワードリセット なぜ重要なのか メール確認はユーザーのメールアドレスを確認し、パスワードリセットフローはユーザーエクスペリエンスを向上させます。どちらもback4appで簡単に設定できます。 アプリのメール設定に移動する ダッシュボードで。 メール確認を有効にする そしてパスワードリセットメールテンプレートを設定する。 parse sdkメソッドを使用する（例： parse user requestpasswordreset(email) ) でリセットメールをトリガーする。 ステップ8 – クラウドジョブによるタスクのスケジューリング クラウドジョブの概要 定期的なタスクを自動化するために、例えば古いデータを削除したり、毎日のダイジェストを送信したりするために、 クラウドジョブ を使用します。例えば // main js parse cloud job('cleanupoldtodos', async (request) => { const todo = parse object extend('todo'); const query = new parse query(todo); const now = new date(); const thirty days = 30 24 60 60 1000; const cutoff = new date(now thirty days); query lessthan('createdat', cutoff); try { const oldtodos = await query find({ usemasterkey true }); await parse object destroyall(oldtodos, { usemasterkey true }); return `deleted ${oldtodos length} old todos `; } catch (err) { throw new error('error during cleanup ' + err message); } }); 次に、 アプリ設定 > サーバー設定 > バックグラウンドジョブ の下にスケジュールします。 ステップ9 – webhookの統合 webhookを使用すると、特定のイベントが発生したときにback4appアプリが外部サービスにhttpリクエストを送信できます。たとえば、新しいレコードの作成時などです。 back4appダッシュボードに移動します > もっと見る > webhooks 新しいwebhookを追加します , 外部サービスのエンドポイントurlを指定します。 webhookをトリガーするものを選択します （例：todoクラスのaftersave）。 適切なエンドポイントを追加することで、slackや決済ゲートウェイとも統合できます。 ステップ10 – back4app管理パネルの探索 back4appの admin app はデータ管理のためのモデル中心のインターフェースです。非技術的なユーザーに安全にアクセスを提供し、クラスに対してcrud操作を実行できます。 admin appの有効化 次に app dashboard > more > admin app に移動し、 「admin appを有効にする。」 次に admin userを作成 し、管理インターフェースのサブドメインを選択します。 これで、コードを書くことなくadmin appにログインしてデータを表示および変更できます。 結論 このチュートリアルでは、 gatsbyのバックエンドを構築する方法 をback4appを使用して学びました。あなたは 安全なデータベースを構成する クラス、カスタムフィールド、およびリレーションシップを使用して。 parse sdkを使用する , rest api および graphqlクエリ オプションを使用して、データトランザクションを行います。 データセキュリティのためにaclとclpを設定する ビジネスロジックとトリガーを拡張するためにcloud codeを記述してデプロイする サインアップ、ログイン、パスワードリセット、メール確認を使用してユーザー認証を管理する 画像や文書のためのファイルストレージを処理する cloud jobsを使用して自動化されたタスクをスケジュールする webhookを通じて外部サービスを統合する データ管理を簡単にするためにadmin appを活用する これらのスキルを使えば、あなたのgatsbyサイトは強力な動的機能を活用しながら、gatsbyの静的レンダリングの利点を享受できます。ここから、あなたは データモデルを拡張する そして高度なビジネスロジックを追加します。 より多くの外部apiを統合する 本当に包括的なプラットフォームのために。 back4appの公式ドキュメントを参照する セキュリティ、パフォーマンス、分析についての詳細な情報のために。 gatsbyのビルド時機能を試す —例えば、「 動的データからページを作成する 」や、「 gatsby source 」プラグインをback4appバックエンド用に設定します。 これで、gatsbyとback4appを使って将来にわたって通用するデータ駆動型アプリを構築するための強固な基盤が整いました。