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

19 分

はじめにこのガイドでは、 astroのバックエンドを構築する方法について学び、astroプロジェクトのためにback4appを使用して完全なバックエンドを作成する方法を紹介します。データベース管理、クラウドファンクション、認証、ファイルストレージ、リアルタイムクエリなど、重要なback4appの機能を統合する方法を説明し、最新のツールを使用して迅速なアプリケーションを構築する実践的なアプローチを示します。 back4appの環境を活用することで、サーバーの設定やセキュリティレイヤーをゼロから書くといった多くの重労働を省くことができます。このセットアップにより、時間と労力を節約しながら、堅牢なサーバーサイドロジックのためのエンドポイントを定義することができます。また、astroプロジェクトに環境変数を組み込む方法を学び、資格情報やその他の機密データを安全に保存することが容易になります。完了すると、astroのためのスケーラブルなバックエンド構造を持ち、rest、graphql、ユーザー認証、リアルタイムイベントなどでデータを扱う方法を知ることができます。強固なセキュリティ基盤を維持しながら、実際のニーズに応じた独自のロジックを追加する準備が整います。前提条件 back4appアカウントと新しいback4appプロジェクト back4appの始め方 https //www back4app com/docs/get started/new parse app astroプロジェクト astroの設定 https //docs astro build/en/getting started/ 基本的なastro開発環境とnode jsがインストールされていることを確認してください。 node js（バージョン14以上）がインストールされていること node jsのインストール https //nodejs org/en/download/ フロントエンドおよびサーバーサイドの概念に精通していることを作成または編集する方法を知っている必要があります。 astro ファイル、環境変数を扱い、fetchや類似のライブラリを使って簡単なpostリクエストを行うことができる必要があります。始める前に、これらの前提条件が整っていることを確認してください。back4appアカウント、astro環境、基本的なjavascriptの知識があれば、このチュートリアルをよりスムーズに進めることができます。ステップ 1 – back4app で新しいプロジェクトを作成し、接続する新しいプロジェクトを作成する back4app アカウントにログインします。ダッシュボードの新しいアプリをクリックし、名前を付けます（例 “astro backend tutorial”）。 back4app 認証情報を取得する 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 \ 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リクエストを実行できます \ 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を使用したセキュリティの適用 acls (アクセス制御リスト) と clps (クラスレベルの権限) はデータアクセスを制御するための基本です。これらは、あなたのback4appダッシュボードの database セクションで設定できます。例えば認証されたユーザーのみに読み書きを制限するオブジェクトごとのセキュリティにaclを使用するあなたのデータが保護されるように、 back4appセキュリティガイドライン https //www back4app com/docs/security/parse security を使用してください。また、ダッシュボードからこれらのルールを設定することもでき、rest呼び出しがオープンであっても、正しい資格情報のみがデータを変更または表示できることを保証します。ステップ4 – クラウドコード関数の作成なぜクラウドコードなのか重要なビジネスロジックをサーバー側に移動でき、秘密の露出や別のサーバーを維持する必要を回避できます。クラウドコードはトリガー（beforesave、aftersave）をリッスンしたり、カスタムエンドポイントを処理したりできます。例 // 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 https //www back4app com/docs/local development/parse cli を介してデプロイするか、あなたのback4appダッシュボードの cloud code セクションで直接デプロイしてください。関数の呼び出し astroから、fetchを使用してcloud functionにアクセスするエンドポイントを定義できます。 \ 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を使用すると、サインアップ、ログイン、またはログアウトを管理できます。例えば、新しいユーザーのサインアップ 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でサインインするドキュメント https //www back4app com/docs/platform/sign in with apple や他のソーシャルログインガイドを参照して、高度な認証を統合します。これは、ユーザーがあなたのastroプロジェクトから最小限の摩擦でサインインできるようにしたい場合に特に便利です。ステップ 6 – ファイルストレージの取り扱い back4appにファイルを保存するには、rest apiを使用して送信します。例えば 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 を使用します // 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 – ウェブフックの統合ウェブフックを使用すると、back4appアプリで特定のイベントが発生したときに外部サービスに通知できます。たとえば、新しいtodoが作成されるたびにslackにデータを送信できます more > webhooks に移動します。あなたのback4appダッシュボードで。 slackのurlを指すウェブフックを追加します。イベントを選択します。（例：オブジェクト作成 todoクラスで）。これにより、リクエスト/レスポンスのフローが外部システムをastroベースのアプリケーションのデータと同期させることができます。ステップ10 – back4app管理パネルの探索 back4app管理アプリは、データ編集のためのユーザーフレンドリーな管理パネルです。特に、データベースに直接アクセスする必要がある非技術的なチームメンバーにとって便利です。管理者アプリをの下で有効にしますその他 > 管理者アプリ安全なアクセスのために管理者ユーザーを作成します。このパネルを使用して crud操作を迅速に実行したり、ログを確認したり、より高度な設定を構成したりします。結論 back4appを使用して、astroプロジェクトのために安全で効率的なバックエンドを成功裏に作成しました。このチュートリアルを通じて、あなたはデータベーススキーマを定義し、構成しました restおよびgraphql apiを使用してデータを読み書きしました acl、clp、およびユーザー認証でデータを保護しました cloud codeとスケジュールされたジョブを通じてロジックを拡張しました画像や文書のためにファイルストレージを管理しました外部通知のために webhookを統合しましたデータ管理を簡素化するために管理パネルを探求しましたこのアプローチは、信頼性が高く、スケーラブルで、メンテナンスが容易なastroのバックエンドを構築する方法を強調しています。環境変数を活用することで、資格情報を安全に保ちながら、将来の成長に向けてコードを柔軟に保つことができます。次のステップ astroプロジェクトをデプロイし、サーバーサイドレンダリングやnodeベースの環境をサポートするホスティングプラットフォームを利用します。高度な機能を追加し、役割ベースのアクセス制御や専門的な支払い統合をcloud codeや外部apiを使用して実装します。パフォーマンスを最適化し、キャッシング戦略を実装し、より良いユーザーエクスペリエンスのためにビューポートコンテンツ設定を調整します。 back4appのドキュメントを確認し、ログ、分析、より高度なセキュリティ対策について学びます。 live queriesを使用してリアルタイム機能を探求し、真にダイナミックで協力的なアプリケーションを構築します。