AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート②）

今回は[AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート①）](https://qiita.com/akki-memo/items/7c3b7ee4434cd39f7475)こちらの続きをやっていきたいと思います。

まだこちらの記事を見ていない方はパート①を見てからこちらの記事を見て下さい。

1. 静的サイトをS3へデプロイ
2. お名前ドットコムでドメイン登録
3. Route53で独自ドメイン登録（ここまでがパート①）
4. CertificateManagerでSSL証明書の発行（ここからパート②）
5. CloudFrontで独自ドメインでアクセス

パート②ではこの４と５をやっていきます。

まずHTTPS化について説明します。

今やほとんどのサイトがHTTPSとして始まっています。

これはいわゆる安全なサイトであることの証明です。

そして、これを証明するには「SSL証明書」というものが必要です。

SSL証明書を発行するにはいろいろなサービスがあるのですが、AWSの「CertificateManager」を使うことで**無料**でSSL証明書を発行することができます！

そして、パート①のお名前ドットコムで登録したドメインを「CloufFront」のドメインとすることで静的サイトを独自のドメインで公開することができるんです！！！

今回はこんな感じでやっていこうかなと思います！

それでは説明を一緒に見ていきましょう！

#4. CertificateManagerでSSL証明書の発行#

###お名前ドットコムのネームサーバー設定###

まず、証明書を発行する前にパート①のRoute５３で登録したホストゾーンをクリックしてください。

以下、説明用のドメインは``example.com``とします。

また、Route53に登録したホストゾーン名は``www.example.com``とします。

すると、レコード名``www.example.com``のタイプが``NS``のところに以下のような４つのルーティング先があると思います。

```
ns-111.awsdns-11.com.
ns-2222.awsdns-22.org.
ns-3333.awsdns-33.co.uk.
ns-444.awsdns-44.net.
```

<font color="red">※注意</font> これは悪魔で例なのでこれは使わないでください。

###お名前ドットコムのDNS設定###

そしたら[お名前ドットコム](https://navi.onamae.com/top)へログインしてください。

下の画像のように「DNS」をクリックし「ドメインのDNS設定」をクリック。

「ドメインのDNS関連機能設定」を選択し「次へ」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/6b1b2bd3-5690-e5d5-6d65-84799677561f.png)

ドメイン名を選択する画面が表示されるので、登録したドメイン名を選択し「次へ」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/8ecd9972-8858-4e76-27b1-e5b3a5ad9e40.png)

「DNSレコード設定を利用する」の右にある「設定する」をクリック。

すると、このような画面になります。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/cfcf1bb3-4d8b-734a-ab59-31b70d0eb74d.png)


そして、先ほどRoute53で確認した4つのルーティングの設定を行います。

```
ns-111.awsdns-11.com.
ns-2222.awsdns-22.org.
ns-3333.awsdns-33.co.uk.
ns-444.awsdns-44.net.
```

こちらですね。

下の画像のようにこの４つを追加してください。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/7069f750-615d-77b6-da56-a7da76ccc971.png)

<font color="red">※注意</font> Route53のルーティングの値の最後には``.com.``となっていますが、お名前ドットコムに登録するときは``.com``として最後の``.``を消して登録してください。

「TYPE」は４つとも「NS」に設定してください。

ホスト名にはRoute53に登録したホストゾーン名を入れて下さい。

例：www.example.com

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/4c363eb4-b26a-811f-470c-16cdf911b8b5.png)

そして、画面を下へスクロールし、「DNSレコード設定用ネームサーバー変更確認」にチェックが外します。これをしないと今登録したルーティングの設定がリセットされるのでご注意。

そしたら「確認画面へ進む」をクリックし、「設定する」をクリック。

###お名前ドットコムのネームサーバー設定###

無事設定が完了したら左のメニューバーの「ネームサーバーの設定」にある「ネームサーバーの変更」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/1532bfd7-d668-54eb-b701-ee36e64aba60.png)

ドメイン名では自分が登録したドメインにチェックします。（例：example.com）

