【初心者・入門】Amazon S3 を利用して静的ウェブサイトを公開してみる (後編)

はじめに

こんにちは、エーピーコミュニケーションズクラウド事業部の高橋です。

今回のブログは、「Amazon S3 を利用して静的ウェブサイトを公開してみる」の前編と中編に引き続き、後編です！
前編では S3 を利用して静的ウェブサイトをの公開を検証し、中編ではそのウェブサイトの HTTPS 化を検証しましたが、後編はそのウェブサイトの URL のドメイン変更を検証してみようと思います！

引き続き、よろしくお願いします！

techblog.ap-com.co.jp
techblog.ap-com.co.jp

どんなひとに読んで欲しい

Amazon S3 を使用してウェブサイトを公開する基本的な方法を知りたい人
Amazon Route 53 を使用して独自ドメインの URL にて静的ウェブサイトを公開したい人

CloudFront の URL ドメイン変更

早速、CloudFront のディストリビューションで払い出された「ディストリビューションドメイン名」の変更方法を検証していきたいと思います！

「ディストリビューションドメイン名」を変更するために、一番重要な鍵となる AWS サービスは Amazon Route 53 というサービスになります。
Amazon Route 53 とは、AWS が提供するクラウドのドメインネームシステム (DNS) サービスです。
可用性と拡張性に優れており、DNS サーバーを構築することなく、AWS コンソール上からドメインの取得と登録、DNS ルーティング、ヘルスチェックなどが利用できるサービスです。

※ 今回の検証にて Route 53 に設定するドメインは、AWS にて取得したドメインではなく、某ドメインサービスから事前に取得したドメインであることを予めご認識ください！

それでは検証していきたいと思います！

① Route 53 のホストゾーン作成
まず、Route 53 に指示を出すホストゾーンを作成します。

Route 53 の画面から「開始する」をクリックします。

「ホストゾーンを作成する」を選択して「開始する」をクリックします。

事前に取得したドメイン名を入力し、今回の検証はウェブサイトへのインターネットからのパブリックアクセスということで「タイプ」は「パブリックホストゾーン」を選択します。
そして「ホストゾーンの作成」をクリックします。

問題なく、独自ドメインのホストゾーンが作成できました！

② ホストゾーンとドメインの紐付け
次に、AWS 上に作成されたホストゾーンと取得した独自ドメインを紐づける設定をしていきます！
ホストゾーンのネームサーバーと独自ドメインのネームサーバーを同じ値にすることで紐付けることができます。

作成したホストゾーンをクリックすると、独自ドメインのレコード名で２種類のレコードが作成されていることが確認できます。

「NS」は「Name Server」の略で、作成されたホストゾーンに対して４つのネームサーバーが自動的に作成・割り当てられ、このレコードを削除することはできません。
「SOA」は「Start of Authority」の略で、ドメインと対応するホストゾーンに関する重要情報 (管理者の電子メールアドレス、ドメインが最後に更新された時期、サーバーが更新の間に待つ時間など) が記録されており、また、このレコードも削除することはできません。
※ 補足すると、権威 (=Authority) DNS サーバー (ネームサーバー) が処理する際の基点 (=Start) となる、ドメインとホストゾーン (管理範囲) 情報が記載されているレコードのタイプが「SOA」です

そして、ホストゾーンと独自ドメインに紐づけるために、ドメインサービス側でネームサーバー４つの値を入力し設定します。
まず、ネームサーバー４つの値をコピーして、メモ帳などに控えておきます。

続いて、某ドメインサービス側の管理画面にアクセスして、検証で使用する独自ドメインに対してネームサーバーの情報 (値) を入力します。
※ ネームサーバー４つの値の順番は今回の検証では問いません

設定が完了しました！

そして、AWS のホストゾーン (のネームサーバー) と独自ドメインが紐づいた確認をしてみたいと思います。
コマンドプロンプトから以下のコマンドを入力し、画像のように表示されていれば、紐づけは完了です！
nslookup -type=ns (独自ドメイン名)

③ SSL 証明書の発行
次に、AWS Certificate Manager (ACM) で SSL 証明書を発行します。
Route 53 ではなく、独自ドメインを使用する際に CloudFront において証明書が必要なため発行します。

ACM とは、AWS が提供しているパブリックな SSL 証明書を発行できるサービスです。
CloudFront などの AWS サービス内で利用する場合、SSL 証明書は無料です。

AWS コンソールの ACM の画面から「証明書をリクエスト」をクリックします。

「パブリックな証明書をリクエスト」を選択して「次へ」をクリックします。

画面が遷移したら、証明書の対象ドメイン、すなわち独自ドメインを「完全修飾ドメイン名」に入力します。
「検証方法」と「キーアルゴリズム」については、今回の検証に影響がないため、デフォルトのままにします。

加えて、この証明書をリクエストする際に重要な点があります！
CloudFront で ACM の証明書を使用するには、画像右上に赤枠で囲ったように米国東部 (バージニア北部) リージョンでリクエストした証明書でなければいけません！
以下に AWS 公式ドキュメントも記載しておきます。
Supported Regions - AWS Certificate Manager

To use an ACM certificate with Amazon CloudFront, you must request or import the certificate in the US East (N. Virginia) region.

