この記事の目的は？

以下のことが学べます

API Gatewayを使ってAPIを公開する手法
静的HTMLからAPIをコールするために考慮すべきナレッジ

本記事は内容をAPIの公開に全振りするために

前回の記事S3とCloudFrontで静的WEBホスティングを公開する手法で構築したS3+CloudFrontの構成を流用する前提で作っております

構成図

一旦マネージメントコンソールで手動作成すれば、IaC（Infrastructure as Code）化の際にもイメージしやすいでしょう

この記事の構成

記事の前半ではAPI GatewayでAPIを公開する準備をします

なお本記事ではバックエンドAPIを作成せず、サンプルAPIでAPI Gatewayの動作を確認します

このサンプルAPIはバックエンドロジックを持たず、常に固定のレスポンスを返します

API Gatewayを作成　　
サンプルAPIをデプロイ

記事の後半では静的HTMLからサンプルAPIをコールするために必要な設定を加えます

最後に作成したAPIのコールテストをして終了です

3.S3の静的HTMLをAPIコールする内容に書き換え

4.CORSを設定

5.APIコールテスト

1.API Gatewayを作成

まずはAPIをコールするための準備としてAPI Gatewayを作成します

マネジメントコンソール→API Gateway→APIを作成を選択

構成が簡単で、かつサンプルAPIが用意されている RESTAPIを選択

インポートを押します

"プロトコルを選択する"はREST

"新しいAPIの作成"は APIの例

にチェックを入れ、最下部のインポートを選択

API Gatewayが用意してくれたサンプルAPI PetStoreが作成されました

2. サンプルAPIをデプロイ

作成したPetStoreをAPI Gatewayへ反映させるために アクション → APIのデプロイを選択

"デプロイされるステージ"　は**[新しいステージ]**

"ステージ名"　は任意の名前（分かりやすくdevにします）

デプロイ実行！

APIが無事作成されると、URLの呼び出しにAPIを呼び出すURLが表示されます

このAPIはブラウザからもアクセスできるので、ブラウザ経由でAPIが作られているかを確認してみましょう

ブラウザからアクセスして、Welcome to your Pet Store API　というウェルカムページが返ってきたはずです

さらに次はAPIを直接叩いてレスポンスを確認しましょう

API Gatewayのリソース画面です

/の下に/petsがあります、これがAPI本体です

先程のURLの末尾に**/pets**を付け足して

https://(先程アクセス成功したPetStoreのURL)/pets

アクセスして返ってきた画面がこちらです

1.dog 2.cat 3.fish …といった、ペットショップの商品リストようなレスポンスが返ってきました

無事、サンプルAPIがデプロイされ、APIが機能していることを確認できました

3. S3の静的HTMLをAPIコールする内容に書き換え

前回の記事S3とCloudFrontで静的WEBホスティングを公開する手法で作成した静的HTMLを直接編集し

APIをコールする内容に書き換えます

取得内容を確認する手段はいくつかはありますが、前回の構成から確認できるようjqueryを利用して

取得した結果を表示して確認できるようにします

<!DOCTYPE html>
<html

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script>
    function callapi() {
      $.ajax({
        type: "GET",
        url: "https://(たった今アクセス成功したPetStore APIのURL)/pets",
      }).done(function (data, status, xhr) {
        alert(JSON.stringify(data));
      }).fail(function (xhr, status, error) {
        alert('http error:' + xhr.status);
      });
    }
  </script>
</head>

<body>
  <h1>API Gateway Test</h1><br>
  <INPUT type="button" name="btnA" value="call api gateway(get log)" onclick="callapi()">
</body>

</html>

4. CORSを設定

このままでは静的HTMLのオリジンからAPI Gatewayのオリジンに遷移する際にエラーが起きます

エラーの原因は、ブラウザのセキュリティ機能によるものです

通常、ブラウザは同じドメインへのHTTPリクエストのスクリプト実行を許可していますが、異なるドメインへの場合はこれを制限します

これを回避するために**CORS（Cross-Origin Resource Sharing）**を設定する必要があります

実際に設定して、動作を確認してみましょう

マネジメントコンソールでS3へ

該当バケットを開き、アクセス許可を選択

最下部に**Cross-Origin Resource Sharing（CORS）**の欄があるので

編集ボタンを押して設定を追加して変更の保存をしましょう

CORS設定内容

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
    }
]

無事CORSが設定されました

(今回はテストなのでAllowedOriginsはあえて絞らず　"*"　設定していますが、実稼働するサービスでは対象を選定して設計しましょう）

Cross-Origin Resource Sharing (CORS) の使用

Cross-Origin Resource Sharing (CORS) は、特定のドメインにロードされたクライアントウェブアプリケーションが異なるドメイン内のリソースと通信する方法を定義します
Amazon S3 の CORS のサポートによって、Amazon S3 でリッチなクライアント側ウェブアプリケーションを構築し、Amazon S3 リソースへのクロスオリジンアクセスを選択的に許可できます

5. APIコールテスト

ではいよいよAPIのコールテストをします

前回の記事S3とCloudFrontで静的WEBホスティングを公開する手法で作成したCloudFrontのディストリビューションドメイン名のURLにアクセスします

通信の概要図

通信の流れはこのようなイメージです

まずClientPCからリクエストを受けたCloudFrontは、S3からキャッシュしたindex.htmlをClientPCへ返します

index.htmlにはAPIをコールするボタンが設置してあります

ClientPCは受けとったindex.htmlのAPIコールボタンを押すとAPI Gateway→PetStoreへリクエストを投げ、そのレスポンスはブラウザに表示されます

先程、静的HTMLをAPIコールする内容に書き換えているので

下画面のようなAPIをコールするボタンが表示されます

ここでCall api gateway を押すと・・・

API GatewayにデプロイしたPetStoreAPIを無事呼び出すことができました！

返ってきた値は、先ほどAPIのレスポンス確認で見た内容と同じ

1.dog 2.cat 3.fish …といった、ペットショップの商品リストようなレスポンス内容ですね

終わりに

無事にAPI機能を持ったWEBサイトを作成できました

次回は、今回構築した構成にcognito認証を追加して特定のユーザーのみアクセスできる機能を追加する記事を作成予定です