Amazon S3 を使用して、API Gateway をプロキシとして使用する静的ウェブサイトをホストする方法を教えてください。

解決策

Amazon S3 を使用して API Gateway をプロキシとして使用する静的ウェブサイトをホストするには、HTTP 統合または AWS サービス統合を使用します。

HTTP 統合を使用する

静的ウェブサイトがパブリックにアクセス可能な場合は、HTTP 統合を使用して API に Amazon S3 静的ウェブサイトの URL を指定します。

Amazon S3 上に静的ウェブサイトを設定します。次に、API Gateway コンソールを使用して REST API とルートリソース用のメソッドを作成し、REST API をデプロイします。

REST API を作成する

次の手順を実行します。

1. API Gateway コンソールを開きます。
2. [API を作成] を選択します。
3. [REST API] で [ビルド] を選択します。
4. [API 名] に、REST API の名前を入力します。
5. [API エンドポイントタイプ] ドロップダウンリストから、[エンドポイントタイプ] を選択し、[API の作成] を選択します。
6. ナビゲーションペインで、API の下にある [リソース] を選択します。
7. [リソースを作成] を選択します。
8. [リソースパス] は / のままにします。
9. [リソース名] に名前を入力します。例: key
10. [リソースを作成] を選択します。

ルートリソース用のメソッドを作成する

次の手順を実行します。

1. [リソース] で、作成したリソースを選択します。例: /key
2. [メソッド] で [メソッドを作成] を選択します。
3. [メソッドタイプ] ドロップダウンリストから、[GET] を選択します。
4. [統合タイプ] で [HTTP] を選択します。
5. HTTP プロキシ統合を選択します。
6. [HTTP メソッド] ドロップダウンリストから、[GET] を選択します。
7. [エンドポイント URL] に http://BUCKET_NAME.s3-website.REGION.amazonaws.com/key と入力します。<br id=hardline_break/> 注: BUCKET_NAME を実際のバケット名に、REGION をバケットのリージョンに、key をリソース名に置き換えてください。
8. [メソッドを作成] を選択します。

REST API をデプロイする

次の手順を実行します。

1. [API のデプロイ] を選択します。
2. [ステージ] ドロップダウンリストから、[*新しいステージ*] を選択します。
3. [ステージ名] に名前を入力します。例: STAGE_NAME
4. [デプロイ] を選択します。
5. [ステージの詳細] で、API をテストするための呼び出し URL をメモします。
6. S3 ウェブサイトの API プロキシをテストするには、次の curl コマンドを実行します。

   curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/index.html

   注: API_ID を実際の API ID に、REGION を実際のリージョンに、STAGE_NAME をステージの名前に置き換えてください。

AWS サービス統合を使用する

S3 静的ウェブサイトを設定する

S3 静的ウェブサイトがパブリックアクセスからブロックされている場合は、API プロキシからのみアクセスできるようにウェブサイトを設定します。

次の手順を実行します。

1. Amazon S3 上に静的ウェブサイトを設定します。<br id=hardline_break/> 注: 静的ウェブサイトを設定する場合は、「ステップ 3: ブロックパブリックアクセス設定の編集」セクションをスキップしてください。デフォルトの [すべてのパブリックアクセスをブロック] 設定は有効のままにします。
2. バケットのコンテンツを公開するバケットポリシーを変更して、API プロキシが S3 バケットにのみアクセスできるようにします。バケットポリシーの例:

   {  
     "Version": "2012-10-17",
     "Statement": [{
         "Sid": "APIProxyBucketPolicy",
         "Effect": "Allow",
         "Principal": {
           "Service": "apigateway.amazonaws.com"
         },
         "Action": "s3:GetObject",
         "Resource": "arn:aws:s3:::BUCKET_NAME/*",
         "Condition": {
           "ArnLike": {
             "aws:SourceArn": "arn:aws:execute-api:REGION:ACCOUNT_ID:API_ID/*/GET/"
           }
         }
     }]
   }

   注: BUCKET_NAME を実際のバケット名に、REGION を実際のリージョンに、ACCOUNT_ID を AWS アカウント ID に、API_ID を API ID に置き換えてください。
3. GetObject API に S3 バケットへのアクセスを許可する AWS Identity and Access Management (IAM) ポリシーを作成します。IAM ポリシーの例:

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Effect": "Allow",
       "Action": ["s3:GetObject"],
       "Resource": [
           "arn:aws:s3:::BUCKET_NAME/*"
       ]
     }]
   }

   注: BUCKET_NAME を実際のバケット名に置き換えてください。
4. IAM ロールを作成し、上記の IAM ポリシーをアタッチします。
5. IAM ロールの Amazon リソースネーム (ARN) をメモします。<br id=hardline_break/> 注: API Gateway がロールを引き受けるには、IAM ロールに次の信頼ポリシーが含まれている必要があります。

   {
     "Version": "2012-10-17",
     "Statement": [{
       "Sid": "",
       "Effect": "Allow",
       "Principal": {
           "Service": "apigateway.amazonaws.com"
       },
       "Action": "sts:AssumeRole"
     }]
   }

