Quickstarters
Astroのバックエンドを構築する方法は？

19min
はじめに
このガイドでは、astroのバックエンドを構築する方法について学び、AstroプロジェクトのためにBack4Appを使用して完全なバックエンドを作成する方法を紹介します。
データベース管理、クラウドファンクション、認証、ファイルストレージ、リアルタイムクエリなど、重要なBack4Appの機能を統合する方法を説明し、最新のツールを使用して迅速なアプリケーションを構築する実践的なアプローチを示します。
Back4Appの環境を活用することで、サーバーの設定やセキュリティレイヤーをゼロから書くといった多くの重労働を省くことができます。
このセットアップにより、時間と労力を節約しながら、堅牢なサーバーサイドロジックのためのエンドポイントを定義することができます。
また、astroプロジェクトに環境変数を組み込む方法を学び、資格情報やその他の機密データを安全に保存することが容易になります。
完了すると、Astroのためのスケーラブルなバックエンド構造を持ち、REST、GraphQL、ユーザー認証、リアルタイムイベントなどでデータを扱う方法を知ることができます。
強固なセキュリティ基盤を維持しながら、実際のニーズに応じた独自のロジックを追加する準備が整います。
前提条件
Back4Appアカウントと新しいBack4Appプロジェクト
Back4appの始め方﻿
Astroプロジェクト
Astroの設定 - 基本的なAstro開発環境とNode.jsがインストールされていることを確認してください。
Node.js（バージョン14以上）がインストールされていること
Node.jsのインストール﻿
フロントエンドとサーバーサイドの概念に精通していること
を作成または編集する方法を知っている必要があります。.astroファイル、環境変数を扱い、fetchや類似のライブラリを使って簡単なPOSTリクエストを行うことができる必要があります。
始める前に、これらの前提条件が整っていることを確認してください。Back4Appアカウント、Astro環境、基本的なJavaScriptの知識があれば、このチュートリアルをよりスムーズに進めることができます。
ステップ 1 – Back4App で新しいプロジェクトを作成し、接続する
新しいプロジェクトを作成する:
Back4App アカウントにログインします。
ダッシュボードの 新しいアプリ をクリックし、名前を付けます（例: “Astro-Backend-Tutorial”）。
Back4App の資格情報を取得する:
ダッシュボードの アプリ設定 または セキュリティとキー, アプリケーション ID, REST API キー, およびサーバー URL (https://parseapi.back4app.com がデフォルトです)。これらの環境変数は、Astro 統合で使用されます。
API を介して Astro を Back4App に接続する:
Parse SDK を直接使用しないため、Astro ファイルから fetch または別のライブラリを使用してリクエストを行います。セキュリティのために、資格情報を環境変数に保存します。例えば、 .env ファイルに:
ステップ 2 – データベースの設定
データモデルの作成
手動でデータモデルを作成する:
Back4Appのダッシュボードに移動し、データベースをクリックします。
新しいクラスを作成する（例: “Todo”）し、title（String）やisCompleted（Boolean）などのフィールドを追加します。
AIエージェントを使用してデータモデルを作成する:
アプリのダッシュボードからAIエージェントを開きます。
スキーマを平易な言葉で説明します（例: “タイトルとisCompletedフィールドを持つ新しいToDoアプリを作成します。”）。
エージェントがクラスとフィールドを生成します。
REST APIを使用したデータの読み書き
データモデルが準備できたら、Astroコンポーネントまたはサーバーサイドファイル内にエンドポイントを定義して、POSTリクエストと読み取りリクエストを処理しましょう。例えば、次のようなファイルを作成することができます。src/pages/api/todos.astro:
Text
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
---
import type { APIRoute } from 'astro';

export const post: APIRoute = async ({ request }) => {
  const body = await request.json();

  // "create" a Todo
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      title: body.title,
      isCompleted: body.isCompleted
    })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};

