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

## 概略
2021/12/06 に, AWS AppSync の API に対してカスタムドメインを設定できるようになりましたね！
→ [AWS AppSync が、AppSync GraphQL エンドポイントのカスタムドメイン名のサポートを開始](https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-appsync-supports-custom-domain-names-appsync-graphql-endpoints/)

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

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

## AWS AppSync API にカスタムドメインを設定する
進め方は, [公式のブログ記事](https://aws.amazon.com/jp/blogs/mobile/introducing-custom-domain-names-for-aws-appsync-apis/)に従います。
具体的な流れは以下です。

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


### 必要な条件

AppSync API にカスタムドメインを設定するには, その対象のドメインに対する ACM 証明書を取得する必要があります。基本はそれだけです。
> AppSync でカスタムドメイン名を作成するには、所有するドメイン名を指定し、ドメインをカバーする有効な AWS Certificate Manager 証明書を提供するだけです。（[引用元](https://aws.amazon.com/jp/about-aws/whats-new/2021/12/aws-appsync-supports-custom-domain-names-appsync-graphql-endpoints/)）

### ① （設定済ならスキップ可） 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](http://console.aws.amazon.com/appsync/home) の画面を開きます。
サイドメニューに「カスタムドメイン名」が増えているので押下します。
![side_custom_domain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/02f05199-c934-89ba-b91f-e5e71bb67775.png)

その後表示される画面上の, 「ドメイン名の作成」を押下します
![add_custom_domain_button.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/be9d46a4-dc37-19fa-078c-593461fd33b1.png)


ドメイン名の作成の画面にうつるので, AppSync に設定したいドメイン名（ex. `api.appsync.example.com`）を指定し, ACM 証明書はドメイン名に合わせて発行したものを選択します。
※ すでに DNS サービス上で CNAME レコードが設定されているドメイン名の場合, ERROR になりますのでご注意ください
![add_custom_domain.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/8ff0a00f-9605-1c7d-6a91-f5eb0ffdc826.png)


「作成」を押下後, 作成完了したドメイン名の詳細を表示すると, API 関連づけの項目が表示されます。
![associate_api1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/d3b9655a-ceb4-e2ae-be1a-31bbfd0a2543.png)
「API を関連づける」から, ドメインを付与したい AppSync API を関連づけます。
![associate_api2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/f3124420-4e08-31aa-bfd8-c0d9d0d90909.png)


完了を待ちます。以下のように Associated になったら API の関連づけが完了です。
![associated.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/888441/99ded58b-9d90-a4b8-f497-a31405eaf182.png)
また, 同じ画面上（AppSync の対象のカスタムドメインの詳細画面上）に AppSync ドメイン名（`xxxxxxx.cloudfront.net`）が表示されているのでメモしておきます。


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

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



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