LoginSignup
2
3

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-02-20

今回はAWS初心者がお名前ドットコム、S3、CloudFront、CertificateManager、Route53を使ってHTTPS化されたサイトを公開してみた(パート①)こちらの続きをやっていきたいと思います。

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

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

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

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

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

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

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

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

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

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

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

4. CertificateManagerでSSL証明書の発行

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

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

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

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

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

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

※注意 これは悪魔で例なのでこれは使わないでください。

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

そしたらお名前ドットコムへログインしてください。

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

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

image.png

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

image.png

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

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

無題.png

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

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

こちらですね。

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

無題.png

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

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

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

例:www.example.com

image.png

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

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

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

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

image.png

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

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

image.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

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

image.png

ドメイン名を入力

image.png

「DNSの検証」にチェック

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

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

無題.png

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

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

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

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

無題.png

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

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

無題.png

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

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

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

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

ここでの作業は4番の10分の1くらいの作業ですので、ごゆっくりご覧ください!

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

「Create Distribution」をクリック

無題.png

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

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

無題.png

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

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

image.png

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

最後にhttps://www.example.comにアクセス!!!

表示されたら完璧です!

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

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

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

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

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

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

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

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

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

Thank you for reading

2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3