翻訳は機械翻訳により提供されています。提供された翻訳内容と英語版の間で齟齬、不一致または矛盾がある場合、英語版が優先します。
# チュートリアル: 基本的な Transfer Family ウェブアプリのセットアップ
このチュートリアルでは、Transfer Family ウェブアプリを設定する方法について説明します。Transfer Family ウェブアプリケーションを使用すると、ウェブブラウザ経由で Amazon S3 との間でデータを転送するためのシンプルなインターフェイスが可能になります。この機能の詳細なドキュメントについては、「」を参照してください[Transfer Family ウェブアプリ](web-app.md)。
## ウェブアプリケーションチュートリアル: 前提条件
+ のアカウントインスタンスまたは組織インスタンスを作成します AWS IAM アイデンティティセンター。詳細については、「[Transfer Family ウェブアプリケーションの ID プロバイダーを設定する](webapp-identity-center.md)」を参照してください。
ID プロバイダーとして IAM Identity Center を使用していない場合、 [ウェブアプリケーションの ID プロバイダーとして Okta を統合する](#web-tutorial-okta)は代替 (この場合は Okta) ID プロバイダーの使用方法を示します。
+ Transfer Family ウェブアプリケーションの操作に使用する Amazon S3 バケットが必要です。詳細については、「[Amazon S3 バケットを設定する](configure-storage.md#requirements-S3)」を参照してください。
**注記**
このチュートリアルでは、ID プロバイダーの IAM Identity Center ディレクトリを使用していることを前提としています。そうでない場合は、このチュートリアルに進む[Transfer Family ウェブアプリケーションの ID プロバイダーを設定する](webapp-identity-center.md)前に「」を参照してください。
チュートリアルを完了すると、ユーザーはログインして、作成したウェブアプリとやり取りできます。
## ステップ 1: 必要なサポートリソースを作成する
IAM Identity Center ディレクトリにユーザーを追加する必要があります。また、2 つのロールも必要です。1 つはウェブアプリケーションの ID ベアラーロールとして使用し、もう 1 つは Amazon S3 アクセス許可の設定に使用します。このチュートリアルでは、 AWS サービスがこれらのロールを作成できるようにします。
**ユーザーを追加するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/singlesignon/](https://console.aws.amazon.com/singlesignon/) で AWS IAM アイデンティティセンター コンソールを開きます。
1. 左側のナビゲーションペインから、**ユーザー**を選択します。
1. **ユーザーを追加** を選択し、ユーザーの詳細を指定します。
ユーザー名、E メールアドレス、およびその他の必要な情報を指定します。パスワードの設定手順を記載した E メールをユーザーに送信するか、ワンタイムパスワードを生成して共有するかを選択できます。
1. **Next** を選択し、オプションで新しいユーザーを 1 つ以上のグループに割り当てます。
1. **次へ** を選択し、選択内容を確認します。
すべて問題ない場合は、**ユーザーの追加** を選択して、指定した詳細で新しいユーザーを作成します。
チュートリアルでは、サンプルユーザーは **Bob Stiles**、ユーザー名**ボブタイル**、E メールアドレス **bobstiles@example.com** です。
## ステップ 2: Transfer Family ウェブアプリケーションを作成する
**Transfer Family ウェブアプリを作成するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/transfer/](https://console.aws.amazon.com/transfer/) で AWS Transfer Family コンソールを開きます。
1. 左側のナビゲーションペインで、**ウェブアプリ**を選択します。
1. **ウェブアプリの作成** を選択します。
認証アクセスの場合、サービスは前提条件として設定した AWS IAM アイデンティティセンター インスタンスを自動的に検出することに注意してください。
1. アクセス**許可タイプ**ペインで、**新しいサービスロールを作成して使用します**。サービスによって ID ベアラーロールが作成されます。ID ベアラーロールには、認証されたユーザーの ID がセッションに含まれます。
1. **ウェブアプリユニット**ペインで、デフォルト値の 1 を受け入れるか、必要に応じてより高い値に調整します。
1. ウェブアプリの整理に役立つタグを追加します。チュートリアルでは、キー**の名前**と 値の**チュートリアルウェブアプリ**を入力します。
**ヒント**
ウェブアプリケーション名は、作成後に**ウェブアプリケーション**リストページから直接編集できます。
1. **次へ** を選択して、ウェブ**アプリの設計**ページを開きます。この画面では、次の情報を入力します。
オプションで、ウェブアプリのタイトルを指定できます。ロゴとファビコンのイメージファイルをアップロードすることもできます。
+ ページタイトルについては、ユーザーがウェブアプリに接続するときに表示されるブラウザタブのタイトルをカスタマイズします。ページタイトルに何も入力しない場合、デフォルトで **Transfer Web App** になります。
+ ロゴの場合は、イメージファイルをアップロードします。ロゴイメージの最大ファイルサイズは 50 KB です。
+ ファビコンの場合は、イメージファイルをアップロードします。ファビコンの最大ファイルサイズは 20 KB です。
1. **Next** を選択し、Create **web app **を選択します。
ブランドエクスペリエンスを提供するために、ユーザーが Transfer Family ウェブアプリにアクセスするためのカスタム URL を指定できます。詳細については、「[アクセスエンドポイントをカスタム URL で更新する](webapp-customize.md)」を参照してください。
## ステップ 3: バケットの Cross-Origin Resource Sharing (CORS) を設定する
ウェブアプリケーションで使用されるすべてのバケットに対して、Cross-Origin Resource Sharing (CORS) を設定する必要があります。*CORS 設定*は、バケットへのアクセスを許可するオリジンを識別するルールを定義するドキュメントです。CORS の詳細については、[「クロスオリジンリソース共有 (CORS) の設定](https://docs.aws.amazon.com/AmazonS3/latest/userguide/enabling-cors-examples.html?icmpid=docs_amazons3_console)」を参照してください。
**Amazon S3 バケットの Cross-Origin Resource Sharing (CORS) を設定するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) で Amazon S3 コンソールを開きます。
1. 左側のナビゲーションパネルから**バケット**を選択し、検索ダイアログでバケットを検索し、**アクセス許可**タブを選択します。
1. **クロスオリジンリソース共有 (CORS)** で、次のコードで**編集**して貼り付けます。*AccessEndpoint* をウェブアプリの実際のアクセスエンドポイントに置き換えます。ユーザーがウェブアプリにログオンしようとするとエラーが発生するため、末尾にスラッシュを入力しないようにしてください。
+ 正しくない例: `https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws/`
+ 正しい例: `https://webapp-c7bf3423.transfer-webapp.us-east-2.on.aws`
複数のウェブアプリでバケットを再利用する場合は、そのウェブアプリのアクセスエンドポイントを`AllowedOrigins`リストに追加します。
```
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE",
"HEAD"
],
"AllowedOrigins": [
"https://AccessEndpoint"
],
"ExposeHeaders": [
"last-modified",
"content-length",
"etag",
"x-amz-version-id",
"content-type",
"x-amz-request-id",
"x-amz-id-2",
"date",
"x-amz-cf-id",
"x-amz-storage-class",
"access-control-expose-headers"
],
"MaxAgeSeconds": 3000
}
]
```
1. **変更を保存**を選択して CORS を更新します。
## ステップ 4: Transfer Family ウェブアプリにユーザーを追加する
IAM Identity Center で以前に作成したユーザーを追加します。
**Transfer Family ウェブアプリにユーザーを割り当てるには**
1. 前に作成したウェブアプリに移動します。
1. **[ユーザーとグループの割り当て]** を選択します。
![\[選択したウェブアプリの詳細を示す画面。\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-transfer-details.png)
1. IAM Identity Center で以前に作成したユーザーを割り当てるには、**既存のユーザーとグループの割り当て**を選択し、**次へ**を選択します。
1. 表示名でユーザーを検索します。検索条件の入力を開始するまで、ユーザーは表示されないことに注意してください。を追加するには**Bob Stiles**、検索ボックスに **bob** と入力します。ユーザーが見つからない場合は、IAM Identity Center 管理コンソールに移動し、ユーザーを見つけてから、ここに表示名をコピーして貼り付けます。
1. **Bob Stiles** ユーザーを選択し、**割り当て**を選択します。
## ステップ 5: Amazon S3 にロケーションを登録し、アクセス許可を作成する
ウェブアプリにユーザーを割り当てたら、バケットを登録し、そのユーザーのアクセス許可を作成する必要があります。
**注記**
続行するには、S3 Access Grants インスタンスが必要です。詳細については、*Amazon Simple Storage Service* [ユーザーガイドのS3 Access Grants インスタンスの作成](https://docs.aws.amazon.com/AmazonS3/latest/userguide/access-grants-instance-create.html)」を参照してください。
**ロケーションを登録してアクセス許可を作成するには**
1. にサインイン AWS マネジメントコンソール し、[https://console.aws.amazon.com/s3/](https://console.aws.amazon.com/s3/) で Amazon S3 コンソールを開きます。
1. 左側のナビゲーションペインから**アクセス許可**を選択します。
1. **詳細の表示**を選択して、S3 Access Grants インスタンスの詳細を表示します。
1. **Locations **タブを選択し、**Register location** を選択します。
1. 以下の情報を指定します。
+ **スコープ**には、バケットを参照するか、バケットの名前を入力し、オプションでプレフィックスを入力します。スコープは文字列 で始まることに注意してください**s3://**。
+ IAM ロールで、Amazon S3 **S3 **にロールを作成させる新しいロールの作成を選択します。このロールにより、S3 Access Grants は指定されたロケーションスコープにアクセスできます。
![\[Amazon S3 Register S3 Buckets or prefixes as locations ダイアログとデフォルトの Scope および Create new role settings を示す画面。\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-grants-register-new.png)
続行するには**、ロケーションの登録**を選択します。
1. Grants ****タブを選択し、Create **Grant **を選択し、次の詳細を指定します。
+ **Location** で、**場所を参照**を選択し、前のステップで登録した場所を選択します。
+ **Subprefix** には、 と入力**\$1**して、アクセス許可がバケット全体に適用されることを示します。
+ アクセス**許可 で**、**読み取り**と**書き込み**を選択します。
+ **被付与者タイプ**で、**IAM アイデンティティセンターからディレクトリアイデンティティ**を選択します。
+ **ディレクトリ ID タイプ**で、**ユーザー**を選択します。
+ **IAM Identity Center ユーザー/ ID** で、 のユーザー ID をコピーして貼り付けます**Bob Stiles**。この ID は、Transfer Family ウェブアプリケーションの**ユーザー**ペインで使用できます。
1. Create **Grant **を選択します。
アクセス許可が作成されます。
## ステップ 6: ユーザーとして Transfer Family ウェブアプリにアクセスする
次に、ウェブアプリケーションの URL に移動し、前に割り当てたユーザーとしてログインします。
**Transfer Family ウェブアプリにログオンするには**
1. ウェブアプリに移動する
1. **ウェブアプリの詳細**ペインから**アクセスエンドポイント**を選択します。
![\[チュートリアル中に作成されたウェブアプリの詳細を示す画面。\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-transfer-tutorial-enduser.png)
1. サインイン画面で、作成したユーザー を入力し**bobstiles**、**次へ**を選択します。
1. 作成時にシステムがこのユーザーに割り当てたパスワードを入力し、**次へ**を選択します。
1. 組織で多要素認証 (MFA) が必要な場合は、今すぐ設定する必要があります。そうでない場合は、ステップ 6 に進みます。
1. MFA デバイスを登録する画面が表示されます。使用可能なオプションのいずれかを選択し、**次へ**を選択します。
1. このユーザーの MFA を設定するために必要なステップを実行します。ステップは、選択した MFA オプションによって異なります。
1. ユーザーの新しいパスワードを設定する必要がある場合があります。必要に応じて、今すぐ設定してください。システムは、設定した新しい MFA 認証情報を使用して再度サインインする必要がある場合もあります。
使用すると、次のような画面が表示されます。このスクリーンショットには、ファビコンとロゴのカスタマイズが含まれていることに注意してください。
![\[タイトル、ファビコン、ロゴをカスタマイズした Transfer Family ウェブアプリの例。\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-tutorial-enduser.png)
## 次の手順
S3 バケットへの標準アクセスを持つ基本的な Transfer Family ウェブアプリを正常にセットアップしました。ユーザーが 1 つのバケットからダウンロードして別のバケットにアップロードできるようにするなど、バケットのアクセス許可をより詳細に制御する必要がある場合は、「」を参照してください[チュートリアル: 選択的マルチバケットアクセスを使用した AWS Transfer Family ウェブアプリの設定](webapp-s3-tutorial.md)。
## ウェブアプリケーションの ID プロバイダーとして Okta を統合する
外部 ID プロバイダーを Transfer Family ウェブアプリと統合できます。このセクションでは、ID プロバイダーとして Okta を設定する方法について説明します。
1. Okta で、ユーザー、グループ、アプリケーションを作成します。これを行う方法の詳細については、「Configure [SAML and SCIM with Okta and IAM Identity Center](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)」を参照してください。
![\[Transfer Family ウェブアプリケーションチュートリアルで使用する Okta アプリケーションの例\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-tutorial-okta.png)
1. Okta を接続し、Okta からユーザーとグループをインポートします AWS IAM アイデンティティセンター。[「Okta と IAM アイデンティティセンターで SAML と SCIM を設定する](https://docs.aws.amazon.com/singlesignon/latest/userguide/gs-okta.html)」のステップ 1～4 に従います。
![\[Okta から統合されたユーザーの例を示す IAM Identity Center\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-tutorial-okta-ic-user.png)
![\[Okta から統合されたグループの例を示す IAM Identity Center\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-tutorial-okta-ic-group.png)
1. IAM アイデンティティセンターの ID ソースが SAML 2.0 であることを確認します。
![\[ID ソースが SAML 2.0 であることを示す IAM Identity Center\]](http://docs.aws.amazon.com/ja_jp/transfer/latest/userguide/images/webapp-tutorial-okta-confirm.png)
1. 「」の説明に従って、ユーザーとグループを割り当てます[ステップ 4: Transfer Family ウェブアプリにユーザーを追加する](#web-tutorial-step4)。
1. ユーザーがウェブアプリにログインするときに MFA を使用する必要がないようにするには、Okta で次の手順を実行します。
1. Okta 管理者コンソールから [**アプリケーション] - [アプリケーション]** にアクセスし、アプリケーションを選択します AWS IAM アイデンティティセンター 。
1. **サインオン**タブで、**[ユーザー認証] - 編集**を選択します。
1. **パスワードのみ**を選択します。
チュートリアルの他のすべてのステップを実行すると、ユーザーはウェブブラウザでウェブアプリのアクセスエンドポイントに移動して Transfer Family ウェブアプリにアクセスできるようになります。