S3 サービス用の REST API プロキシを作成する

次の手順を実行します。

1. API Gateway コンソールを開きます。
2. [API を作成] を選択します。
3. [REST API] で [ビルド] を選択します。
4. [API 名] に、REST API の名前を入力します。
5. [API エンドポイントタイプ] ドロップダウンリストから、クライアントトラフィックの大部分を占める発信元に基づき、エンドポイントタイプを選択します。<br id=hardline_break/> 注: クライアントトラフィックがインターネットからアクセスするパブリックサービスには、エッジ最適化エンドポイントを使用することをおすすめします。クライアントトラフィックが同じ AWS リージョン内からのみ API にアクセスする場合は、リージョンのエンドポイントを使用してください。
6. [API を作成] を選択します。

ルートリソースの GET メソッドを作成する

次の手順を実行します。

1. ルートリソース / を選択します。
2. [メソッドを作成] を選択します。
3. [メソッドタイプ] ドロップダウンリストから、[GET] を選択します。
4. [統合タイプ] で [AWS サービス] を選択します。
5. [AWS リージョン] ドロップダウンリストから、自分のリージョンを選択します。
6. [AWS サービス] ドロップダウンリストから、[Simple Storage Service (S3)] を選択します。
7. [AWS サブドメイン] のフィールドは、空白のままにします。
8. [HTTP メソッド] ドロップダウンリストから、[GET] を選択します。
9. [アクションの種類] で [パスオーバーライドを使用] を選択します。
10. [パスオーバーライド] に S3 バケットパスを入力します。例: BUCKET_NAME/index.html
11. [実行ロール] に、IAM ロールの ARN を入力します。
12. [メソッドを作成] を選択します。

注: この設定により、フロントエンドの GET API リクエスト https://your-api-host/stage/ が、GET S3 バックエンド https://your-s3-host/index.html に統合されます。

API リソースオブジェクトを作成する

次の手順を実行します。

1. [リソースを作成] を選択します。
2. [リソースパス] は / のままにします。
3. [リソース名] に名前を入力します。例: object
4. [リソースを作成] を選択します。

リソースに GET メソッドを設定する

次の手順を実行します。

1. [リソース] で、作成したリソースを選択します。例: /object
2. 「ルートリソースの GET メソッドを作成する」セクションのステップ 2 ～ 12 を実行します。
3. [GET] を選択し、[統合リクエスト] を選択します。<br id=hardline_break/> 注: object を実際のリソースの名前に置き換えてください。
4. [編集] を選択します。
5. [URL パスパラメータ] を展開し、[パスパラメータを追加] を選択します。
6. [名前] に、リソースの名前を入力します。
7. [マッピング元] で、値を method.request.path.object と入力します。<br id=hardline_break/> 注: object を実際のリソースの名前に置き換えてください。
8. [保存] を選択します。

GET メソッドに応答ヘッダーのマッピングを設定する

バックエンドコンテンツタイプのヘッダーパラメータ値をフロントエンドの対応するものにマッピングすることで、ブラウザがそのコンテンツタイプを含む応答を処理できるようにする必要があります。

次の手順を実行します。

1. [リソース] で [/] を選択します。
2. [GET] を選択し、[メソッドレスポンス] を選択します。
3. [応答 200] で [編集] を選択します。
4. [ヘッダー名] で [ヘッダーを追加] を選択します。
5. [名前] を [Content-Type] に設定します。
6. [保存] を選択します。
7. [統合レスポンス] を選択し、[編集] を選択します。
8. [ヘッダーのマッピング] の [Content-Type] の横にある [マッピング値] に、integration.response.header.Content-Type と入力します。
9. /object リソースの GET メソッドについて、ステップ 2 ～ 8 を繰り返します。<br id=hardline_break/> 注: object を実際のリソースの名前に置き換えてください。

REST API をデプロイする

次の手順を実行します。

1. [API のデプロイ] を選択します。
2. [ステージ] ドロップダウンリストから、[*新しいステージ*] を選択します。
3. [ステージ名] に名前を入力します。例: STAGE_NAME
4. [デプロイ] を選択します。
5. [ステージの詳細] で、API をテストするための呼び出し URL をメモします。

S3 静的ウェブサイトの API プロキシをテストするには、curl コマンドを実行します。

注: 以下の例では、API_ID を実際の API ID に、REGION を実際のリージョンに、STAGE_NAME を実際のステージの名前に置き換えてください。

ルートリソースをテストするには、次の curl コマンドを実行します。

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/

オブジェクトリソースをテストするには、次の curl コマンドを実行します。

curl -X GET https://API_ID.execute-api.REGION.amazonaws.com/STAGE_NAME/home.html

関連情報

チュートリアル: REST API を Amazon S3 のプロキシとして作成する

Amazon S3 を使用して静的ウェブサイトをホスティングする

API Gateway で REST API を開発する

API Gateway で REST API のデプロイを作成する