これらの入力や設定が完了したら「リクエスト」をクリックします。

画面が遷移して、正常にリクエストされたので「証明書を表示」をクリックします。

リクエストした証明書の詳細画面に遷移しました。
しかし、ステータスを確認すると「保留中の検証」となっております。

SSL 証明書の発行を完了させるために、先ほど「検証方法」で選択した「DNS 検証」を行います。
「DNS 検証」では、独自ドメインに紐づいた証明書を発行しようとしているユーザーが本当に独自ドメインを管理しているユーザーか検証するために、リクエストされた証明書について ACM が生成した CNAME レコードを Rote53 (DNS) のホストゾーンに登録 (作成) し AWS 側で検証することで、証明書の発行を完了できます。

Route 53 のホストゾーンに登録するには、リクエストした証明書の「Route 53 でレコードを作成」をクリックします。

「ドメインは Route 53 にありますか?」が「はい」となっていることを確認し「レコードを作成」をクリックします。

独自ドメインの Route 53 のホストゾーンを確認してみると、無事に CNAME レコードが登録されていることを確認できました！

そして、証明書のステータスも、しばらく待ってみたところ、ステータスが「完了」となりました！
これにて証明書の発行が完了しました！
※ AWS 内でどういったタイミングで検証されているか不明ですが、ステータスが「完了」となるまでにかなり時間を要したため、予め認識しておいてください！

④ CNAME レコードのドメインサービス登録
次に、ACM にて生成された CNAME レコードをドメインサービス側に登録します。

ふたたび、某ドメインサービス側にアクセスし DNS レコードを登録する画面を開きます。
ACM の「CNAME 名」の「_55c77XXXXXXXXXXXXXXXXXXXXXX.YYYYYY.com.」の赤字部分のみを、ホスト名 (サブドメイン) として入力します。
「CNAME 値」の「_b30672XXXXXXXXXXXXXXXXXXX.XXXXXXX.acm-validations.aws.」の最後のドットのみを消した青字部分のみを、値 (VALUE) として入力し、設定を完了させます。

⑤ CloudFront の独自ドメインと SSL 証明書登録
次に、CloudFront 側に取得した独自ドメインとその SSL 証明書を登録していきます。

CloudFront に作成したディストリビューションの設定から「編集」をクリックします。

設定の編集画面が開いたら、「代替ドメイン名」は取得した独自ドメインを入力し、「Custom SSL certificate」は発行した証明書を選択します。
※ 赤線箇所は、先ほど触れました、米国東部 (バージニア北部) リージョンの証明書である必要がある旨が記載されています。

また、デフォルトルートオブジェクトは前編で入力済みであり、他の設定もデフォルトのままで問題ありませんので、「変更を保存」をクリックします。

CloudFront に作成したディストリビューションに対して、独自ドメインをその SSL 証明書を登録できたことを確認できました！

⑥ Route 53 のホストゾーンから CloudFront のディストリビューションへルーティング
最後に、Route 53 のホストゾーンから CloudFront のディストリビューションへのトラフィックのルーティング先として、ホストゾーンにエイリアスレコードを登録します。
エイリアスレコードは、Route 53の DNS 拡張機能であり、選択した AWS リソース (CloudFront ディストリビューションや Amazon S3 バケットなど) にトラフィックをルーティングできます。

Route 53 のホストゾーンから「レコードの作成」をクリックします。

レコードの作成画面に遷移したら、以下の内容を入力したら「レコードの作成」をクリックします。
レコードタイプ：A - IPv4
エイリアス：オン
トラフィックのルーティング先：CloudFront ディストリビューションへのエイリアス
ディストリビューション：(ディストリビューションドメイン名)
※「独自ドメイン」を選択すると自動的に「ディストリビューションドメイン名」が入力されます

無事に、A レコードとして、Route 53 のホストゾーンから CloudFront のディストリビューションへルーティングのエイリアスレコードが登録されました！

⑦ 独自ドメイン URL にてウェブサイトにアクセス
これまでの設定にて、独自ドメインの設定は完了しました！
それでは早速、取得した独自ドメインにて、 CloudFront を介した HTTPS 通信で S3 バケットに格納されている HTML ファイルの静的ウェブサイトにアクセスをしてみたいと思います！

CloudFront のディストリビューションに登録した代替ドメイン、すなわち独自ドメインをもとにウェブサイトの URL としてアクセスできるか確認します。

独自ドメインの URL にアクセスしてみたところ、問題なく表示されることを確認できました！

これにて、独自ドメインに変更してウェブサイトにアクセスする方法の検証は完了です！

おわりに

前編で S3 バケットを利用した静的ウェブサイトの公開、中編で CloudFront を利用した HTTPS 通信でのアクセス、そして今回のブログで Route 53 と SSL 証明書を利用した独自ドメインでのアクセス、と全３回に渡ってウェブサイトの公開について検証してきました！

手を動かし検証することによって、一連の流れでこれらの基本的な設定方法や仕組みが理解できました！
実際にウェブサイトを公開したり企業用に設計するとなると考慮すべき点や気になる点はまだまだ沢山ありますが、今回の検証を基にしてより複雑な検証も試してブログを書けたらと思いました！

ご拝読いただき、ありがとうございました！