SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

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

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

次のページ
API GatewayでSSLを経由してアクセスできるようにする[2]

この記事は参考になりましたか?

サーバレスアーキテクチャによるアプリケーション開発実践入門連載記事一覧
この記事の著者

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

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

三宅 暁(ミヤケ アキラ)

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

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10365 2017/10/11 14:00

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー