echo("備忘録");

IT技術やプログラミング関連など、技術系の事を備忘録的にまとめています。

【AWS】API Gatewayのエンドポイントに独自ドメインでアクセスする

概要  

前回CloudFrontを使った独自ドメインによるSPAの公開を記事にしましたが、今回はその第二弾で、API Gateway独自ドメインでアクセス方法に関する記事です。  

触れること

  • CloudFrontとAPI Gatewayの連携方法(てか、これしかない)  

触れないこと  

  • API Gatewayの細かい手順(作成方法・設定・Lambdaなどとの連携など)  
  • 前回触れた手順  

やること一覧  

API Gatewayの各種設定  

API Gatewayの作成や各種などについては、今回は触れません。
※公式サイトなどを参考に作成&デプロイしてください。そこまで難しくはないと思います)

とりあえず、動作確認用のLambda関数の正常動作が「テスト」で確認できればOKです。(「サンプルから作成」でOKです。)

重要なのは、「ステージ」で表示される「エンドポイントURL」で、これをコピーしておいて下さい。   f:id:Makky12:20190802185133p:plain

SSL証明書の作成  

これは前回の記事そのままなので、そちらを参考に独自ドメインの証明書を作成してください。(リージョン:北バージニアじゃないとダメな点に注意!)  

※本当によく忘れるんです、この設定... 

CloudFrontの設定  

で、一番重要なCloudFrontの設定です。
ただこれも前回との共通部分が多いので、違う部分だけ説明します。
(下記に記載していない項目は、前回と同じでOKです。)

項目名 設定値 説明 備考
Original Domain Name API Gatewayの各種設定」でコピーしたエンドポイントURL CloudFrontで制御を行うAWSリソース ※1
Origin Protocol Policy HTTPS Only CloudFrontから各種リソース(今回はAPI Gateway)に接続する際のプロトコル API Gatewayは、HTTPSのみ許可しているので
Origin Response Timeout 4~60のいずれか レスポンスを待つ時間(秒)。これを過ぎたらレスポンスタイムアウトと判断
Origin Keep-alive Timeout 1~60のいずれか API Gatewayとの接続がアイドル状態になったときに待つ待ち時間(秒)
HTTPS Port 任意 API Gatewayへの接続ポート デフォルトは443
Origin Custom Headers 任意 API Gatewayに送信したいヘッダ 任意にヘッダ情報を送信したい場合に設定する。(x-api-keyなど)
Query String Forwarding and Caching 下記説明に従い、適切な値を クエリ文字列の転送とキャッシュ ※2
CNAME API Gateway接続用の独自ドメイン CloudFront→API Gatewayに接続するURLの別名

※1:Original Domain NameにURLをコピペすると、ステージ部分(dev/stgなど)が自動で「Origin Path」にカット&ペーストされます。

※2:文字通り「クエリ文字列の転送とキャッシュ」なのですが、非常に重要な部分です。

項目名 説明 クエリ文字列のオリジン(=API Gateway)への転送
None クエリ文字列はすべて無視し、キャッシュは実行しない 一切転送されない
Forward all, cache based on whitelistl Policy ホワイトリストに指定したパラメータは、値が同値ならキャッシュから使用。違っていれば取得してキャッシュに格納する。
※順番もチェックするので注意。
すべて転送される
Forward all, cache based on all クエリ文字列部分のすべてをチェック。順番、値をすべて含め、1文字でも違ったら値を取得してキャッシュに格納する。
完全一致の場合のみキャッシュから使用
すべて転送される(クエリ文字列として)

つまり「None」だと、クエリパラメータが一切API Gatewayに渡りませんAPI Gatewayへのパラメータ転送はクエリ文字列で行うことも多いと思うので、この点は要注意です。(てか、実際ハマった...)

【参考】

Route53の設定  

最後にRoute53ですが、これは「SSL証明書の作成」同様、前回記事そのままなので、そちらを参考にホストゾーン&レコードセット(エイリアスあり)を設定してください。

あとは、ブラウザのURLなりcURLなりで動作確認してみて、正しいレスポンスが返ってこればOKです。

結構ざっくりな感じになってしまいましたが、今回はここまで。