API Gatewayに独自ドメインでアクセスする方法（リージョン編）

カスタムドメインを使って、API Gatewayに独自ドメインでアクセスする方法をまとめます。
本記事は「リージョン編（API Gatewayのエンドポイントをリージョンに設定）」でCloudFrontを利用しないので、国内限定サービスなどに良いと思います。
また、API Gateway につながる実際のAPIについては「API Gateway、Lambda(Node.js)、DynamoDB を使ったAPIの作り方」で作ったAPIを利用するので、こちらを先に見ておくと良いかと思います。

ちなみに、CloudFrontを利用するエッジ最適化については、「API Gatewayに独自ドメインでアクセスする方法（エッジ最適化編）」を参考にしてください。

前提

route53でドメインを取得していること。
本記事では取得済ドメインの サブドメイン を利用します。

ACMでSSL証明書を発行

ACM（Certificate Manager）を使って取得済ドメインのSSL証明書を発行します。
今回はリージョン編なので、任意のリージョンで証明書を発行します。

「証明書をリクエスト」をクリックします。

「パブリック証明書をリクエスト」が選択されているので、そのまま「次へ」をクリックします。

「完全修飾ドメイン名」入力欄に値を入力します。例えば取得済ドメインが「hoge.com」ならば、「*.hoge.com」と入力しましょう。
検証方法は推奨されている「DNS検証」のまま、「リクエスト」をクリックします。

すると以下のような画面になり、まだ保留中のままになっているので、「証明書ID」のリンクをクリックします。

すると以下のような画面になります。あとで route53で利用するので「CNAME名」と「CNAME値」を控えておきます。

route53 で CNAME を設定する

route53の画面を選択、既に作成済ドメインのホストゾーンを選択して、以下のように「レコードを作成」をクリックします。

レコードタイプに「CNAME」を選択し、前述の「CNAME名」と「CNAME値」を入力します

その後、約20分ほどで SSL証明書が発行済となります。
以下ACMの画面からも、「発行済み」になっていることを確認できます。

API Gateway でカスタムドメインを作成

カスタムドメインを選択して「作成」をクリックします。

カスタムドメイン名（例えば取得済ドメインがhogehoge.comならば、api.hogehoge.comとする）を入力します。
その後、エンドポイント設定を「リージョン」にチェックすると、ACM証明書のところで、前述で発行したSSL証明書が選べるので選択をします。
その後に「ドメイン名を作成」をクリックします。

すると、以下のようにカスタムドメインが出来ます。
API Gatewayドメインは、のちほどroute53で利用します。

続いて「APIマッピング」タブを選択して、「APIマッピングを設定」をクリックします。

「新しいマッピングを追加」をクリックします。

APIの欄に API GatewayのAPI（ここでは「API Gateway、Lambda(Node.js)、DynamoDB を使ったAPIの作り方」を利用）、ステージには同じくAPI Gatewayのステージを選択します。
パスは任意で設定します。ここではAPIをバージョン管理できるように「v1」とつけておきます。これにより、URLが https://api.hogehoge.com/v1/ などになります。
全て設定できたら、「保存」をクリックします。

再び route53でサブドメインを設定

API Gatewayのカスタムドメインが設定できたら、route53でそのカスタムドメイン（サブドメイン）を設定します。
以下のよう該当のホストゾーンから「レコードを作成」をクリックします。

レコード名には、カスタムドメインと同じく「api」を設定して、レコードタイプは「Aレコードとします」
トラフィックのルーティングは以下のようになりますが、ここで注目すべきは、前述で出てきた API Gatewayのエイリアス が選べるようになっていることです。API Gatewayのエイリアス を選んで「レコードを作成」をクリックしましょう。

以上で独自ドメイン（カスタムドメイン）でAPI Gateway が利用できるようになりました。
ためしに postman でアクセスしてみましょう。
前述したように、API GatewayのAPIには（API Gateway、Lambda(Node.js)、DynamoDB を使ったAPIの作り方）で作成したAPIがつながっているので、リクエストJsonを以下のようにします。

{
    "action": "overview",
    "eid": "00001"
}

postmanでは以下のように正常にレスポンスが返ってきたことが分かります。

以上です。