React と AWS Lambda を使用してサーバーレス バックエンド アプリケーションを構築する方法

React と AWS Lambda を使用してサーバーレス バックエンド アプリケーションを構築する方法

はじめに:
クラウド コンピューティングとサーバーレス アーキテクチャの急速な発展により、さらにサーバーレス バックエンド アプリケーション開発モデルに移行する開発者が増えています。サーバーレス アーキテクチャは、優れた弾力性、容易なスケーラビリティ、コスト効率を提供し、AWS Lambda と React はサーバーレス開発で最も人気のある選択肢の 1 つとなっています。この記事では、React と AWS Lambda を使用してサーバーレス バックエンド アプリケーションを構築する方法を紹介し、具体的なコード例を示します。

1. サービスレス アーキテクチャを選択する理由

1. 柔軟な拡張: サービスレス アーキテクチャでは、アプリケーション リソースがオンデマンドで割り当てられ、実際のニーズに応じて柔軟に拡張および削減できるため、大幅に改善されます。システムの拡張性と弾力性が向上します。
2. 高可用性: AWS Lambda は、分散型の単一障害点のないアーキテクチャを採用し、高い信頼性と高可用性を確保します。
3. 費用対効果: 使用量に応じて請求されるサービスレス アーキテクチャにより、コストを大幅に削減できます。料金を支払う必要があるのは関数の実行ごとであり、従来のアーキテクチャで仮想マシンを継続的に実行するオーバーヘッドを回避できます。
4. 開発効率: サービスレス アーキテクチャ下の開発者は、サーバー管理やアーキテクチャのメンテナンスなどの複雑な問題を心配することなく、関数の作成とビジネス ロジックの実装に集中できます。

2. サーバーレス バックエンド アプリケーションを構築する基本手順

1. AWS アカウントの準備: AWS 公式 Web サイト (https://aws.amazon.com) を開きます。 /) アカウントに登録してログインします。
2. Lambda 関数を作成する: AWS コンソールで Lambda サービスを選択し、[関数の作成] をクリックし、指示に従って新しい Lambda 関数を作成します。 Node.js ランタイム環境の使用を選択できます。
3. 関数コードの作成: Lambda 関数のエディターで、関数のコードロジックを作成します。簡単な例を次に示します。

exports.handler = async (event) => {
    // 处理请求
    const response = {
        statusCode: 200,
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

4. 関数のデプロイ: 関数コードの作成が完了したら、[保存] をクリックして関数をデプロイします。 Lambda は、他のサービスで使用される一意の ARN (Amazon リソース ネーム) を自動的に割り当てます。
5. API ゲートウェイの作成: AWS コンソールで API ゲートウェイ サービスを選択し、[API の作成] をクリックし、指示に従って新しい API ゲートウェイを作成します。
6. API の設定とデプロイ: API Gateway 設定ページで、新しい Lambda 関数を API Gateway に関連付け、必要な設定を行います。構成が完了したら、「API のデプロイ」をクリックします。
7. API のテスト: API Gateway の管理インターフェイスで、新しく作成した API を見つけて、テスト ボタンをクリックします。関連するパラメータを入力し、「実行」をクリックして、API 関数が正常であるかどうかをテストします。

3. サーバーレス バックエンド アプリケーションのフロントエンド開発に React を使用する

1. React アプリケーションを作成する: コマンド ラインに次のコマンドを入力して、新しいアプリケーションを作成します。反応アプリケーション。

npx create-react-app my-app
cd my-app
npm start

2. 必要な依存ライブラリをインストールする: API Gateway を使用してリクエストを送信するには、axios ライブラリをインストールする必要があります。コマンドラインに次のコマンドを入力します。

npm install axios

3. フロントエンド コードの作成: React アプリケーションのコードでは、axios ライブラリを使用して HTTP リクエストを送信し、API Gateway インターフェイスを呼び出すことができます。

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState('');

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('<API Gateway的URL>');
      setData(response.data);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <h1>{data}</h1>
    </div>
  );
}

export default App;

4. React アプリケーションを実行します。コマンド ラインに次のコマンドを入力して、React アプリケーションを開始します。

npm start

これまでのところ、React と AWS Lambda を使用してサーバーレス バックエンド アプリケーションを構築するプロセスが完了しました。このようにして、実際のニーズに応じてバックエンド アプリケーションのリソース割り当てを動的に調整し、アプリケーションの弾力性とスケーラビリティを向上させると同時にコストを削減できます。

結論:
サービスレス アーキテクチャは、より効率的で柔軟かつ信頼性の高いバックエンド アプリケーション開発モデルを提供します。 AWS Lambda と React を使用すると、サーバーレス バックエンド アプリケーションを簡単に構築し、フロントエンドで呼び出して表示できます。この記事が、誰もがこの開発モデルを理解し、使用できるようになれば幸いです。

以上がReact と AWS Lambda を使用してサーバーレス バックエンド アプリケーションを構築する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。