export const get: APIRoute = async () => {
  // "read" all Todos
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/classes/Todo`;

  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY
    }
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
};
---

<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="generator" content="astro.generator" />
    <title>Todos API</title>
  </head>
  <body>
    <h1>API for Todo</h1>
  </body>
</html>
﻿
この例では、環境変数（import.meta.env.*)を使用してBack4Appの認証情報を保存します。1つのファイルに2つのメソッドを定義します: export const postはTodoを作成するため、そして export const getはすべてのTodoを取得するためです。これをレイアウトコンポーネントの構造や他のサイトページに合わせて調整できます。
GraphQL APIを使用したデータの読み取りと書き込み
同様に、AstroページからGraphQLリクエストを実行できます:
Text
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();
  const url = `${import.meta.env.BACK4APP_SERVER_URL}/graphql`;

  const query = `
    mutation {
      createTodo(input: {
        fields: {
          title: "${body.title}"
          isCompleted: ${body.isCompleted}
        }
      }) {
        todo {
          objectId
          title
          isCompleted
        }
      }
    }
  `;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Todos GraphQL</title>
  </head>
  <body>
    <h1>GraphQL Endpoint for Todos</h1>
  </body>
</html>
﻿
ライブクエリを使用する（オプション）
ライブクエリは、データのリアルタイム更新を可能にします。それを使用するには、Back4Appダッシュボードでライブクエリを有効にし、WebSocket接続を構成します。ただし、静的なAstroサイトを構築している場合は、wss://YOUR_SUBDOMAIN.b4a.ioを指すクライアントサイドスクリプトを介してリアルタイム更新を統合することができます。ライブクエリは、レコードが作成、更新、または削除されるたびに、接続されたクライアントに変更をプッシュできます。
ステップ3 – ACLとCLPを使用したセキュリティの適用
ACL（アクセス制御リスト） と CLP（クラスレベルの権限） はデータアクセスを制御するための基本です。これらは、あなたのBack4Appダッシュボードの データベース セクションで設定できます。例えば:
認証されたユーザーのみに読み書きを制限する
オブジェクトごとのセキュリティにACLを使用する
あなたのデータが保護されるように、 Back4Appセキュリティガイドライン を使用してください。また、ダッシュボードからこれらのルールを設定することもでき、REST呼び出しがオープンであっても、正しい資格情報のみがデータを変更または表示できるようにします。
ステップ4 – クラウドコード関数の作成
なぜクラウドコードなのか: 重要なビジネスロジックをサーバー側に移動でき、秘密の露出や別のサーバーを維持する必要を回避できます。クラウドコードはトリガー（beforeSave、afterSave）をリッスンしたり、カスタムエンドポイントを処理したりできます。
例
JS
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
// main.js (Cloud Code)
Parse.Cloud.define('greetUser', async (request) => {
  const userName = request.params.name || 'Guest';
  return `Hello, ${userName}! Welcome to the Astro project.`;
});

Parse.Cloud.beforeSave('Todo', (request) => {
  const todo = request.object;
  if (!todo.get('title')) {
    throw 'Todos must have a title.';
  }
});
﻿
これを Back4App CLI を介してデプロイするか、あなたのBack4Appダッシュボードの クラウドコード セクションで直接デプロイしてください。
関数の呼び出し
Astroから、fetchを使用してCloud Functionにアクセスするエンドポイントを定義できます。
Text
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
---
export async function post({ request }) {
  const body = await request.json();

  const url = `${import.meta.env.BACK4APP_SERVER_URL}/functions/greetUser`;

  const response = await fetch(url, {
    method: 'POST',
    headers: {
      'X-Parse-Application-Id': import.meta.env.BACK4APP_APP_ID,
      'X-Parse-REST-API-Key': import.meta.env.BACK4APP_REST_KEY,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name: body.name })
  });

  const data = await response.json();
  return new Response(JSON.stringify(data), { status: 200 });
}
---
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <title>Cloud Code Greet</title>
  </head>
  <body>
    <h1>Greet Function Endpoint</h1>
  </body>
</html>
﻿
ステップ5 – 認証の設定
Back4Appは、_Userクラスを使用してユーザーアカウントを管理します。RESTを使用すると、サインアップ、ログイン、またはログアウトを管理できます。例えば、新しいユーザーのサインアップの例です:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"[email protected]"}' \
  https://parseapi.back4app.com/users
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: application/json" \
  -d '{"username":"user1","password":"secret123","email":"user1@example.com"}' \
  https://parseapi.back4app.com/users
﻿
このロジックをAstroからfetchを使用して同様に再現できます。環境変数を使用します。サインインすると、ユーザーはその後のリクエストのためにセッショントークンを受け取ります。
ソーシャルログイン
ソーシャルプロバイダー（GoogleやAppleなど）の場合、特定のエンドポイントを使用するか、OAuthフローを設定します。Appleでサインインするドキュメントや他のソーシャルログインガイドを参照して、高度な認証を統合します。これは、ユーザーがあなたのAstroプロジェクトから最小限の摩擦でサインインできるようにしたい場合に特に便利です。
ステップ 6 – ファイルストレージの取り扱い
Back4Appにファイルを保存するには、REST APIを使用して送信します。例えば:
Bash
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
curl -X POST \
  -H "X-Parse-Application-Id: YOUR_APP_ID" \
  -H "X-Parse-REST-API-Key: YOUR_REST_KEY" \
  -H "Content-Type: image/png" \
  --data-binary "@path/to/local/image.png" \
  https://parseapi.back4app.com/files/myImage.png
﻿
レスポンスにはファイルのURLが含まれています。そのURLをレコードにリンクさせることができ、例えば Photo クラスオブジェクトに関連付けて、データベース内でファイルへの参照を追跡できます。また、アプリの設定でファイルのセキュリティ設定を調整することで、誰がアップロードできるかを制御することもできます。
ステップ 7 – メール認証とパスワードリセット
メール認証を有効にする: Back4Appダッシュボードの アプリ設定 でメール認証を有効にし、認証メールのテンプレートをカスタマイズします。
パスワードリセットを設定する: 同様に、パスワードリセットメールを設定し、 _User クラスに有効なメールアドレスがあることを確認します。
フロー: ユーザーがあなたのastroプロジェクトからリセットをリクエストすると（APIコールを介して）、Back4Appは自動的にパスワードを変更するための安全なリンクを含むメールを送信します。
ステップ 8 – クラウドジョブによるタスクのスケジューリング
 Cloud Jobs を使用して、定期的なメンテナンスやその他のタスクをスケジュールします:
JS
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
// main.js
Parse.Cloud.job('cleanupOldTodos', async () => {
  const query = new Parse.Query('Todo');
  const now = new Date();
  const THIRTY_DAYS = 30 * 24 * 60 * 60 * 1000;
  query.lessThan('createdAt', new Date(now - THIRTY_DAYS));

  const oldTodos = await query.find({ useMasterKey: true });
  await Parse.Object.destroyAll(oldTodos, { useMasterKey: true });
  return `Deleted ${oldTodos.length} old Todos.`;
});
﻿
コードをデプロイしたら、Back4Appコンソールの サーバー設定 > バックグラウンドジョブ からジョブをスケジュールします。これにより、データのクリーンアップ、メールの送信、または特定の間隔で実行したいルーチン機能などのタスクが自動化されます。
ステップ9 – Webhookの統合
Webhook を使用すると、Back4Appアプリで特定のイベントが発生したときに外部サービスに通知できます。たとえば、新しいTodoが作成されるたびにSlackにデータを送信できます:
More > WebHooks に移動します。 Back4Appダッシュボードで。
Slack URLを指す Webhookを追加します。
イベントを選択します。（例：オブジェクト作成 Todoクラスで）。
これにより、リクエスト/レスポンスのフローが外部システムをAstroベースのアプリケーションのデータと同期させることができます。
ステップ10 – Back4App管理パネルの探索
Back4App管理アプリは、データ編集のためのユーザーフレンドリーな管理パネルです。特に、データベースに直接アクセスする必要がある非技術的なチームメンバーにとって便利です。
管理者アプリをの下で有効にします その他 > 管理者アプリ.
安全なアクセスのために管理者ユーザーを作成します。
このパネルを使用してCRUD操作を迅速に実行したり、ログを確認したり、より高度な設定を構成したりします。
結論
Back4Appを使用して、Astroプロジェクトのために安全で効率的なバックエンドを成功裏に作成しました。このチュートリアルを通じて、あなたは:
データベーススキーマを定義し、構成しました
RESTおよびGraphQL APIを使用してデータを読み書きしました
ACL、CLP、およびユーザー認証でデータを保護しました
Cloud Codeおよびスケジュールされたジョブを通じてロジックを拡張しました
画像や文書のためのファイルストレージを処理しました
外部通知のためにWebhooksを統合しました
データ管理を簡素化するために管理パネルを探りました
このアプローチは、信頼性が高く、スケーラブルで、メンテナンスが容易なAstroのバックエンドを構築する方法を強調しています。環境変数を活用することで、資格情報を安全に保ちながら、将来の成長に向けてコードを柔軟に保つことができます。
次のステップ
Astroプロジェクトをデプロイ し、サーバーサイドレンダリングやNodeベースの環境をサポートするホスティングプラットフォームを利用します。
高度な機能を追加, 役割ベースのアクセス制御や専門的な支払い統合などを、Cloud Codeや外部APIを使用して実装します。
パフォーマンスを最適化 するために、キャッシング戦略を実装し、より良いユーザーエクスペリエンスのためにビューポートコンテンツ設定を調整します。
Back4Appのドキュメントを確認 して、ログ、分析、より高度なセキュリティ対策について学びます。
Live Queriesを使用してリアルタイム機能を探求し、真にダイナミックで協力的なアプリケーションを構築し続けます。
﻿
更新日 24 Jan 2025
このページは役に立ちましたか？
Pythonのバックエンドを構築する方法は？
Denoのバックエンドを構築する方法は？