カテゴリー
【AWS】API GatewayのAPIエンドポイントをカスタムドメイン名を付けてRoute53で公開する基本的な手順
※ 当ページには【広告/PR】を含む場合があります。
2020/04/18
2021/08/02

API Gatewayを利用するとSPA(Single Page Application)などの動的なコンテンツを配信する場合にも独自のカスタムドメイン名を割り当てることが可能です。
今回はServerless Frameworkなどでデプロイしたあとに自動生成されるデフォルトのAPIエンドポイント名を、別に用意していたカスタムドメイン名に指定し、最終的に動的なウェブページとしてアクセスできるようにするためのRoute53での手順を軽く説明します。
サーバーサイドレンダリング?
AngularなどのJavascript系フレームワークを利用した
AWS Lambda
AWS API Gateway
個人的にではありますが、サーバーサイドレンダリングという技術に触れて間もない頃に、
https://**********.execute-api.ap-northeast-1.amazonaws.com/{stage}
みたいなものが出てきたんだけど、これを独自定義のドメイン名に変えるにはどうするんだろう?としばらく悩んでおりました。
結論からいえば生APIエンドポイントをカスタムドメイン名に変えるおおまかな手順として、
1. カスタムドメインのSSL証明の発行(https化)
2. API Gateway側へカスタムドメイン情報を設定
3. Route3側へカスタムドメイン情報を設定
の3つ手順でAWSダッシュボードから設定することになります。
ちなみに御自身のカスタムドメインは、AWS
Route 53
少しでもコストを安くしたい方は
さて、上の1~3の手順を順番に解説していきます。
AWS Certficate Manager (ACM)でSSL証明を発行する
まずは、カスタムドメインへSSL証明を発行します。 これにより通信が暗号化され、Webページが
https
証明書の発行のステップとしては、
1. [証明書のリクエスト]
2. [パブリック証明書のリクエスト]
3. "ドメイン名の追加"で[ドメイン名*]を入力 -> [次へ]
4. 検証方法の選択 で DNS の検証 を選んで確認
5. 内容を確認ご 確定とリクエスト
6. 検証 確認 (ドメイン名は正しく記入できているかをチェックしてください)
7. 検証保留中となっている間、DNSの検証 '▶' を展開
→ [Route 53 でのレコードの作成] をクリックするとRoute 53 に CNAME が反映
8. 状況の項目が"発行済み"になるまで待機

余談ですが、カスタムドメイン名をApexドメイン(www.の頭文字のない名前)で利用したいなどのニーズがある方は、ここで複数のSSL証明を設定する必要になる場合があります。 (つまりは
https://www.hogehoge.com
https://hogehoge.com

なおサブドメインへ個別の証明書を発行することも可能ですが、現在のこのブログページのようにメインドメインである
tacoskingdom.com
*.tacoskingdom.com
API Gatewayへカスタムドメインを設定する
次に、デプロイさせたAPI Gateway側を設定していきます。
ちなみに、apiはap-northeast-1(東京)リージョンにデプロイさせていることを前提としてます。
1. "カスタムドメイン名"のサイドメニューをクリック
2. [カスタムドメイン名の作成]
3. 新しいカスタムドメイン名で:
ドメイン名: sub-domeain.example.com(例)
エンドポイントの設定: エッジ最適化
ACM 証明書 (us-east-1): さっき発行した証明書を指定
(ACM 証明書 ... 初期化しています..)
-> 最大40分かかる模様
4. ベースパスマッピングの追加
[編集]をクリック:
パス: (特定のパスを使わない場合はブランクでOK)
送信先:
デプロイ済みのAPIとステージ名を指定

カスタムドメインが生成されると、以下の図のように表示されていると思います。

初期化完了後、ここで自動生成されたCloudFrontのターゲットドメイン名を控えておきます。
xxxxxxxxxxxxxx.cloudfront.net
このCloudFrontとRoute53をリンクさせることで、外部からSSRサイトにアクセスできるようになります。
Route 53の各レコードを設定する
では先程のカスタムドメインのターゲット名(CloudFront)にRoute53の設定をします。
1. サイドメニューより'ホストゾーン'をクリック
2. ターゲットのカスタムドメインを選択
3. [レコードセットの作成]
名前: sub-domeain.example.com(例)
タイプ: A - IPv4 address
エイリアス: はい
: xxxxxxxxxxxxxx.cloudfront.net(先ほど生成されたターゲットドメイン名)
4. [作成]

以上で、SSRサイトにカスタムドメイン名を設定する
必要最小限
そこから上手くページが遷移できなかったり、SSRしてる割にはレンダリングも期待したほど速くならなかったりと...お手元のプロジェクトによって、たくさんの課題に直面するかも知れませんが、地道に一つ一つ解決していってください。
参考
記事を書いた人
ナンデモ系エンジニア
主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。
カテゴリー