LINE ChatBot 制作 番外編① AWS CloudFront で独自ドメインを実装

こんにちは、KimYasです。
こちらの記事のLINE ChatBot 制作では、CloudFrontを経由してS3から画像を取得する処理を実装しました。
その際、ヨーヨーの画像にアクセスためのURLはこちらのような形式でした。

https://"CloudFrontディストリビューションのドメイン名"/"S3バケットのオブジェクト名"

これでも問題なくアクセスできるのですが、"CloudFrontディストリビューションのドメイン名"は、"d111111abcdef8"のようなランダムな英数字から成り立ちます。
具体的に書くと、上記URLの場合だと以下のようになります。

https://d111111abcdef8.cloudfront.net/S3_object_name

お世辞にも覚えやすいURLとは言い難いですよね。
そこで、今回は独自ドメイン(例:www.example.com)を使用することにより、CloudFrontディストリビューションのドメイン名をシンプルな文字列に置換していきます。
手順は公式ドキュメントに従いました。
参考:AWS公式ドキュメント

事前準備

まずは独自ドメインを用意します。
私の場合は、このブログのドメイン名でもある"kimyas.link"です。
AWSサービスのRoute53で取得しても良いですし、お名前.comのようなドメイン登録サービスを利用しても構いません。
私はAWSサービスで統一したかったので、Route53で取得しました。

Route53コンソール画面



ちなみにドメイン自体はRoute53で取得したものの、DNSレコードの管理はLightsail DNSゾーンで行うことにしました。
理由は、Route53でホストゾーン管理を行った場合、ホストゾーン管理費とDNSクエリへの応答費用が発生するためです。
現在使用中で費用を払っているLightsailのインスタンスでDNS管理をして名前解決を行えば、Route53の費用を節約できます。
(参考:Amazon Route53 料金表Amazon Lightsail 料金表
ただし、こちらの公式ドキュメントにあるように、今後管理するドメイン名が3つを越えることになれば、Route53でDNSを管理しようと思います。

CloudFrontに代替ドメイン名を追加する

コンソールからCloudFront→ディストリビューションを選択→編集と進みます。
代替ドメイン名(CNAME)に、使用する代替ドメイン(例:example.kimyas.link)を入力します。

ここで、代替ドメインを使用するためには、ドメインを使用する権限を持っていることをCloudFrontに対して示す必要があります。
なぜなら、仮にこの権限を提示するステップが無かったならば、例えば今このページを見ているあなたが、私のドメイン"kimyas.link"を無断で使用できてしまうことになりますからね。

ということで、代替ドメインの持ち主が確かに自分自身であることを示す証明書、すなわちSSL証明書を取得します。
(参考:公式ドキュメント
カスタムSSL証明書の欄の下にある「証明書をリクエスト」をクリックし、ACM(AWS Certificate Manager)を利用して証明書を取得します。


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


「完全修飾ドメイン名」に、代替ドメイン名を入力します。
この際、代替ドメイン名(サブドメイン)をそのまま入力しても良いですが、アスタリスク"*"を用いて、
*.kimyas.link
とすることにより、末尾が .kimyas.link となるものであれば、どれでもURLとして使用可能になります。
複数のサブドメインを使用する場合は、この方法を用いることをお勧めします。


他の設定はそのままで、画面右下の「リクエスト」をクリックします。
私の場合は数分でステータスが「発行済み」となりました。


CloudFrontの画面に戻り、「証明書を選択」のドロップダウンリストを押下すると、発行したACM証明書が表示されます。
こちらを選択し、画面右下の「変更を保存」をクリックします。


画面中央下の「代替ドメイン名」にドメインが表示されていれば成功です。

DNSレコード登録

現状では、代替ドメイン名を用いてインターネット上からアクセスされても名前解決ができません。
そこで、DNSレコードをLightsailのDNSゾーンに登録します。

Lightsailのコンソール画面から、ネットワーキング→DNSゾーンと進みます。


「+レコードの追加」をクリックし、CNAMEレコードを新たに2つ登録します。
入力後は右上のチェックマークをクリックして確定します。


●一つ目 代替ドメイン名とディストリビューション名の紐づけ
サブドメイン:使用する代替ドメイン名(例:example.kimyas.link)
マップ先:CloudFrontのディストリビューション名(例:d111111abcdef8.cloudfront.net)

●二つ目 ACMの証明書登録
サブドメイン:ACMの証明書ドメインのCNAME名(例:xxxxxxxxxxxxx....xxx.kimyas.link)
マップ先:ACM の証明書ドメインのCNAME値(例:xxxxxxxxxxxxx....xxx.acm-validations.aws)

ACMコンソール画面

これで名前解決ができるようになりました。
きちんと設定できているか、実際に確かめてみましょう。

動作確認

CloudFrontのディストリビューション名を用いたURLと、代替ドメイン名を用いたURLの双方において、S3に保存してある画像にアクセスできるか確認します。
一例として、S3バケットのオブジェクト"frozen.jpg"にアクセスしてみます。

まずはCloudFrontのディストリビューション名からです。
ブラウザのアドレスバーに、次のように入力します。

https://"CloudFrontディストリビューションのドメイン名"/"S3バケットのオブジェクト名"
ヨーヨー画像:フローズン(https://yoyostorerewind.com/jp/frozen.html)


きちんと表示されました。
続いて、代替ドメイン名で試してみます。

https://"代替ドメイン名"/"S3バケットのオブジェクト名"
ヨーヨー画像:フローズン(https://yoyostorerewind.com/jp/frozen.html)

こちらも問題なく表示されました。
無事に動作確認完了です!

まとめ

いかがだったでしょうか。
ACMは何だか難しそうなイメージがありましたが、SSL証明書の申請をブラウザ上で簡単に済ませられるので、とても使いやすかったです。
また、独自ドメインはこのブログ上でしか使わないと思っていましたが、今回の記事のような使い方もできるのが新たな発見でした。
URLが非常にスッキリするので、是非お試しください!

KimYas