React と AWS Lambda を使用してサーバーレスフロントエンドアプリケーションを構築する方法-jsチュートリアル-php.cn

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

PHPz

リリース： 2023-09-28 20:13:43

オリジナル

1930 人が閲覧しました

如何利用React和AWS Lambda构建无服务的前后端应用

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

サーバーレスアーキテクチャの台頭により、ますます多くの開発者がサーバーレスアーキテクチャの使用方法に注意して、効率的でスケーラブルなアプリケーションを構築します。人気があり強力なフロントエンドフレームワークである React は、AWS Lambda などのサーバーレスバックエンドサービスと完全に組み合わせて、完全にサーバーレスのフロントエンドおよびバックエンドアプリケーションを構築できます。この記事では、React と AWS Lambda を使用してサーバーレスフロントエンドおよびバックエンドアプリケーションを構築する方法を詳しく紹介し、具体的なコード例を示します。

1. React の概要

React は、ユーザーインターフェイスを構築するために Facebook によって開発され、オープンソース化されている JavaScript ライブラリです。 React はアプリケーションを複数のコンポーネントに分割し、各コンポーネントは独自の状態メソッドとライフサイクルメソッドを持つことができ、コンポーネント間の対話とデータフローを通じて複雑なユーザーインターフェイスを構築します。 React は、高性能、再利用可能なコンポーネント、仮想 DOM により、最新の Web アプリケーションを構築するためのフレームワークとして推奨されています。

2. AWS Lambda の概要

AWS Lambda は、開発者がサーバーを管理せずにコードを実行できるサーバーレスコンピューティングサービスです。開発者はコードをアップロードし、トリガーを設定するだけで、Lambda がトリガーに応じてコードを自動的に実行します。 AWS Lambda は拡張性、柔軟性、コスト効率が高く、サーバーレスバックエンドの構築に最適です。

3. React アプリケーションを構築する

まず、React アプリケーションを作成する必要があります。 Create React App などのツールを使用して React アプリケーションを初期化できます。

1.Create React Appのインストール:

npm install -g create-react-app

ログイン後にコピー

2.Create React App:

create-react-app my-app
cd my-app

ログイン後にコピー

3.Start React App:

npm start

ログイン後にコピー

上記を完了したら手順を実行すると、ブラウザにデフォルトの React アプリケーションが表示されます。

4. AWS Lambda 関数を作成する

次に、AWS Lambda 関数を作成し、React アプリケーションに接続する必要があります。

AWS コンソールにログインし、Lambda サービスページに入ります。
[関数の作成] ボタンをクリックし、[最初から作成] を選択します。
「基本構成」で、関数の名前を指定し、実行環境 (Node.js など) を選択します。
「関数コード」で、React アプリケーションのディレクトリを .zip ファイルにパッケージ化し、Lambda 関数にアップロードします。
「詳細設定」では、関数のメモリ、タイムアウト、その他のパラメータを設定します。
[トリガー] で、API Gateway などのトリガーを選択します。
「関数の作成」ボタンをクリックして作成は完了です。

5. React アプリケーションと AWS Lambda 関数を接続する

次に、React アプリケーションで AWS Lambda 関数を呼び出し、返されたデータを取得します。

AWS SDK のインストール:

npm install aws-sdk

ログイン後にコピー

React アプリケーションのコードに、AWS SDK:

import AWS from 'aws-sdk';

AWS.config.update({
  region: 'your-region',
  accessKeyId: 'your-access-key-id',
  secretAccessKey: 'your-secret-access-key'
});

const lambda = new AWS.Lambda();

ログイン後にコピー

const params = {
  FunctionName: 'your-function-name',
  Payload: JSON.stringify({
    // 传递给Lambda函数的参数
  })
};

lambda.invoke(params, (err, data) => {
  if (err) {
    console.log(err);
  } else {
    // 处理返回的数据
    console.log(data);
  }
});

ログイン後にコピー

上記の手順により、React アプリケーションで AWS Lambda 関数を正常に呼び出し、返されたデータを取得しました。

6. アプリケーションをデプロイする

最後に、React アプリケーションと AWS Lambda 関数をクラウドにデプロイする必要があります。