[Flutter on the web]ビルドしたファイルをAmazon S3にアップロードして静的Webサイトホスティング

2023年7月6日 22:14

普段は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よりも細かく柔軟に設定を行うことができます。

Amazon S3 の最新のユースケースの大部分では ACL を使用する必要がなくなっています。オブジェクトごとに個別に制御する必要がある通常ではない状況を除き、ACL は無効にしておくことをお勧めします。ACL を無効にすると、誰がオブジェクトをバケットにアップロードしたかに関係なく、ポリシーを使用してバケット内のすべてのオブジェクトへのアクセスを制御できます。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/acl-overview.html

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

Amazon S3 のアクセスコントロールリスト (ACL) では、バケットとオブジェクトへのアクセスを管理できます。各バケットとオブジェクトには、サブリソースとして ACL がアタッチされています。これにより、アクセスが許可される AWS アカウントまたはグループと、アクセスの種類が定義されます。リソースに対するリクエストを受け取ると、Amazon S3 は該当する ACL を確認して、リクエスタに必要なアクセス許可があることを確かめます。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/acl-overview.html

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

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

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

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

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

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

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

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

バケットタグ：

個々のプロジェクトまたはプロジェクトのグループのストレージコストや他の基準を追跡するには、コスト配分タグを使用して Amazon S3 バケットにラベルを付けます。コスト割り当てタグはキーと値のペアで、ユーザーが S3 バケットに関連付けます。コスト配分タグを有効にすると、AWS はコスト配分レポートでリソースのコストの整理にタグを使用します。

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/CostAllocTagging.html

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) を使用して、暗号キーの作成、制御、および監査を行う暗号化方式です。

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