【AWS】API GatewayのAPIエンドポイントをカスタムドメイン名を付けてRoute53で公開する基本的な手順


※ 当ページには【広告/PR】を含む場合があります。
2020/04/18
2021/08/02
【AWS使い方ガイド】CloudFrontからOAI/OACを利用してアクセス制限付きのS3からリソースを取得する方法
蛸壺の技術ブログ|API GatewayのAPIエンドポイントをカスタムドメイン名を付けてRoute53で公開する基本的な手順

独自ドメイン取得すれば、S3から静的ホスティング機能で個人ブログを簡単に公開したり出来るようになります。

API Gatewayを利用するとSPA(Single Page Application)などの動的なコンテンツを配信する場合にも独自のカスタムドメイン名を割り当てることが可能です。

今回はServerless Frameworkなどでデプロイしたあとに自動生成されるデフォルトのAPIエンドポイント名を、別に用意していたカスタムドメイン名に指定し、最終的に動的なウェブページとしてアクセスできるようにするためのRoute53での手順を軽く説明します。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

サーバーサイドレンダリング?

AngularなどのJavascript系フレームワークを利用したサーバーサイドレンダリング(SSR)の手法を用いたWebページをAWS上で実現するためにはAWS LambdaAWS API Gatewayの2つの機能を熟知して利用することが必要になります。

個人的にではありますが、サーバーサイドレンダリングという技術に触れて間もない頃に、
Angular UniversalとServerless FrameworkでSSR対応させたWebウェブサイトをデプロイした後、API Gatewayとして自動生成された生APIエンドポイントとして、

            
            https://**********.execute-api.ap-northeast-1.amazonaws.com/{stage}
        
みたいなものが出てきたんだけど、これを独自定義のドメイン名に変えるにはどうするんだろう?としばらく悩んでおりました。

結論からいえば生APIエンドポイントをカスタムドメイン名に変えるおおまかな手順として、

            
            1. カスタムドメインのSSL証明の発行(https化)
2. API Gateway側へカスタムドメイン情報を設定
3. Route3側へカスタムドメイン情報を設定
        
の3つ手順でAWSダッシュボードから設定することになります。

ちなみに御自身のカスタムドメインは、AWS
Route 53のダッシュボード内でそのまま購入することが可能ですがすこし割高です。

少しでもコストを安くしたい方は
お名前.comなどで購入をご検討ください

さて、上の1~3の手順を順番に解説していきます。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

AWS Certficate Manager (ACM)でSSL証明を発行する

まずは、カスタムドメインへSSL証明を発行します。これにより通信が暗号化され、Webページがhttpsからアクセスできるようになります。

ACMのコンソール画面に入って設定を試みます。ここでは、エンドポイントタイプをエッジ最適化で設定するので、us-east-1(バージニア北部)で証明書を発行します。Regionalを希望する場合は各リージョンの証明書をそれぞれ発行できるようです。

証明書の発行のステップとしては、

            
            1. [証明書のリクエスト]
2. [パブリック証明書のリクエスト]
3. "ドメイン名の追加"で[ドメイン名*]を入力 -> [次へ]
4. 検証方法の選択 で DNS の検証 を選んで確認
5. 内容を確認ご 確定とリクエスト
6. 検証 確認 (ドメイン名は正しく記入できているかをチェックしてください)
7. 検証保留中となっている間、DNSの検証 '▶' を展開
    → [Route 53 でのレコードの作成] をクリックするとRoute 53 に CNAME が反映
8. 状況の項目が"発行済み"になるまで待機
        

合同会社タコスキングダム|蛸壺の技術ブログ

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

合同会社タコスキングダム|蛸壺の技術ブログ

なおサブドメインへ個別の証明書を発行することも可能ですが、現在のこのブログページのようにメインドメインである
tacoskingdom.com(Apex)に、追加の名前で*.tacoskingdom.comとワイルドを使って全ての子サブドメインにも同じ証明書を与えることも可能です。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

API Gatewayへカスタムドメインを設定する

次に、デプロイさせた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サイトにアクセスできるようになります。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

Route 53の各レコードを設定する

では先程のカスタムドメインのターゲット名(CloudFront)にRoute53の設定をします。

Route53 - console

            
            1. サイドメニューより'ホストゾーン'をクリック
2. ターゲットのカスタムドメインを選択
3. [レコードセットの作成]
    名前: sub-domeain.example.com(例)
    タイプ: A - IPv4 address
    エイリアス: はい
    : xxxxxxxxxxxxxx.cloudfront.net(先ほど生成されたターゲットドメイン名)
4. [作成]
        
合同会社タコスキングダム|蛸壺の技術ブログ

以上で、SSRサイトにカスタムドメイン名を設定する
必要最小限の手順は完了です。

そこから上手くページが遷移できなかったり、SSRしてる割にはレンダリングも期待したほど速くならなかったりと...お手元のプロジェクトによって、たくさんの課題に直面するかも知れませんが、地道に一つ一つ解決していってください。


合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集

図解即戦力 Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書

参考

AWS API Gatewayでカスタムドメインを設定する

API GatewayをカスタムドメインでHTTPS化する

記事を書いた人

記事の担当:taconocat

ナンデモ系エンジニア

主にAngularでフロントエンド開発することが多いです。 開発環境はLinuxメインで進めているので、シェルコマンドも多用しております。 コツコツとプログラミングするのが好きな人間です。

合同会社タコスキングダム|蛸壺の技術ブログ【AWS独習術】AWSをじっくり独学したい人のためのオススメ書籍&教材特集