【React】最強サーバーレス講座【AWS】

この記事は、サーバーレスアーキテクチャのReactアプリケーションをAWS上に構築する方法を解説しています。

こんにちは！らびです。今回は最強サーバーレス講座と題してサーバーレスアーキテクチャを使ったReactアプリケーションの構築方法を解説します。

サーバーレスアーキテクチャを使えば、アプリケーションの運用コストをぐーんと下げられます。

サーバーレスアーキテクチャとは
ReactとAWSを使ったサーバーレスアーキテクチャ
フロントエンドをReactとS3で作る
バックエンドをLambdaで作る
動作確認
まとめ

サーバーレスアーキテクチャとは

本ブログではサーバーレスアーキテクチャを、

ミドルウェアより低いレイヤーをフルマネージドサービスで構築するアーキテクチャ

と定義します。オンプレミスの時代からVPCの時代を経てサーバーレスの時代に至るまで、システム開発者とインフラ事業者の間の責任分界点は大きく移動しました。

f:id:nomurabbit:20220103065526p:plain

オンプレミスやVPCと比較するとサーバーレスアーキテクチャは、システム開発者にとって物理障害対策、ネットワーク障害対策、一部の情報セキュリティ対策といったインフラ面の運用コストを大幅に削減できるメリットがあります。このメリットは場合によって発生するコスト増や、フルマネージドであるが故のシステム開発上の制約を大きく上回ります。

インフラやセキュリティ対策に工数を割けない小規模な開発において絶大なメリットを享受できます。

現実問題として、サーバー数台のためにCVEだったり、OSやミドルウェアのアップデートをチェックし続けるのはなかなか難しいですからね。

ReactとAWSを使ったサーバーレスアーキテクチャ

次に具体的なサーバーレスアーキテクチャの構成について説明します。今回はReactとAWSを使ったサーバーレスアーキテクチャです。フロントエンドをReact、バックエンドを.NET Core 3.1のLambdaで設計しています。下の図にあるAWSのサービスはいずれもフルマネージドで提供されるため、システム開発者がS3、Lambda、API Gateway、CloudFrontの安定稼働に運用コストをかける必要はありません。

f:id:nomurabbit:20220103070334p:plain

各サービスの運用はAWSにお任せできるジョ。

システム開発者はアプリケーションと、各サービスの設定にさえ気を使っていればいいんです。

フロントエンドをReactとS3で作る

ここからは実際の構築方法をざっくり解説します。まずはフロントエンドのReactから。下記のコマンドでReactのテンプレートを作成したら、

// create template
yarn create react-app my_react_app_20220103 --template typescript

// change dir to template
cd my_react_app_20220103

// add packages
yarn add react-router-dom
yarn add @mui/material @emotion/react @emotion/styled @mui/icons-material @mui/icons-material
yarn add axios

package.jsonに

  "homepage": "./",

とだけ追加してください。
f:id:nomurabbit:20220103073425p:plain

あとはビルドで出力したファイルを
f:id:nomurabbit:20220103073817p:plain

S3にアップロードします。
f:id:nomurabbit:20220103074100p:plain

API Gatewayでプロキシリソースとして公開して、
f:id:nomurabbit:20220103075638p:plain

Cloud Frontのオリジンに先ほどのAPI Gatewayを指定して、
f:id:nomurabbit:20220103080248p:plain

こんな画面が表示されれば完成です。
f:id:nomurabbit:20220103075837p:plain

バックエンドをLambdaで作る

フロントエンドから呼び出すAPIをLambdaで作成しましょう。今回は下記のLambdaを使います。
github.com
github.com

文字列を返すだけのLambdaだジョ。

フロントエンドと同じくAPI GatewayとCloudFrontでLambdaを公開します。
f:id:nomurabbit:20220103082205p:plain

React側にもAPI呼び出し用のロジックを追加しておきます。

interface IhttpRequestPostMessage {
  message: string
}

const getHttpPostResponsePost = () => {
  axios.post(apiUrlPost,httpRequestMessage,{
    headers: {'Content-Type': 'text/plain'}
  }).then(function (response) {
    setHttpResponseMessage(response.data.message);
    console.log(response);
  }).catch(function (thrown) {
    if (axios.isCancel(thrown)) {
      console.log('Post Request canceled', thrown.message);
    } else {
      console.log(thrown);
    }
  });
}

const [httpRequestMessage, setHttpRequestMessage] = useState<IhttpRequestPostMessage>();
const [httpResponseMessage, setHttpResponseMessage] = useState<string>();

useEffect(() => {
  if(httpRequestMessage !== undefined){
    getHttpPostResponsePost();
  }
},[httpRequestMessage]);

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