普段はFlutterでネイティブアプリを作っていますが、webの方も手を出してます。
今回はFlutterでwebアプリを作り、ビルドしたファイルをS3バケットにアップロードする方法についてまとめました。

S3：
Amazon S3（Simple Storage Service）はAmazonが提供するオブジェクトストレージサービスです。データの保存、取得、保護を容易に行うことができ、大規模な分析からバックアップ、復元、アーカイブまで、さまざまな用途に使用することができます。

静的Webサイトホスティング：
Amazon S3のバケットをウェブサーバーとして使用し、静的なコンテンツ（HTML、CSS、JavaScript、画像など）を持つWebページを公開する機能のことです。

手順

Flutterアプリのビルド

作成中のFlutterプロジェクトのディレクトリに移動し、以下のコマンドを実行します。

$ flutter build web 

ビルドすると、Flutterプロジェクトのbuild/webディレクトリにwebページに必要となるファイルが自動で作成されます。

build/webに移動して

$ cd build/web/

アプリを起動してみます。

$ flutter run

macを使っている場合、1. macOSか2.Chromeどちらでアプリを開くか聞かれるので、自分は2を選択、

[1]: macOS (macos)
[2]: Chrome (chrome)
Please choose one (or "q" to quit): 2
Launching lib/main.dart on Chrome in debug mode...
Waiting for connection from debug service on Chrome...

これで問題なくアプリが動けばOKです。

S3の設定

AWSアカウントを作成し、S3を検索

S3を開いたら、右上のバケットを作成を選択

バケットを作成に進み、一般的な設定＞バケット名、AWSリージョンを設定します。

今回はバケット名を適当につけましたが、S3のバケット名はAWSアカウントやリージョンにかかわらず、グローバルに一意な名前にしないとエラーがでます。
また、バケット命名規則に従いバケット名をつけないといけません。

バケット命名規則はこちら

次に、オブジェクト所有者でACL（アクセスコントロールリスト）無効か有効を選択する必要があり、ここは（推奨）となっているACL無効を選びます。

S3のアクセス制御は昔、ACLしか存在していませんでしたが、現在はポリシー（IAMポリシー／バケットポリシー）を使って管理できます。
ACLとポリシーどちらも使ってS3のアクセス制御を行うのは大変なので、ACLを使わずポリシーだけで制御したい、という人のためにACL無効の選択肢が用意されています。
公式ドキュメントにもACL無効を推奨する理由が記載されています。
ポリシーだけでS3バケット内のオブジェクトへのアクセス制御が可能で、かつACLよりも細かく柔軟に設定を行うことができます。

ACL：
→オブジェクトごとに個別にアクセス制御を行いたい場合に使用

IAMポリシー：
IAMユーザー、グループ、またはロールにアタッチされ、そのエンティティがAWSの各リソースに対してどのような操作を実行できるかを決定します。IAMポリシーはAWS全体のサービスに対して設定でき、例えばEC2インスタンスの起動、S3バケットへのアクセスなど、様々な操作に対する許可をコントロールできます。
→IAMに対してアクセス制御を行いたい場合に使用

バケットポリシー：
S3バケットに直接関連付けられ、そのバケットに対するアクセスを制御します。
バケットポリシーは特定のバケットとその中のオブジェクトに対するアクセス許可を制御するため、より具体的なアクセス制御が可能です。
たとえば、特定のIPアドレスからのアクセスのみを許可するなど、バケットに対する細かいアクセス制御が可能です。
IAMポリシーはAWSの全サービスとリソースに適用できますが、バケットポリシーは特定のS3バケットに対してのみ適用できます。
また、IAMポリシーはIAMユーザーやグループ、ロールにアタッチし、バケットポリシーは特定のS3バケットに直接アタッチします。
→バケット単位でアクセス制御を行いたい場合に使用

オブジェクト：
ファイルを格納するオブジェクトストレージのこと

バケット：
S3バケットに格納されるファイルのこと

次に、ブロックパブリックアクセス設定に進みます。

パブリックブロックアクセスでは、バケットがパブリックに公開されることを許可するかどうかの設定ができます。
最初はパブリックブロックアクセスはすべて禁止されていますが、インターネット経由でのアクセスが必要なのでチェックをすべて外します。

バケットのバージョニングを使用すると、S3バケットにある全オブジェクトを保存し、操作ミスによる削除に対しても簡単に復旧できる手段を提供してくれます。
オブジェクトの紛失が怖い方は有効にしておいたほうがいいでしょう。

バケットタグについては、タグなしでいきます。

バケットタグ：

S3の暗号化タイプは、サーバー側の暗号化でSSE-S3、SSE-KMS、DSSE-KMSの3種類があります。
暗号化を使うと、S3との間でデータを送受信するとき、S3のディスクにデータが格納されるときなどにデータを保護できます。

SSE-S3:
SSE-S3 (Server-Side Encryption with Amazon S3-Managed Keys)は、Amazon S3がデータの暗号化と復号化を行う暗号化方式です。各オブジェクトに対してユニークなキーが使用され、そのキー自体もさらにマスターキーで暗号化されます。

SSE-KMS:
SSE-KMS (Server-Side Encryption with AWS Key Management Service)は、AWSのKMS (Key Management Service) を使用して、暗号キーの作成、制御、および監査を行う暗号化方式です。

設定が完了したらバケットを作成をクリック。

Amazon S3 > バケットに進むと、先ほど作成したバケットがあるので選択し、オブジェクト＞アップロードを選択します。

そしてアップロードの画面において、最初に作ったbuild/webディレクトリにある全ファイル、ディレクトリをアップロードします。

アップロードボタンを押した後の画面。

最後に、バケット＞プロパティ＞静的ウェブサイトホスティング＞編集を選択。

静的ウェブサイトホスティングが無効になっているので有効にし、静的ウェブサイトをホストする。
インデックスドキュメントをindex.htmlに指定します。

バケット＞プロパティ＞静的ウェブサイトホスティング＞バケットウェブサイトエンドポイントにURLが表示されているので、クリックすると公開されたWebサイトにアクセスすることができます。