AWS AppSyncでカスタムドメインを設定してみた

いわさです。

AppSyncでカスタムドメインを最近設定したのですが、見えないCloudFrontディストリビューションが作成されたりなど、少し公式ドキュメントだけだと手間取ったので備忘録を兼ねて手順をまとめておきます。

公式ドキュメントは以下です。

ポイント

先に設定のポイントを列挙しておきます。

• カスタムドメイン有効化のためにバージニア北部でのACM証明書を作成しておく必要がある
• AppSyncコンソールでカスタムドメインを有効化するとCloudFrontディストリビューションが作成されてる(CloudFrontコンソールからは確認出来ない)
• Route 53 へは AppSync APIへのエイリアスレコードを登録する
• デフォルトエンドポイントは有効のまま

デフォルトドメインで通信

今回はマネジメントコンソールから選択可能なサンプルプロジェクト「イベントアプリ」を使って、事前にAppSyncアプリを構築しておきます。
イベントレコードを作成後、cURLを使ってリストしてみます。

$ curl -X POST "https://5hh6qatoyfcgjoxy2vangzkgle.appsync-api.ap-northeast-1.amazonaws.com/graphql" \
    -H "Content-Type:application/graphql" \
    -H "x-api-key:<hogehogeapikey>" \
    -d '{"query": "query ListEvents { listEvents { items { id name } } }"}'

{"data":{"listEvents":{"items":[{"id":"8b69181d-47ca-45a1-837d-e9a0dc6386d4","name":"My First Event"},{"id":"b00b5674-35bf-4ba0-b233-724378ac85ed","name":"My First Event"}]}}}

データを取得することが出来ました。
ここで使っているホストはデフォルトドメインです。

AppSync APIを設定すると、次の2つのエンドポイントがプロビジョニングされます。

• AWS AppSync GraphQL エンドポイント：https://example1234567890000.appsync-api.us-east-1.amazonaws.com/graphql
• AWS AppSync リアルタイムエンドポイント：wss://example1234567890000.appsync-realtime-api.us-east-1.amazonaws.com/graphql

カスタムドメイン名を使用すると、単一のドメインを使用して両方のエンドポイントと対話することができます。

カスタムドメイン

では、カスタムドメインを設定してみましょう。

カスタムドメイン用のACM証明書を作成

パブリック証明書を発行するだけなので手順自体は割愛します。
注意点としては、AppSyncが東京リージョンだとしても、バージニア北部でACMを作成する必要がある点です。

AppSyncコンソールでカスタムドメイン設定

AppSyncのカスタムドメイン名メニューからカスタムドメインを作成します。
AppSync側でカスタムドメインの所有権の検証などは発生しませんが、ACM証明書の利用が必須となっています。

カスタムドメインを作成後、AppSync APIへの関連付けを行います。
冒頭で確認したサンプルイベントアプリを関連付けしてみます。
なお、本記事を通してカスタムドメイン設定に関連するAPI側への変更は一切生じていません。

このあたりで気づくかもしれませんが、AppSyncドメイン名としてCloudFrontのディストリビューション名が割当られています。

内部的にはCloudFrontディストリビューションが前段で受ける形になっているようで、CloudFrontコンソールからは確認は出来ませんが、ACMは使用中となっています。

Route 53設定

最後にRoute 53でカスタムドメインの名前解決を行います。
エイリアスレコードとして、「AppSyncドメイン名のエイリアス」で東京リージョンを選択すると、内部作成されたCloudFrontディストリビューションが選択出来ます。
CloudFrontへのエイリアスだと確認が出来なかったのでそこだけご注意ください。

挙動としてはCloudFrontディストリビューション名を名前解決した場合と同じ結果になっていたので、外部DNSをお使いの場合はディストリビューション名でCNAMEレコードを作成してやると良さそうです。

確認

最後にカスタムドメインを使って、アクセスしてみましょう。

$ curl -X POST "https://graphhoge.tak1wa.com/graphql" \
-H "Content-Type:application/graphql" \
-H "x-api-key:<hogehogeapikey>" \
-d '{"query": "query ListEvents { listEvents { items { id name } } }"}'

{"data":{"listEvents":{"items":[{"id":"8b69181d-47ca-45a1-837d-e9a0dc6386d4","name":"My First Event"},{"id":"b00b5674-35bf-4ba0-b233-724378ac85ed","name":"My First Event"}]}}}

アクセスすることが出来ました。

なお、デフォルトエンドポイントも引き続き使えるのでその点は覚えておきましょう。
また、API Gatewayのようにネイティブでデフォルトエンドポイントを無効化する機能はありません。
API Gatewayの場合はカスタムドメインを対象にmTLSを構成した場合に、認証なしでデフォルトエンドポイントはアクセス出来てしまうので、デフォルトエンドポイントを無効化することが推奨されています。少しAppSyncとは事情が異なっていますね。

さいごに

本日はAppSyncでカスタムドメインを構成してみました。
CloudFrontっぽいものの存在が確認出来たりと、少し内部的な何かが見え隠れしていますがAPI利用者側としては意識せずに利用できると思います。

前述のとおりCloudFrontディストリビューションのカスタマイズは出来ないので、AWS WAFを設定したい場合は引き続き AppSync 自体のWAFを利用しましょう。