Amazon S3 を使用して、API Gateway をプロキシとして使用する静的ウェブサイトをホストするにはどうすればよいですか?

解決策

Amazon S3 を使用すると、静的ウェブサイトをホストできます。また、HTTP プロキシ統合または AWS サービス統合のいずれかを使用して、API ゲートウェイを Amazon S3 静的ウェブサイトのプロキシとして設定することもできます。

HTTP プロキシ統合

Amazon S3 静的ウェブサイトが一般公開されている場合は、HTTP 統合を使用して API Gateway の S3 静的ウェブサイトの URL を指定します。

まだ一般公開されていない場合は、チュートリアルに従って Amazon S3 で静的ウェブサイトを設定します。

REST API を作成する

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

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

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

REST API をデプロイする

1. [アクション] ドロップダウンリストで [API のデプロイ] を選択します。
2. [デプロイされるステージ] ドロップダウンリストで \ [新しいステージ] を選択します。
3. [ステージ名] に名前を入力します。例:「Dev」。
4. [デプロイ] を選択します。開発ステージのエディタから、呼び出す URL を書き留めておきます。後で API をテストする際に必要になります。
5. 次のような curl コマンドを使用して、Amazon S3 ウェブサイトの API プロキシをテストします。

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

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. Amazon S3 バケットへの GetObject API へのアクセス権限を持つ 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"
     }]
   }

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

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

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

ルートのメソッドは、Amazon S3 静的ウェブサイトへのプロキシリクエスト用に設定されています。

1. ルートリソース**「/」を選択した状態で、[アクション]** ドロップダウンリストで [メソッドの作成] を選択します。
2. ドロップダウンリストで [GET] を選択し、チェックマークアイコンを選択します。
3. [統合タイプ] で、[AWS サービス] を選択します。
4. [AWS リージョン] ドロップダウンリストで、使用している AWS リージョンを選択します。
5. [AWS サービス] ドロップダウンリストで [Simple Storage Service (S3)] を選択します。
6. [AWS サブドメイン] は空白のままにします。
7. [HTTP メソッド] で、[GET] を選択します。
8. [アクションの種類] で、[パス上書きの使用] を選択します。
9. [パス上書き] に、BUCKET_NAME/index.html のような Amazon S3 バケットパスを入力します。
10. [実行ロール] に、先ほど作成した IAM ロールの ARN を貼り付けます。
11. [保存] を選択します。

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

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

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

1. [リソース] の [アクション] ドロップダウンリストで [リソースの作成] を選択します。
2. [リソース名] に名前を入力します。例:「{object}」。
3. [リソースパス] にパスを入力します。例:「{object}」。
4. [リソースの作成] を選択します。

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

1. {object} リソースを選択した状態で、[アクション] ドロップダウンリストで [メソッドの作成] を選択します。
2. ドロップダウンリストから [GET] を選択し、チェックマークアイコンを選択します。
3. [統合タイプ] で、[AWS サービス] を選択します。
4. [AWS リージョン] ドロップダウンリストで、使用している AWS リージョンを選択します。
5. [AWS サービス] ドロップダウンリストで [Simple Storage Service (S3)] を選択します。
6. [AWS サブドメイン] は空白のままにします。
7. [HTTP メソッド] で、[GET] を選択します。
8. [アクションの種類] で、[パス上書きの使用] を選択します。
9. [パス上書き] に、BUCKET_NAME/{object} のような Amazon S3 バケットのパスを入力します。
10. [実行ロール] に、先ほど作成した IAM ロールの ARN を貼り付けます。
11. [保存] を選択します。
12. リソース名 {object} で [GET] を選択し、その後、[統合リクエスト] を選択します。
13. [URL パスパラメータ] を展開し、[名前] の値を「object」、[マッピング元] の値を「method.request.path.object」と入力し、チェックボックスを選択して保存します。

GET メソッドのレスポンスヘッダーのマッピングを設定する

バックエンドのコンテンツタイプのヘッダーパラメーターの値を、フロントエンドの対応する情報にマッピングします。これにより、ブラウザはコンテンツタイプで応答を正常に処理するようになります。

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

API プロキシをテストする

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

ルート (/) リソース

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

{オブジェクト} リソース

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

関連情報

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

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

Amazon API Gateway で REST API を作成する

API Gateway コンソールから REST API をデプロイする