ネームサーバーの選択では「その他」→「その他のネームサーバーを使う」を選択し、画像のようにRoute53のルーティングの値を４つ入れます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/5a3567b1-64f4-62a0-523b-db9039b98166.png)

下の「確認」を押し、設定します。

ネームサーバーの移行には少し時間がかかります。

僕の体感ではそこまで時間はかかりませんでした。

完了したら登録したメールアドレス宛に完了通知メールが届くと思います。

そしたら、コマンドプロンプトで以下のコマンドを打ってください。

```
nslookup -type=ns www.example.com

権限のない回答:
www.example.com   nameserver = ns-111.awsdns-11.co.uk
www.example.com   nameserver = ns-2222.awsdns-22.com
www.example.com   nameserver = ns-3333.awsdns-33.net
www.example.com   nameserver = ns-444.awsdns-444.org
```

ちゃんと設定したネームサーバーの値が返ってきたらOKです！

###CertificateManagerでSSL証明書の発行###

次は、いよいよ大詰め。

SSL証明書の発行をしていきます。

AWSコンソールのサービスに「Certificate Manager」と入力しクリックします。

「証明書のリクエスト」をクリック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/af3b8547-ebe4-51e9-2dec-002c1e47b316.png)

「パブリック証明書のリクエスト」にチェック。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/21ab0f31-00b3-a05a-84da-d05dd4b91e00.png)


ドメイン名を入力

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/d8b4002d-1cad-6e5e-c162-9c5074f2f1e4.png)

「DNSの検証」にチェック

「タグ」は何も入力せずに「次へ」をクリック

「確定とリクエスト」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/f462333c-0999-c960-f08f-ccaa38100d44.png)


ドメインのをクリックするとこのように「CNAME」というタイプのものが表示されます。

※例では``www.example.com``としていたのですが、``www.example.com``の証明書が発行できなかったので適当にドメイン名を入力しました。気にせず次へ進んでください。

そしたらこの値をお名前ドットコムのDNSで設定します。

例で言うと、ホスト名には``_aaaaaaaaaaaaaaaaaaaaa.www``、VALUEには``_bbbbbbbbbbbbbbbbbbbbbbbb.ccccccc.acm-validations.aws``を入力します。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/5d496c9c-99c8-5075-43bb-c6da1531b243.png)


このように設定すればOK！

そしたら、Route53でも同じようにレコードを作成します。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/b25eb9be-55b1-95cc-dd7b-9f131c9daabb.png)

「Certificate Manager」の戻り、数分待ち証明書の検証が成功すればOK！！


#5. CloudFrontで独自ドメインでアクセス#

いや～ここまで長かったですね。

最後はすごく簡単です！！

ここでの作業は４番の１０分の１くらいの作業ですので、ごゆっくりご覧ください！

AWSコンソールにて「CloudFront」と入力しクリック

「Create Distribution」をクリック

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/1f1a0d9c-6379-a7cb-07c0-69840465e6dd.png)

「Origin Domain Name」にはS3のバケットを選択してください。

すると、「Origin ID」も自動で入力してくれます。

![無題.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/6a21919f-6f9c-f2ce-ab81-e7aaa8a3061b.png)

「Alternate Domain Names(CNAMEs)」には自分で登録したドメイン名を入力してください。

「SSL Certificate」では「Custom SSL Certificate (example.com):」を選択し、先ほど作成したSSL証明書を選択してください。（SSLの証明書がしっかりと発行されていれば候補が出てきます）

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/954754/463bc11e-5d2c-0790-c900-192ab45197da.png)

作成したら「Status」が「Deployed」になるまで待つ。

最後に[https://www.example.com](https://www.example.com)にアクセス！！！

表示されたら完璧です！

いかがだったでしょうか？

初めての方は恐らく疲れたと思います。

ただ、AWSを使うことで自作サイトを初心者でも公開することができるんです！

AWSは「革命」と言っても過言ではないですね。

引き続き勉強頑張りましょう！

以上、「AWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた（パート②）」でした！

良ければ、LGTM、コメントお願いします。

また、何か間違っていることがあればご指摘頂けると幸いです。

他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！

Thank you for reading