【2024年版】Route53とCloudFrontで独自ドメイン＋https通信に対応する

# はじめに

こんにちは、もちもちMAXです。  
今回はRoute53とCloudFrontを用いて、[前回作成したMPA](https://qiita.com/deritto777/items/1080e4ddbe3263253f68)に独自ドメイン対応＋https接続をおこなう手順について解説していきたいと思います。  

## 対応に必要な手順

必要な手順は下記の通りです。  
\
１．ドメイン取得（お名前.com）  
２．CloudFrontでhttps対応  
３．ネームサーバの登録  
４．独自ドメインのSSL証明書設定  
５．Route53にAレコードを追加する  
\
今回はドメイン取得にお名前.comを用いましたが、Route53でも取得できるのでそちらでも、またはその他サービスでも構いません。  
それでは、各手順の詳細を説明していきます。  

## ドメイン取得（お名前.com）

ここでは、お名前.comでのドメイン取得方法を説明します。手順は下記の通りです。  
\
**１．お名前.comで希望のドメイン名を入力して取得する(.com)**  
**２．使用用途を選ぶ（ブログ・ホームページ）**  
**３．レンタルサーバの設定をおこなう。今回はAWSのサービスを使ってwebサイトを公開するのでレンタルサーバは不要です**  
**４．オプションの`Whois情報公開代行メール転送オプション`と`ドメインプロテクション`を有効にする**  
\
最終的にこんな感じに。手順4のオプションはお好みで設定して頂いて大丈夫です。  
![domain_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/c9be1a4e-1252-1767-9c8c-025f4d69dfb9.png)

\
**※Whois情報公開代行とは**  
ドメイン保持者は、氏名や住所を含む個人情報を一般公開することが義務づけられているのですが、その個人情報をお名前.comの情報に代えて公開してもらうことです。  
\
**※Whois情報公開代行メール転送オプションとは**  
Whois情報公開代行を設定した状態で、外部からの連絡を受けるためのサービスです。ドメイン登録者宛の商標侵害警告など、各種通知を自身のメールアドレス宛に転送してもらえるので試験的に使ってみたい、使うのは今だけ、とかでないなら設定しておいた方が無難かと思います。  
\
**※ドメインプロテクションとは**  
「ドメインプロテクション」とは、「お名前.com」で管理されているドメインを対象とした、各種設定の変更や書き換え操作を制限するサービスです。
要するに、ドメイン乗っ取りを防ぐセキュリティサービスのことなので、気になるなら設定しておいても良いのではないでしょうか？  

## CloudFrontでhttps対応

[前回](https://qiita.com/deritto777/items/1080e4ddbe3263253f68)はAmazon S3の静的ウェブホスティングでWebサイトを公開しました。
しかし、S3の静的ウェブホスティング機能だけではhttps通信はできません。そこで、AWSのCloudFrontというサービスを利用します。CloudFrontはウェブコンテンツを高速かつ安全に配信するためのCDNであり、https対応ができます。  
\
**※CDNとは**  
インターネット上でコンテンツを高速に配信するための仕組みです。ウェブサイトにアクセスすると、そのウェブサイトに関連する画像や動画などのコンテンツがユーザのブラウザにダウンロードされます。しかし、そのウェブサイトのサーバーがユーザと遠く離れている場所にある場合、コンテンツがダウンロードされるのに時間がかかることがあります。これは、距離が原因でインターネットの速度が低下するからです。
そこで、CDNが役立ちます。CDNは、世界中に配置された複数のサーバーでコンテンツをキャッシュし、ユーザーに近い場所からコンテンツを配信します。つまり、ユーザがウェブサイトにアクセスすると、CDNは最も近いサーバーからコンテンツを提供するので、コンテンツがより速くダウンロードされます。  
![CDN.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/c4f18086-b00d-7554-18c9-1b2d89e8f633.png)
画像引用元 https://www.stream.co.jp/blog/blogpost-13890/  
\
CloudFrontでは主にオリジンサーバ（元のデータが格納されているサーバ：今回でいうとS3のバケット）の設定、HTTPS設定をおこないます。
それでは早速設定していきましょう。  
\
**１．前回作成したS3のバケットを選択し、パブリックアクセスを全てブロックする**  
厳密にはこの設定をせずともhttps接続できるようになりますが、直接アクセスできる状態はセキュリティ的にあまり良くありません。
基本的にはCloudFront経由でアクセスするのでパブリックアクセスはブロックしておきましょう。  
![s3_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/1bddb4bc-155f-7b7c-25bd-537b61c7075b.png)
**２．バケットの静的ウェブサイトホスティングを無効にする**  
先ほども説明しましたがCloudFront経由でのアクセスになるので、ホスティングも不要です。  
\
**３．CloudFrontでディストリビューションを作成する**  
Origin domainにはS3のバケットを、オリジンアクセスは`Origin access control settings`を選択しましょう。
そして、その右下辺りにある`Create new OAC`（画像では隠れてますが…）をクリックしそのまま`Create`をクリックします。  
![CloudFront1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/db01707c-7152-f7e8-ae56-45eab77bf526.png)
ビューワープロトコルポリシーは`Redirect HTTP to HTTPS`を選択、ウェブアプリケーションファイアウォールは`有効にしない`を選択します。  
デフォルトルートオブジェクトには`index.html`と記入しておきます。
![CloudFront2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/48f5fe9a-e6bc-6412-0ad0-6ea9672b181e.png)

![CloudFront3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/165401fd-f6ec-f70a-662b-85ab00b6e795.png)

その他の設定は変えずにディストリビューションを作成します。  
\
**４．S3バケットのバケットポリシーを変更する**  
ディストリビューションを作成すると画面右上に`ポリシーをコピー`というボタンが出てくるのでそれをクリックしてバケットポリシーをコピーしておきます。
![bucketPolicy1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/4514e423-b487-d08b-59ec-149fbc52ecb5.png)

そしてバケットポリシーの画面に移動して、先ほどコピーしたポリシーをペーストします。
これによって、作成したCloudFrontディストリビューションからバケットにアクセスできるようになります。
![bucketPolicy2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/d3983088-92d6-b412-5527-b875363d880a.png)

**５．https接続できるか確認する**  
作成したディストリビューションの、ディストリビューションドメイン名をコピーして、アドレスバーに貼り付けます。  
これで、バケットにある`index.html`の内容が表示されれば設定完了です。
![CloudFront4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/97d92667-9c60-5440-8f57-1153c2a9f38e.png)


## ネームサーバの登録

次にAWSのRoute53にお名前.comで取得した独自ドメインの情報を設定していきます。
通常、お名前.comで取得したドメインの名前解決はお名前.comのネームサーバがおこないます。
今回は、名前解決をRoute53でおこなうため、お名前.comにも設定が必要となります。  
\
**※名前解決とは**  
mochinochimochi.comなどのドメイン名を実際のサーバの場所であるIPアドレスに変換するプロセスです。
名前解決をおこなうサーバをDNSサーバとよび、Route53で作成するホストゾーンがDNSサーバとして機能するイメージです。  
\
それでは始めていきましょう。  
\
**１．Route53でホストゾーンを作成する**  
ドメイン名には取得したドメインを、タイプはパブリックホストゾーンを選びましょう。
![Route53_1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/41daa9ca-c683-d514-c1cc-dc7e686a1848.png)

**２．ネームサーバの情報をお名前.comに登録する**  
手順1で作成されたホストゾーンにはレコードが登録されています。その中で、タイプが`NS`となっているレコードの`値/トラフィックのルーティング先`をコピーしておきましょう。
![Route53_2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/9c8756c5-e2d0-9837-fe5d-ccd6edcdb9f4.png)

次に、お名前.comにネームサーバの情報を登録します。お名前.com Naviにログインし、ネームサーバの設定、他のネームサーバを利用を選び先ほどコピーした4行を1～４の欄にペーストします（行末のピリオドは消してペーストしてください）
![onamae.com1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/d26c2a84-1ab3-d997-d495-1fb81524e401.png)

以上で、ネームサーバの設定が完了です。

## 独自ドメインのSSL証明書設定

https接続するためにはSSL証明書が必要なのでここではSSL証明書の作成方法を説明します。
と聞いて、あれ？と思った方がいるかと思います。というのも、SSL証明書を作成していないにも関わらず本記事の途中でhttps接続できるかを確認しました。実は、この時はまだ独自ドメインを使っていないのでcloudfront.netに対して用意されたSSL証明書を利用できていました。  
\
![SSL1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/8c5904e0-2463-69ce-3f7d-c7a75f54f02b.png)

独自ドメイン対応する場合は、それが使えなくなる（厳密にはCNAME設定したドメインにSSL証明書が必要になる）のでSSL証明書を作成する必要があったのです。それでは説明していきます。  
\
**１．CloudFrontで作成したディストリビューションを選択し設定を編集する**  
代替ドメインの欄に、取得したドメインと`www`を追加した値を入力します。例えば、`mochinochimochi.com`と`www.mochinochimochi.com`といった感じです。
![CloudFront5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/c5d0c569-aa21-9961-51be-73bb87b46c2b.png)

**２．SSL証明書を作成する**  
先ほどの画面の中に、`証明書をリクエスト`があるのでクリックします。
`パブリック証明書をリクエスト`を選択したまま次へをクリックします。
`完全修飾ドメイン名`に先ほどの代替ドメインを2つとも入力しリクエストします。
![SSL3.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/e2ba7e21-20ea-326c-bff2-fe43b898b8f4.png)

画面右上の`証明書を表示`をクリックし、遷移後の画面の右中央辺りの`Route53でレコードを作成`をクリックします。
![SSL4.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/6cf68987-0bbc-353d-f48f-e1fae8873d9c.png)

![SSL5.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/e178644d-862f-a10b-30c8-59dc0dfa7159.png)

しばらく待機してリロードし、ステータスが成功になることを確認したら元のCloudFrontの画面に戻り、証明書をリロードして設定し、変更を保存します。  
\
以上で、独自ドメインにSSL証明書を設定できました。

## Route53にAレコードを追加する

最後に、Route53にAレコードを追加するための手順を説明します。  
\
**※Aレコードとは**  
Aレコードは、ドメイン名をIPアドレスに変換するためのレコードです。今回の場合は、独自ドメインでアクセスされたときにCloudFrontのディストリビューションドメインに変換する役割を果たします。これにより、`mochinochi.com`⇒`CloudFrontディストリビューション`⇒`S3バケット`の経路でリソースを表示できるようになります。  
\
**１．Route53でホストゾーンを選択し、レコードを作成する**  
`レコード名`は空白のまま、`エイリアス`をONに設定し、`レコードタイプ`をAとします。`トラフィックのルーティング先`は`CloudFrontディストリビューションへのエイリアス`を選択してレコードを作成します。
![CloudFront6.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/9970f78c-e632-c351-dc76-ee9e9362b50a.png)

**２．もう一つレコードを作成する**  
手順1との違いは`レコード名`にwwwを入れている点です。
![CloudFront7.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/463753/005ca765-49c0-4964-be12-4aeec92fad0d.png)


\
以上で、Aレコードの追加は完了です。

## 接続確認

全ての設定は完了しました。最後に、`https://ドメイン名`をアドレスバーにペーストし、アクセスできるかを確認しましょう。  
\
正しく表示されていれば終了です。

## 最後に

本記事では、Route53とCloudFrontを用いて独自ドメイン対応＋https接続をおこなう方法を説明しました。かなり大変だったかと思いますが、実際の運用を考えるとこの辺りの対応は必須なので是非挑戦してみてくださいね！  

最近、ブログと自作アプリのLPを立ち上げたので是非見てってください！

ブログ↓
https://mochinochikimchi.com

アプリLP↓
https://mochinochikimchi.com/applications/mealmotion/index.html