Zenn
🐟

AppSync API にカスタムドメインを設定する

2022/01/24に公開
AWS
tech

概略

2021/12/06 に, AWS AppSync の API に対してカスタムドメインを設定できるようになりましたね！
→ AWS AppSync が、AppSync GraphQL エンドポイントのカスタムドメイン名のサポートを開始

以前まではカスタムドメインに対応していなかったため, AppSync API にカスタムドメインを付与するには, CloudFront 等を経由する必要がありました。（が, Appsync API への IP 制限（WAF 利用）や, Front アプリ側との接続がしづらかった印象です）

ということで今回は, AppSync API にカスタムドメインを付与してみます。結論はすごく簡単！という感じです。

AWS AppSync API にカスタムドメインを設定する

進め方は, 公式のブログ記事に従います。
具体的な流れは以下です。

  1. （設定済ならスキップ可）Route 53 or 他でドメイン登録
  2. （設定済ならスキップ可）AWS Certificate Manager で証明書を作成
  3. AWS AppSync の API にドメインを関連づけ

必要な条件

AppSync API にカスタムドメインを設定するには, その対象のドメインに対する ACM 証明書を取得する必要があります。基本はそれだけです。

AppSync でカスタムドメイン名を作成するには、所有するドメイン名を指定し、ドメインをカバーする有効な AWS Certificate Manager 証明書を提供するだけです。（引用元）

① （設定済ならスキップ可） Route 53 or 他でドメイン設定

Route 53 またはサードパーティのサービスでドメインを登録しておきます。
Route 53 の場合だと, appsync.examle.com とか任意のドメイン（AppSync に当てたいドメインの根元）を取得して, パブリックホストゾーンを構成しておく感じですね。

このあたりは他の方の記事などをみていただければ。

② （設定済ならスキップ可） AWS Certificate Manager で証明書を作成

AWS Certificate Manager（ACM）で証明書を用意します。以下の 2 手があるかなと思います。

  • ACM で新しい証明書を発行する
  • サードパーティ発行の証明書を ACM にインポートする

特にこだわりなければ ACM で新規発行すれば一元管理できて扱いやすいかなと思います。
リージョンは us-east-1：米国東部（バージニア北部）で取得する必要があります。（CloudFront の ACM の制約と同じですね）

具体的な手順は

  1. ACM Certificate Manager を開く
  2. 右上部メニューより, リージョンとしてバージニア北部を選択
  3. 「証明書をリクエスト」から, 「パブリック証明書をリクエスト」に進む
  4. 発行対象のドメインとして, 自身が所有しているドメインで, AppSync に設定したいドメイン（ex. api.appsync.example.com）またはワイルドカード（ex. *.appsync.example.com）で指定する
    <font color="Red">こだわりなければワイルドカード証明書は便利</font>なのでおすすめです。
  5. 検証方法として, DNS またはメール検証を選び検証します（DNS 検証の場合, 対象のドメインが管理されている DNS サービスで, CNAME レコードを追加します。同一 AWS アカウント上の Route53 で管理している場合は, ACM 証明書発行時のコンソール指示に従って追加ボタン的なものを押せば OK）
  6. 少し待ったら発行済みのステータスになり完了です

③ AWS AppSync の API にドメインを関連づけ

AppSync にカスタムドメインを設定します。

AWS Console から AWS AppSync の画面を開きます。
サイドメニューに「カスタムドメイン名」が増えているので押下します。

その後表示される画面上の, 「ドメイン名の作成」を押下します

ドメイン名の作成の画面にうつるので, AppSync に設定したいドメイン名（ex. api.appsync.example.com）を指定し, ACM 証明書はドメイン名に合わせて発行したものを選択します。
※ すでに DNS サービス上で CNAME レコードが設定されているドメイン名の場合, ERROR になりますのでご注意ください

「作成」を押下後, 作成完了したドメイン名の詳細を表示すると, API 関連づけの項目が表示されます。

「API を関連づける」から, ドメインを付与したい AppSync API を関連づけます。

完了を待ちます。以下のように Associated になったら API の関連づけが完了です。

また, 同じ画面上（AppSync の対象のカスタムドメインの詳細画面上）に AppSync ドメイン名（xxxxxxx.cloudfront.net）が表示されているのでメモしておきます。

最後に, 対象のドメイン名を管理している DNS サービス上（Route 53 のホストゾーン等）で CNAME レコードを追加します。
レコード名は, AppSync のカスタムドメインに指定した値（ex. api.appsync.example.com）で, レコード値はさきほどメモした AppSync ドメイン名 （xxxxxxx.cloudfront.net） を指定します。

何分か待つと, 設定したドメインで AppSync API にアクセスできるようになります。

まとめ

AppSync へのカスタムドメイン名の設定を試してみました。さくっと完了できて良い感じでした！

Discussion