ReactをAmazon S3とCloudFrontでデプロイし、FastAPIと接続する方法 #React

前提条件

AWSアカウントを持っている
AWS Management Consoleにアクセスできる
ドメインを取得済みで、Route 53で管理している
FastAPIとPostgresがEC2でデプロイ済み

ステップ 1: Reactアプリケーションのビルド

Reactアプリケーションのビルド:
Reactプロジェクトのディレクトリで以下のコマンドを実行します。

npm run build

これにより、buildディレクトリにアプリケーションの静的ファイルが生成されます。
ステップ 2: Amazon S3バケットの作成と設定
S3バケットの作成:

AWS Management Consoleにログインし、S3サービスに移動します。
「Create bucket」をクリックし、新しいバケットを作成します。バケット名はグローバルに一意である必要があります。
バケット名を指定し、リージョンを選択して「Create」をクリックします。

バケット設定:

作成したバケットを選択し、「Properties」タブに移動します。
「Static website hosting」を選択し、「Use this bucket to host a website」を有効にします。
「Index document」に index.html を入力し、「Error document」に index.html を入力します。
「Save」をクリックします。

バケットポリシーの設定:

「Permissions」タブに移動し、「Bucket Policy」を選択します。
以下のバケットポリシーを追加し、すべてのオブジェクトが公開されるようにします。

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "PublicReadGetObject",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::your-bucket-name/*"
    }
  ]
}

静的ファイルのアップロード:

Reactアプリケーションのビルド成果物（buildディレクトリの内容）をS3バケットにアップロードします。
「Upload」をクリックし、ファイルを選択してアップロードします。

ステップ 3: CloudFrontディストリビューションの作成

CloudFrontディストリビューションの作成:

AWS Management ConsoleでCloudFrontサービスに移動します。
「Create Distribution」をクリックし、「Web」を選択します。
「Origin Domain Name」にS3バケットのドメイン名を入力します（例：your-bucket-name.s3.amazonaws.com）。
「Default Cache Behavior Settings」で「Viewer Protocol Policy」を「Redirect HTTP to HTTPS」に設定します。
「Distribution Settings」で「Alternate Domain Names (CNAMEs)」にカスタムドメイン名を使用する場合は入力し、証明書を設定します。
「Create Distribution」をクリックします。

カスタムエラーページ設定（オプション）:

「Error Pages」タブを選択し、「Create Custom Error Response」をクリックします。
「HTTP Error Code」を 404 に設定し、「Customize Error Response」をチェックします。
「Response Page Path」に /index.html を設定し、「HTTP Response Code」を 200 に設定します。
「Create」をクリックします。

ステップ 4: Route 53でドメイン設定

Route 53でホストゾーンを作成:

AWS Management ConsoleのRoute 53に移動し、「Create Hosted Zone」をクリックしてドメインを設定します。
Aレコードの追加:

ドメインのAレコードを作成し、CloudFrontディストリビューションのドメイン名を指します。

ステップ 5: ReactアプリケーションとFastAPIの接続

ReactアプリケーションでFastAPIエンドポイントを使用:

Reactアプリケーションのコードで、FastAPIエンドポイントを使用するAPI呼び出しを設定します。
例:

const fetchData = async () => {
  const response = await fetch('https://your-ec2-public-dns/api-endpoint');
  const data = await response.json();
  console.log(data);
};

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

CORS設定:

FastAPIでCORSを設定して、Reactアプリケーションからのリクエストを許可します。
FastAPIアプリケーションに以下を追加します。

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

origins = [
    "https://your-react-app-domain",
]

app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

まとめ

これで、ReactアプリケーションがAmazon S3とCloudFrontを使ってデプロイされ、Route 53で管理されているドメインに接続されます。ReactアプリケーションはFastAPIエンドポイントにアクセスし、データを取得できます。これにより、AWSの各サービスを統合して、スケーラブルでセキュアなWebアプリケーションを構築できます。