shiisuke’s blog

文系卒。社会人5年目くらい。ITやプログラミングの勉強で学んだことを書きます。

独自ドメイン＆HTTPS接続でWebサイトを公開してみた（Amazon S3 + Route 53 + CloudFront + ACM）

Webサイト AWS Certificate Manager AWS CloudFront Amazon Route 53 AWS Amazon S3

Ⅰ．きっかけ

先日受講したJAWS-UGのハンズオンで、「独自ドメイン」＆「HTTPS接続」のWebサイトを Amazon S3 上で公開できることを知ったので1、その方法をさっそく試してみました。

草野球の走塁クイズ

＜目次＞

Ⅱ．使った環境

  • Windows10(64bit)
  • Google Chrome(バージョン: 83.0.4103.116)
  • AWS アカウント

Ⅲ．基礎知識

Amazon Route 53（フィフティスリー）とは？2

  • DNSサーバ機能を提供するサービス
  • www.example.com のようなURLを、実際に使用しているEC2やS3などのAWSサービスのエンドポイントに結び付ける

AWS CloudFront とは？3

  • Webコンテンツの配信を高速化する、コンテンツデリバリーネットワーク（CDN）サービス
  • オリジナルのWebサーバの中身をエッジサーバがキャッシュし、一般ユーザからのリクエストに対してエッジサーバからコンテンツを返す

AWS CloudFront の特徴

  • オリジナルのWebサーバの負担軽減：オリジナルのWebサーバに届くリクエストが減る
  • レスポンス速度の高速化：クライアントからアクセスするネットワークの距離が近くなるため、それに応じてレスポンス速度が速くなる

AWS Certificate Manager（ACM） とは？4

  • SSL/TLS証明書のプロビジョニング、管理、デプロイができるサービス
  • ここで発行した証明書は、Amazon CloudFront で無料で利用できる

HTTPSとは？5

  • 「HyperText Transfer Protocol Secure」の略称
  • インターネット上のHTTP通信がSSLによって保護され、第三者が盗み見しようとしてもデータの内容を解読することができない

Ⅳ．手順

１．ドメインを準備する6

（１）ドメインの購入

  • お名前.comで購入する場合はこちらを参照

（２）ネームサーバの変更

＜AWS側での設定＞

  1. マネジメントコンソール（AWSのサービスを管理する画面）で、「サービス > Route 53」を選択する
  2. 「ホストゾーン > ホストゾーンの作成」をクリックする
  3. 画面右側の「ドメイン名」に、先ほど購入したドメイン名を入力する
  4. 「タイプ」は「パブリックホストゾーン」を選択し、「作成」をクリックする
  5. NSレコードとSOAレコードが表示されていることを確認する

＜お名前.com側での設定＞

  1. 「お名前.com Navi」にログインする
  2. 「ドメイン一覧」で、購入したドメイン名を選択する
  3. 「ネームサーバー情報」で「ネームサーバーの変更」を選択する
  4. 「2.ネームサーバーの選択」で「その他」を選択し、Route 53 のNSレコードの値を入力し、「確認」をクリックする
  5. 「ご確認」という画面で「OK」をクリックする
  6. しばらくすると、お名前.comから「ネームサーバー情報変更 完了通知」というメールが届く

２．S3 を使ってWeb サイトを公開する

（１）S3バケットの作成

  1. マネジメントコンソール（AWSのサービスを管理する画面）で、右上に表示されているリージョンを「東京」に設定する
  2. 「サービス > S3」を選択する
  3. 「バケットを作成」をクリックし、バケット名を入力する
  4. 「パブリックアクセスをすべてブロック」のチェックを外す
  5. 「現在の設定により、このバケットとバケット内のオブジェクトがパブリックになる可能性があることを承認します。」にチェックを入れ、「バケットを作成」をクリックする

（２）S3バケットの設定

＜静的Webサイトホスティングの設定＞

  1. S3 ダッシュボード（メイン画面）で、作成したバケットの名前を選択する
  2. 「プロパティ > Static website hosting」を選択する
  3. 「このバケットを使用してウェブサイトをホストする」を選択し、「インデックスドキュメント」に「index.html」と入力して「保存」をクリックする

＜バケットポリシーの設定＞

  1. 「アクセス権限 > バケットポリシー」を選択する
  2. 「バケットポリシーエディター」にこちらのコードを入れて「保存」をクリック

※「xxxxxxxxx」には作成したバケットの名前を入れる。

（３）ファイルアップロード

  1. S3画面で「概要」を選択する
  2. 「フォルダの作成」と「アップロード」を使って、公開するWebサイトのHTMLファイルやCSSファイルをアップロードする

※今回はこちらのファイルを使いました

f:id:shiisuke1229:20200712120403p:plain

（４）Webページ閲覧

  1. 「プロパティ > Static website hosting」を選択し、エンドポイントのURLをクリックする
  2. ブラウザで表示されることを確認する

３．HTTPS接続を可能にする

