CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/10/11 14:00
目次

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に含めた値をレスポンスのヘッダとして含めることができます。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

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

著者プロフィール

  • 三宅 暁(ミヤケ アキラ)

    株式会社ウェルビー 開発部   フロントエンドを中心に、クラウドを用いた Web サービスのアーキテクチャ設計から継続的な開発の仕組み作りや実装まで行うプログラマ。 「目的を達成するためにより良い方法を」を念頭に、新しい考え方や技術を積極的...

  • 瀬筒 貴仁(セヅツ タカヒト)

     株式会社インキュビット R&D 統括マネージャー / みらい合同会社 代表社員  バージョン 1.0 から Ruby on Rails エンジニアとして活動する他、HTML/CSS/JavaScriptエンジニア、Webアプリケーション開発のUI/UX担当なども手がけています。現在はWE...

あなたにオススメ

All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5