Amplifyのホスティング機能では、サーバー無しでReact等を公開することができます。

参考

追加 (amplifyhosting)

ホスティングを追加すると、以下のようにホスティング方法の選択を求められます。 

amplify add hosting
? Select the plugin module to execute ...  (Use arrow keys or type to filter)
❯ Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
  Amazon CloudFront and S3

Hosting with Amplify Consoleを選択した場合、次にデプロイ方法の選択を求められます。 以下では、マニュアルデプロイを選択しています。 

amplify add hosting
√ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

? Choose a type (Use arrow keys)
  Continuous deployment (Git-based deployments) 
> Manual deployment
  Learn more

完了後、画面は以下のようになっています。 この後、Amplify publishコマンドを実行すれば、公開されます。 

amplify add hosting
√ Select the plugin module to execute · Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)

? Choose a type Manual deployment

You can now publish your app using the following command:

Command: amplify publish

ステータス

ホスティングを追加した後のステータスは、以下のようになります。 

amplify status

    Current Environment: dev
    
┌──────────┬────────────────┬───────────┬───────────────────┐
│ Category │ Resource name  │ Operation │ Provider plugin   │
├──────────┼────────────────┼───────────┼───────────────────┤
│ Hosting  │ amplifyhosting │ Create    │ awscloudformation │
└──────────┴────────────────┴───────────┴───────────────────┘


No amplify console domain detected

追加 (Amazon CloudFront and S3)

hostingの追加で、"Amazon CloudFront and S3"を選択すると、ホスティング用のS3バケット名の選択になります。 選択すると追加が完了して以下のように表示されます。 

amplify add hosting
√ Select the plugin module to execute · Amazon CloudFront and S3
√ hosting bucket name · sampleapp-20231003123456-hostingbucket
Static webhosting is disabled for the hosting bucket when CloudFront Distribution is enabled.

You can now publish your app using the following command:
Command: amplify publish

この後、publishコマンドで公開すると、xxxx.cloudfront.net 形式のドメインで公開されます。 完了までの時間は、amplifyhostingより長く数分かかります。 

amplify publish
・・・
・・・
Your app is published successfully.
https://**************.cloudfront.net
************** の文字列は、半角数と半角英小文字から成るユニークな文字列です。

ステータス

"Amazon CloudFront and S3"の場合、公開後のステータスは以下のようになります。 

$ amplify status

    Current Environment: dev

┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘

Hosting endpoint: https://**************.cloudfront.net