（１）CloudFront の設定

  1. マネジメントコンソールで、「サービス > CloudFront」を選択する
  2. 「Create Distribution」をクリックする
  3. 「Get Started」をクリックする
  4. 「Origin Domain Name」に、 2. (4) で確認したエンドポイントのURLを貼り付け、画面下の「Create Distribution」をクリックする
  5. 3分ほど待つと、「Status」が「In Progress」から「Deployed」に変わる
  6. 一覧に記載されている「Domain Name」をコピーし、ブラウザで開いて、2. (4) と同じWebサイトが表示されることを確認する

（４）Route 53 の設定①

  1. Route 53 ダッシュボード（メイン画面）で「ホストゾーン」を選択する
  2. 作成したドメインの名前を選択する
  3. 「レコードセットの作成」をクリックする
  4. 「レコードセットの作成」で、「名前」をWebサイトを公開予定のドメイン名とする
  5. 「タイプ」は「A - IPv4」を選択する
  6. 「エイリアス」は「はい」を選択する
  7. 「エイリアス先」はリストから「S3 ウェブサイトエンドポイント」に出てくるバケット名を選択して、「作成」をクリックする
  8. Aレコードが追加されていることを確認する
  9. 公開予定のWebサイトのドメインをブラウザのアドレスバーに入力し、2. (4) と同じWebサイトが表示されることを確認する

（３）SSL/TLS 証明書の作成

  1. マネジメントコンソールで、右上に表示されているリージョンを「バージニア北部」に設定する
  2. 「サービス > Certificate Manager」を選択する
  3. 「証明書のリクエスト」をクリックする
  4. 「パブリック証明書のリクエスト」を選択した状態で「証明書のリクエスト」をクリックする
  5. 「ドメイン名」に、公開予定のWebサイトのドメインを入力して、「次へ」をクリックする
  6. 「DNS の検証」を選択した状態で「次へ」をクリックする
  7. 「タグを追加」では何もせずに「確認」をクリックする
  8. 次の「確認」画面では「確定とリクエスト」をクリックする
  9. ドメイン名の隣にある▶ボタンを選択し、「Route 53 でのレコードの作成」をクリックして、「作成」をクリックする
  10. 10分ほど待つと、AWS Certificate Manager ダッシュボードで「検証状態」が「検証保留中」から「発行済み」に変わる

（４）SSL/TLS 証明書の配置

  1. CloudFront Distributions（メイン画面）で、新しく作成したリストの「ID」を選択する
  2. 「Behaviors」を選択し、先頭のリストにチェックを入れて「Edit」をクリックする
  3. 「Viewer Protocol Policy」で「Redirect HTTP to HTTPS」を選択し、画面下で「Yes, Edit」をクリックする
  4. 「General > Edit」を選択する
  5. 「Alternate Domain Names (CNAMEs)」に、公開予定のWebサイトのドメインを入力する
  6. 「SSL Certificate」で「Custom SSL Certificate (example.com)」を選択し、画面下で「Yes, Edit」をクリックする
    • ここが操作不可となっている場合は、リージョンの情報が「東京」のままになっているので、一度リロードする
  7. 10分ほど待つと、CloudFront Distributions で「Status」が「In Progress」から「Deployed」に変わる

（５）Route 53 の設定②

  1. Route 53 ダッシュボードで「ホストゾーン」を選択する
  2. 作成したドメインの名前を選択する
  3. 公開予定のドメインのAレコードにチェックを入れ、「エイリアス先」の内容を一旦削除して、リストから「CloudFrontディストリビューション」に出てくる名前を選択して、「レコードセットの保存」をクリックする

（６）Webサイトへのアクセス

  • 公開予定のWebサイトのドメインをブラウザのアドレスバーに入力し、2. (4) と同じWebサイトが表示され、HTTPS接続になっていたら成功！
    • アクセスできない場合は、しばらく時間を置いてからアクセスする

Ⅴ．感想

  • これまでは「AWSってサービスが多くて難しいなぁ...」と感じていましたが、今回実際に手を動かしてみると、各サービスの役割や内容がスッと頭に入ってきて良かったです(^^)
  • 今後は、よく名前を聞く Amazon EC2 や AWS Lambda などのサービスたちも触ってみたいと思います。
  • 今回作ったサイトは草野球チームのメンバーに自慢します👍

Ⅵ．参考

  1. 詳しい手順はこちらの動画で紹介されています。動画では Route 53 でドメインを取得されていますが、今回は「お名前.com」でドメインを購入し、ネームサーバを Route 53 に変更する手順で進めました。↩

  2. 小笠原 種高氏『Amazon Web Servicesのしくみと技術がこれ1冊でしっかりわかる教科書』（2019年、技術評論社）を参照↩

  3. 同上↩

  4. https://aws.amazon.com/jp/certificate-manager/ を参照↩

  5. 「SSLとは？httpsとは？簡単説明」を参照↩

  6. mochikoAsTech氏『DNSをはじめよう ～基礎からトラブルシューティングまで～』を参照↩