これは動作テスト用に簡単にReactアプリをAWSで動作させるものです。

方法は、viteでビルドしたファイルをS3に置き、そのS3バケットを公開するだけです。 公開したS3バケットのURLにアクセスすると、Reactアプリが動作します。

S3にアップするスタック

Amplify Gen2 のbackendで、S3にReactをアップして公開するようにします。 Reactのビルドは手動で行います。 viteの場合はdistディレクトリに出力されますので、distディレクトリをS3にアップします。

例 amplify/backend.ts 

import { defineBackend } from "@aws-amplify/backend";
import { ClientAppStack } from "./custom/ClientAppStack";

const backend = defineBackend({});

const clientAppStack = new ClientAppStack(
  backend.createStack("ClientAppStack"),
  "ClientAppStack",
  {}
);

backend.addOutput({ clientUrl: clientAppStack.url });

S3にアップするスタック

例 amplify/custom/ClientAppStack.ts 

import * as cdk from "aws-cdk-lib";
import { Construct } from "constructs";
import * as s3 from "aws-cdk-lib/aws-s3";
import * as s3deploy from "aws-cdk-lib/aws-s3-deployment";
type ClientAppProps = {};

export class ClientAppStack extends Construct {
  public readonly url: string;

  constructor(scope: Construct, id: string, props: ClientAppProps) {
    super(scope, id);
    const prefixName = "Sample";

    // S3 bucketの作成
    const bucket = new s3.Bucket(this, `${prefixName}Bucket`, {
	  // デフォルトだと非公開なので公開にする。
      publicReadAccess: true,

      // publicReadAccess trueにすると、これが無いと以下のエラーになる
      // ValidationError: Cannot use 'publicReadAccess' property on a bucket without allowing bucket-level public access through 'blockPublicAccess' property.
      blockPublicAccess: {
        blockPublicAcls: false,
        blockPublicPolicy: false,
        ignorePublicAcls: false,
        restrictPublicBuckets: false,
      },

      websiteIndexDocument: "index.html",

	  // 動作確認用なのでアップしたファイルを削除するようにする。
      // cdk.RemovalPolicy.DESTROYを使う場合、削除時にバケットの中身があるとエラーになるので、autoDeleteObject も指定する。
      removalPolicy: cdk.RemovalPolicy.DESTROY,
      autoDeleteObjects: true,

      // 削除時にアップしたファイルをそのままにする場合は以下を有効にする。
      // removalPolicy: cdk.RemovalPolicy.RETAIN,
    });

    // ディレクトリをS3にデプロイ
    const deploy = new s3deploy.BucketDeployment(
      this,
      `${prefixName}BucketDeployment`,
      {
        // viteのビルド結果が出力されたdistディレクトリをS3にアップする
        sources: [s3deploy.Source.asset("./dist")],

        // アップロード先バケットの指定
        destinationBucket: bucket,
      }
    );

	// npx ampx sandbox だと、CfnOutputで出力できないので、URLを保存してbackend側で出力する。
    this.url = deploy.deployedBucket.bucketWebsiteUrl;
  }
}