REST APIをCloudFront経由のアクセスしか許可しないようにしてみる

概要

本記事は AWSでWebアプリを構築してみる シリーズの6回目の記事です。
前回の記事は こちら。

本記事で作成する構成

図のようにCloudFrontを経由した間接的なアクセスのみ可能な状態で、API GatewayでのAPIに直接アクセスすることができなくなります。基本的には 静的ウェブサイトをCloudFront経由のアクセスしか許可しないようにする で行ったことと似ています。

REST APIをCloudFront経由のアクセスしか許可しないようにしてみる

1. CloudFront にオリジンを追加する

1. マネジメントコンソールから CloudFront を開き、静的ウェブサイトをCloudFront経由のアクセスしか許可しないようにする で作成したディストリビューションを開く

2. ディストリビューションのオリジンタブより「オリジンを作成」をクリック

   

3. Origin domain に REST APIを作成してみる で作成した API Gateway を選択して、オリジンを作成する

   

4. 「カスタムヘッダーを追加」でヘッダーを追加する

   カスタムヘッダーを追加するのはAPI GatewayへのアクセスをCloudFrontからのみに限定するしかけのためで、Referrerヘッダーに任意の値を設定する。

   

2. CloudFront にビヘイビアを追加する

1. ディストリビューションのビヘイビアタブより「ビヘイビアを作成」をクリック

   

2. パスパターンを「/api/*」のようにし、オリジンとオリジングループで REST APIを作成してみる で作成した API Gateway を選択して、ビヘイビアを作成する

   

3. API Gateway のステージを変更する

1. マネジメントコンソールから API Gatewa を開き、REST APIを作成してみる で作成したAPIを開き、ステージを削除する

   

2. マネジメントコンソールから API Gateway を開き、REST APIを作成してみる で作成したAPIを開き、GETメソッドで「APIをデプロイ」をクリック

   

3. サイドメニューのステージで「Create stage」をクリックし、ステージ名を「api」にしてデプロイする

   CloudFront のビヘイビアでパスパターンを「/api/*」のようにして、API Gateway にリクエストされるように設定したので、API Gateway 側でもステージ「api」を作成する。
   

4. API GatewayへのアクセスをCloudFrontのみに限定する

1. サイドメニューのリソースポリシーで「ポリシーを作成」をクリックして、以下のようにリソースポリシーを設定する

   {
       "Version": "2012-10-17",
       "Statement": [
           {
               "Effect": "Allow",
               "Principal": "*",
               "Action": "execute-api:Invoke",
               "Resource": "arn:aws:execute-api:<リージョン>:<アカウントID>:<API ID>/*/*/*"
           },
           {
               "Effect": "Deny",
               "Principal": "*",
               "Action": "execute-api:Invoke",
               "Resource": "arn:aws:execute-api:<リージョン>:<アカウントID>:<API ID>/*/*/*",
               "Condition": {
                   "StringNotEquals": {
                       "aws:Referer": "<CloudFrontのオリジンドメインのカスタムヘッダー（Referrer）に設定した値>"
                   }
               }
           }
       ]
   }
   

2. サイドメニューのリソースで「APIをデプロイ」をクリックし、再デプロイして反映する

5. CloudFront経由でのAPI呼び出しをテストしてみる

1. マネジメントコンソールから CloudFront を開き、静的ウェブサイトをCloudFront経由のアクセスしか許可しないようにする で作成したディストリビューションを開き、ディストリビューションドメイン名をコピーし、末尾に「/api/」を付加してブラウザで開く

   ↓以下のようなレスポンスがあればCloudFront経由でのAPI呼び出しに成功している