AWSサーバレスアーキテクチャでSPAを実装する（1）～SSLを経由してブラウザからLambda APIへアクセスするまでの下準備

サーバレスアーキテクチャによるアプリケーション開発実践入門 第2回

API GatewayでSSLを経由してアクセスできるようにする［1］

　第1回で作成したAPIを、カスタムドメインでアクセスできるようにしていきます。

　AWSマネジメントコンソールから、［API Gateway］をクリックします。

Lambda関数の修正

　第1回で作成したAPIは、API Gatewayへのアクセスに対して、Lambda関数でステータスコードとレスポンスボディを返すようになっています。

　curlやブラウザから直接呼び出す場合は問題がないのですが、静的コンテンツのJavaScriptから利用する場合は、CORS（Cross-Origin Resource Sharing）に対応する必要があります。

　今回用意したドメインでは、静的コンテンツのドメインはwww.example.com、APIのドメインはapi.example.comと異なるドメインになっているため、CORSの同一オリジンポリシーに反し、ブロックの対象となります。

［1］API Gatewayに紐づくLambda関数の選択

　カスタムドメインを設定する前に、Originを越えるアクセスを許容するように、Lambda関数の修正を行います。

　[lambda-first-api］の［リソース］をクリックし、［/hello-lambda］以下の［ANY］をクリックします。

　一番右の［hello-lambda］をクリックし、API Gatewayに紐づくLambda関数の設定画面に移動します。

［2］CORS（Cross-Origin Resource Sharing）への対応

　レスポンスにAccess-Control-Allow-Origin: *を含むヘッダー情報を追加し、ブラウザからOriginを越えたアクセスを実行できるようにします。

　GETで呼び出された際のレスポンスを定義する箇所を、以下のように変更します。

response = {
    statusCode: 200,
    headers: {
        'Access-Control-Allow-Origin': '*'
    },
    body: Hello, ${name}!
};

　今回はAccess-Control-Allow-Originだけですが、headersに含めた値をレスポンスのヘッダとして含めることができます。