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

解決策

HTTP プロキシ統合

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

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

REST API を作成する

次の手順を実行します。

1. [REST API] で、[ビルド] を選択します。
2. [API 名] に、REST API の名前を入力します。
3. [エンドポイントタイプ] メニューでエンドポイントのタイプを選択し、[API を作成] を選択します。
4. ナビゲーションペインで、お使いの API 名の下にある [リソース] を選択します。
5. [アクション] メニューで、[リソースを作成] を選択します。
6. [リソース名] に名前を入力します (key など)。
7. [リソースパス] に、パスのパラメータを入力します ({key} など)。
8. [リソースを作成] を選択します。

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

次の手順を実行します。

1. リソース名 {key}b を選択します。
2. [アクション] メニューで、[メソッドを作成] を選択します。
3. {key} のメニューで GET を選択し、チェックマークをつけます。
4. [統合タイプ] で HTTP を選択し、[HTTP プロキシ統合を使用] を選択します。[HTTP メソッド] は GET のままにします。
5. [エンドポイント URL] に http://BUCKET_NAME.s3-website.REGION.amazonaws.com/{key} と入力し、[保存] を選択します。

REST API をデプロイする

次の手順を実行します。

1. [アクション] メニューで、[API をデプロイ] を選択します。

2. [デプロイステージ] メニューで、[新規ステージ] を選択します。

3. [ステージ名] に名前を入力します (Dev など)。

4. [デプロイ] を選択します。

5. Dev Stage Editor に表示されている、API をテストするための呼び出し URL を書き留めます。

6. 次のコマンドを実行して Amazon S3 ウェブサイト用の API プロキシをテストします。

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

   注: 例に記載された URL は、実際の呼び出し URL に置き換えてください。

AWS サービス統合

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

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

次の手順を実行します。

1. Amazon S3 上に静的ウェブサイトを設定します。
   注: 静的ウェブサイトを設定する際、手順 3 はスキップしてください。デフォルトの [すべてのパブリックアクセスをブロック] 設定は有効のままにします。

2. ステップ 4 のバケットポリシーを変更して、API プロキシが Amazon 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:API_ID/*/GET/"
           }
         }
     }]
   }

3. GetObject が Amazon S3 バケットへアクセスすることを許可する AWS Identity and Access Management (IAM) ポリシーを作成します。

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

4. IAM ロールを作成し、上記の IAM ポリシーをアタッチします。

5. 後のステップで使用するために、IAM ロールの ARN を書き留めておきます。
   API Gateway がロールを引き受けるには、IAM ロールに次の信頼ポリシーが含まれている必要があります。

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

API Gateway コンソールを使用して次の手順を実行します。

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

次の手順を実行します。

1. [API の作成] を選択します。
2. [REST API] を選択し、[ビルド] を選択します。
3. [API 名] に、REST API の名前を入力します。
4. [エンドポイントタイプ] では、クライアントトラフィックの大部分を占める発信元に基づき、エンドポイントタイプを選択します。
   注: インターネットからアクセスされるパブリックサービスには、エッジ最適化エンドポイントを使用することをおすすめします。リージョンのエンドポイントは、主に同じ AWS リージョン内からアクセスされる API に使用されます。
5. [API の作成] を選択します。

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

Amazon S3 静的ウェブサイトへのプロキシリクエストにルートメソッドを設定するには、次の手順を実行します。

1. ルートリソース "/" を選択します。
2. [アクション] メニューで [メソッドを作成] を選択します。
3. [GET] を選択し、チェックマークをつけます。
4. [統合タイプ] で [AWS サービス] を選択します。
5. [AWS リージョン] メニューで、該当するリージョンを選択します。
6. [AWS サービス] メニューで Simple Storage Service (S3) を選択します。
7. [AWS サブドメイン] のフィールドは、空白のままにします。
8. [HTTP メソッド] で [GET] を選択します。
9. [アクションの種類]で、[パスオーバーライドを使用] を選択します。
10. [パスオーバーライド] に Amazon 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 リソースオブジェクトを作成する

S3 バケットから特定のオブジェクトにアクセスするには、フロントエンド API リクエストのオブジェクトパスをマッピングする {object} という名前のリソースを作成します。GET https://your-api-host/stage/home.html を GET S3 バックエンド https://your-s3-host/home.html にマッピングする場合の例を次に示します。

次の手順を実行します。

1. [リソース] を選択します。
2. [アクション] メニューで [リソースを作成] を選択します。
3. [リソース名] に名前を入力します ({object} など)。
4. [リソースパス] に、パスを入力します ({object} など)。
5. [リソースを作成] を選択します。

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

次の手順を実行します。

1. {オブジェクト} を選択します。
2. [アクション] メニューで [メソッドを作成] を選択します。
3. [GET] を選択し、チェックマークをつけます。
4. [統合タイプ] で [AWS サービス] を選択します。
5. [AWS リージョン] メニューで、該当するリージョンを選択します。
6. [AWS サービス] メニューで Simple Storage Service (S3) を選択します。
7. [AWS サブドメイン] のフィールドは、空白のままにします。
8. [HTTP メソッド] で [GET] を選択します。
9. [アクションの種類]で、[パスオーバーライドを使用] を選択します。
10. [パスオーバーライド] に Amazon S3 バケットのパスを入力します (BUCKET_NAME/{object} など)。
11. [実行ロール] に、IAM ロールの ARN を入力します。
12. [保存] を選択します。
13. [リソース名 {object}] で [GET] を選択した後、[統合リクエスト] を選択します。
14. [URL パスのパラメータ] を展開し、名前値オブジェクトとマッピング元の値 method.request.path.object を入力した後、チェックを入れて保存します。

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

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

次の手順を実行します。

1. [GET] を選択します。
2. [リソース /] で [メソッドレスポンス] を選択します。
3. [HTTP ステータス 200] の横にある矢印を展開します。
4. [200 に対するレスポンスヘッダー] で、[ヘッダーを追加] を選択します。
5. ヘッダーの [名前] に [Content-Type] を選択し、チェックマークをつけて保存します。
6. [メソッドの実行] を選択します。
7. [統合レスポンス] を選択した後、[HTTP ステータスの正規表現] の横にある矢印を展開します。
8. [ヘッダーのマッピング] を展開します。
9. [Content-Type] で、マッピング値に integration.response.header.Content-Type を入力します。
10. リソース /{object} の GET メソッドに対してステップ 1 ～ 6 を繰り返します。
11. この記事の「REST API をデプロイする」セクションの手順を繰り返します。

API プロキシをテストする

Amazon S3 静的ウェブサイト用の API プロキシをテストするために、ブラウザまたは curl コマンドを使用します。

ルート (/) リソース

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

{Object} リソース

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 用のデプロイを作成する