AWS Transfer Family web appsを触ってみた


# <font color="rgb(107, 142, 35)">目次</font>

* [はじめに](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB)
* [アップデート内容](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E3%82%A2%E3%83%83%E3%83%97%E3%83%87%E3%83%BC%E3%83%88%E5%86%85%E5%AE%B9)
* [AWS Transfer Family web appsの特徴](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#aws-transfer-family-web-apps%E3%81%AE%E7%89%B9%E5%BE%B4)
* [構成図](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E6%A7%8B%E6%88%90%E5%9B%B3)
* [触ってみた](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E8%A7%A6%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F)
* [まとめ](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E3%81%BE%E3%81%A8%E3%82%81)
* [参考記事・動画](https://qiita.com/koji-koji-koji/private/8bab942e7bebf58145b3#%E5%8F%82%E8%80%83%E8%A8%98%E4%BA%8B%E5%8B%95%E7%94%BB)


# <font color="rgb(107, 142, 35)">はじめに</font>
AWS re:Invent 2024に現地参加してきました。今年も様々なサービスアップデートが発表されていましたが、現地ではセッションを受けたりしてアップデート内容を追っている時間が十分に取れなかったので、これから触ってみて理解を深めたいと考えています。最初の一歩目として、取り掛かりやすそうなAWS Transfer Family web appsを触ってみることにしました。

# <font color="rgb(107, 142, 35)">アップデート内容</font>
AWS Transfer Family web appsのアップデートは下記のように説明されていました。
> AWS Transfer Family ウェブアプリは、ウェブブラウザから Amazon S3 のデータにアクセスするためのシンプルなインターフェイスを作成するために使用できる新しいリソースです。Transfer Family ウェブアプリを使用すると、エンドユーザーが S3 内のデータを閲覧、アップロード、ダウンロードできる、フルマネージドのブランド化された安全なポータルを従業員に提供できます。


# <font color="rgb(107, 142, 35)">AWS Transfer Family web appsの特徴</font>

* ユーザーフレンドリーなインターフェイスにより、AWSやその他技術的なバックグラウンドを持たないユーザーでもブラウザベースのファイル転送が可能
* ノーコードで開発が可能で、セットアップが容易
* ロゴ、ファビコン、URLのカスタマイズが可能
* S3 Access Grantsによる細かな操作制御が可能
* AWSエコシステムを活用可能
    * Transfer Family web appsがスケーラブルで可用性に優れている
    * S3のイレブンナインの耐久性や、その他多様な機能も活用可能
    * EventBridgeを利用することで、複数のワークロードも設定可能
* 従量課金制
    * USD 0.50/時間/ユニット
    * 1 Transfer Family ウェブアプリケーションユニットは、5 分間に最大 250 の一意のセッションを提供。ウェブアプリケーションを作成する際に、プロビジョニングするユニット数を選択する。

# <font color="rgb(107, 142, 35)">構成図</font>

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/887c3f34-e309-2417-b8c7-8a51d4525626.png)


上記のようなシンプルな構成で触ってみました。
想定としては、エンドユーザーが、Adminから払い出されたIAM Identity Centerのユーザー（TestUserA、TestUserB）を利用してTransfer Family web appsにアクセスして、S3 Access Grantsで付与された権限でS3バケットに対して操作を行います。ユーザーを二つ作成したのは、S3 Access Grantsで付与する権限を変えることで操作できる範囲が異なることを確認するためです。

# <font color="rgb(107, 142, 35)">触ってみた</font>


### IAM Identity Centerの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/3270c4c4-3162-33d2-5abb-d047dc4bad22.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/e35bb2ec-5d7f-2250-88d6-47a58621d065.png)


IAM Identity Centerでユーザー（TestUserA、TestUserB）を作成しました。作成時に登録したメールアドレスに送られてくるURLから、各ユーザーでログインして、MFA登録などを済ませました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/eadc7d24-0276-915f-983f-5a453b04efbf.png)

各ユーザーでアクセスポータルに接続できることを確認しました。この時点ではアプリケーションもまだ作成していないため、何も表示されていない状態でした。


