Serverless FrameworkでReactアプリをAWSにデプロイする

ReactアプリをServerless Frameworkを利用してAWSにデプロイする方法を詳細に解説します。フロントエンドのデプロイからバックエンドの統合まで、ステップバイステップで説明します。

Serverless Frameworkの概要

Serverless Frameworkは、サーバーレスアーキテクチャを簡単に構築、管理、デプロイできるツールです。AWS LambdaやAPI Gateway、S3などを使ってアプリケーションを構築できます。

Serverless Frameworkのインストール

まず、Serverless Frameworkをインストールします。

// npmを使ってServerless Frameworkをインストール
npm install -g serverless

Reactアプリの準備

Reactアプリをビルドして、デプロイする準備をします。

// Reactアプリのビルド
npm run build

Serverless Frameworkのセットアップ

Serverless Frameworkで新しいプロジェクトを作成し、設定ファイルを用意します。

// 新しいServerlessプロジェクトを作成
serverless create --template aws-nodejs --path my-serverless-app
cd my-serverless-app

serverless.ymlの設定

serverless.ymlを使って、AWSの設定を行います。Reactアプリの静的ファイルをS3にデプロイするための設定を行います。

service: react-app

provider:
  name: aws
  runtime: nodejs14.x
  region: us-east-1

functions:
  frontEnd:
    handler: handler.serve
    events:
      - http:
          path: /
          method: get

resources:
  Resources:
    ReactBucket:
      Type: AWS::S3::Bucket
      Properties:
        BucketName: react-app-bucket

Lambda関数の設定

ReactアプリをS3にデプロイするLambda関数を作成します。

const AWS = require('aws-sdk');
const s3 = new AWS.S3();

module.exports.serve = async (event) => {
  const params = {
    Bucket: 'react-app-bucket',
    Key: 'index.html',
  };

  const response = await s3.getObject(params).promise();

  return {
    statusCode: 200,
    headers: {
      'Content-Type': 'text/html',
    },
    body: response.Body.toString(),
  };
};

AWS S3の設定

Reactアプリの静的ファイルをS3バケットにアップロードします。Serverless Frameworkが自動的にS3バケットを作成します。

aws s3 cp build/ s3://react-app-bucket/ --recursive

API Gatewayの設定

ReactアプリをホストするためのAPI Gatewayを設定します。Serverless FrameworkがAPI Gatewayを自動的に設定します。

serverless deploy

デプロイ後の確認

デプロイが成功したら、AWSコンソールまたはServerless CLIでAPI GatewayのURLを取得し、Reactアプリが正しくデプロイされたか確認します。

// デプロイ後にURLが表示されるので、アクセスして確認
serverless info

CI/CDパイプラインの設定

Reactアプリの自動デプロイのために、CI/CDパイプラインを設定します。GitHub ActionsやAWS CodePipelineを利用することができます。

カスタムドメインの設定

API Gatewayにカスタムドメインを設定し、独自ドメインでアプリケーションを公開します。

// API Gatewayにカスタムドメインを設定
serverless domain create --domain my-app.example.com

エラーハンドリングとロギング

デプロイ後に発生する可能性があるエラーを扱うためのエラーハンドリングや、ログを活用してデバッグを行います。

serverless logs -f frontEnd -t

まとめ

Serverless Frameworkを使うことで、Reactアプリのデプロイが簡単になり、サーバーレスアーキテクチャを活用することができます。AWSのリソースをフルに活用し、スケーラブルなアプリケーションを構築できます。