### Transfer Family web appsの作成

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/556c8bbd-4fb1-ea3a-236f-de81e4304d0b.png)

AWS Transfer Familyのコンソール画面を開き、左メニューからウェブアプリを選択し、ウェブアプリを作成していきます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/d17ca009-1904-1139-7055-c23085ff6a32.png)

下記のように設定しました。
* 権限タイプ：新しいサービスロールを作成して使用する
* ウェブアプリユニット：1(最大250つの同時セッション)

ここで自動的に作成されるサービスロールは下記のように記述されていました。

```json: 信頼ポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": "transfer.amazonaws.com"
            },
            "Action": [
                "sts:AssumeRole",
                "sts:SetContext"
            ],
            "Condition": {
                "StringEquals": {
                    "aws:SourceAccount": "<アカウントID>"
                }
            }
        }
    ]
}
```

```json: IAMポリシー
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "s3:GetDataAccess",
                "s3:ListCallerAccessGrants"
            ],
            "Resource": "arn:aws:s3:ap-northeast-1:<アカウントID>:access-grants/*",
            "Condition": {
                "StringEquals": {
                    "s3:ResourceAccount": "<アカウントID>"
                }
            }
        },
        {
            "Effect": "Allow",
            "Action": "s3:ListAccessGrantsInstances",
            "Resource": "*",
            "Condition": {
                "StringEquals": {
                    "s3:ResourceAccount": "<アカウントID>"
                }
            }
        }
    ]
}
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/2b7e6930-3b3c-dcf3-efef-03869e6a4399.png)

ウェブアプリのデザインでは、下記のように設定しました。ロゴやファビコンは特に設定しませんでした。
* ページタイトル：S3TestPage


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/1057a3e8-0924-5036-7c2e-4265fc312ba7.png)

設定を確認して、ウェブアプリを作成を選択しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/d60a17ab-f7af-cb2f-b53e-1faeee5f1cea.png)

ウェブアプリが作成されました。アクセスエンドポイントも表示されていました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/4f98a6d1-d160-032e-e0f2-1ef0a7780072.png)

「ユーザーとグループの割り当て」を選択して、IAM Identity Centerで作成したユーザーをウェブアプリに対して割り当てました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/4aadf89d-9ffa-75df-8f37-3f730b344189.png)

再びアクセスポータルに接続すると、作成したウェブアプリが表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/437de21f-a761-83d9-ec0b-53dcd9554c6d.png)

ウェブアプリを選択すると、作成したウェブページが表示されました。しかし、この時点ではどのS3バケットにもアクセスできない状態となっていました。



### S3 Access Grantsの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/8978693d-ea57-29bc-0a1b-a78eab4726ef.png)


続いて、S3 Access Grantsの設定を行いました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/74d8bac4-9cf5-26ad-c67c-403b878a1f8a.png)

まずは、IAMアイデンティティセンターインスタンスARNを入力して、先ほど作成したIAMアイデンティティセンターインスタンスを追加しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/115b94b4-b9f2-8182-cab7-7687dc6bec44.png)


続いて、ロケーションの登録を2つ行いました。それぞれロケーション範囲には下記を登録しました。
* s3://2025-s3testpage/Directory_A/
* s3://2025-s3testpage/Directory_B/

IAMロールには、AmazonS3FullAccessをアタッチしたロールを指定しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/a9c7bd88-989b-3225-08df-63c5d187b17c.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/b86e8b7c-08f4-daa4-2843-5ea90100e53a.png)


最後に、権限を下記のように2つ作成しました。（それぞれ、TestUserAにs3://2025-s3testpage/Directory_A/*、TestUserBにs3://2025-s3testpage/Directory_B/*を権限範囲として付与）

* サブプレフィックス：*
* 許可：読み込み、書き込み
* 被付与者タイプ：IAMアイデンティティセンターからのディレクトリID
* ディレクトリアイデンティティタイプ：ユーザー
* IAMアイデンティティセンターユーザーID：＜アイデンティティセンターユーザーのID＞


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/1017aa37-df8c-b81b-d3f0-dd2075dfc8f8.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/e3c086f6-e877-71db-2309-43ef865f7236.png)


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/1da5170e-b556-7eda-a259-30c023fa13ad.png)



再度ウェブアプリにアクセスすると、権限を付与した範囲のパスでフォルダを参照することができました。TestUserAではDirectory_Aが、TestUserBではDirectory_Bが確認できました。しかし、ディレクトリを選択するとNetwork Errorが発生し、中身が確認できない状態でした。


### CORSの設定

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/2228efa1-fb22-0237-62c4-3926dc318e7f.png)

下記ページを参考に対象とするS3バケットのCORS設定を編集しました。

https://docs.aws.amazon.com/transfer/latest/userguide/access-grant-cors.html

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/1bb2dbea-12b1-100d-876d-596cb67e9d43.png)

CORSの設定により、ディレクトリの中身が確認できるようになりました。（中身は空）

### Transfer Family web apps上の操作


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/ce210756-7bef-4cde-7261-6bf93e1c6b68.png)


三点マークをクリックすると、コピー、フォルダ作成、削除、アップロードメニューがありました。


* Upload

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/e3b194ff-16c9-01a0-ea08-1c63906f04ba.png)


実際にファイルをアップロードしてみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/4460d228-9df3-07c7-7a1d-4ab6029bb79f.png)


コンソール画面からS3バケットを見ると、確かにファイルがアップロードされているのがわかりました。

* Create folder

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/4e053527-2e66-041f-f02c-d822727516dc.png)


続いてはフォルダーの作成を試してみました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/35ba0f26-f738-aa7e-0c52-4ea935cbec47.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/ca00f5d5-9069-6a42-2a4e-66564b10b465.png)

こちらも作成したフォルダをS3バケット上で確認できました。

* Copy

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/052ef540-c820-38d6-b027-bcedce08e1ce.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/ea056e13-c882-6c78-a190-86165a9b1c11.png)


次はコピーです。ファイルを選択したうえで、コピー先を指定して実行しました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/d61ec359-1c13-c127-a367-8b918c19c189.png)

確かにコピー先に指定した場所にコピーできていることが確認できました。（S3バケット上も同様）

* Delete

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/75901fd3-f641-f9e0-4728-1453c7f410ff.png)

最後はファイル削除を試しました。複数ファイルをアップロード後、それらを選択してDeleteを実行しました。


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1219490/fd4158a3-71eb-298f-dff5-e0d2bf3e00a2.png)

確かに選択したファイルが削除されるのを確認できました。（S3バケット上も同様）


# <font color="rgb(107, 142, 35)">まとめ</font>
今回はAWS Transfer Family web appsを試してみました。セットアップはノーコードでお手軽にできて、Webアプリとしての機能も非常に豊富だと感じました。（ファイルのアップロードや削除、フォルダ作成、コピー、今回記載していませんが、ファイル検索機能までありました）従量課金制となっており、USD 0.50/時間/ユニットかかるようです。また、似たような機能を持つStorage Browser for Amazon S3というものも発表されているので、そちらも触ってみて今回のTransfer Family web appsとの比較をしたいと思います。





# <font color="rgb(107, 142, 35)">参考記事・動画</font>

https://aws.amazon.com/jp/blogs/news/announcing-aws-transfer-family-web-apps-for-fully-managed-amazon-s3-file-transfers/

https://aws.amazon.com/jp/aws-transfer-family/web-apps/

https://aws.amazon.com/jp/about-aws/whats-new/2024/12/aws-transfer-family-web-apps/

https://aws.amazon.com/jp/aws-transfer-family/pricing/

https://docs.aws.amazon.com/transfer/latest/userguide/webapp-identity-center.html

https://dev.classmethod.jp/articles/reInvent2024-STG217/

https://www.youtube.com/watch?v=YZVbSUHHZ5k&list=PL2yQDdvlhXf9EbbweFH0wgqnX8D-co-52&index=11

https://www.youtube.com/watch?v=S-0dAPQ5WBs&list=PL2yQDdvlhXf9EbbweFH0wgqnX8D-co-52&index=12