【2021年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法~後編~

【2021年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法~後編~

前回の記事の続きです。

前回までは、AWSのS3を使って、HTTPでウェブサイトをホスティングしました。

今回は、それをバージョンアップし、独自ドメインでHTTPS通信に対応したウェブサイトにしていきます。

※独自ドメインはAWSのROUTE53を使って取得している前提で記述しています。

※私の独自ドメインは[devdev.link]という少し変わったドメインです(年間$5と安かった)

なので、URLはhttps://www.devdev.link/index.html、のようになります。

そこは、みなさんの独自ドメインに合わせて、読み替えていただければと思います。

構成図

構成は下記のようになっています。

Amazon CloudFrontを使う理由は、AWS Certificate Manager (SSL証明書発行サービス:以下ACM)に対応しているからです。

S3単体ではHTTPS通信には対応していません。

ACMの対応サービスについてはこちら

証明書のリクエスト

AWS Certificate Manager(以下ACM)で、SSLの証明書を取得していきます。

まずはACMにアクセスして、証明書のリクエストを押下します。

次に、パブリック証明書をリクエストに、チェックをいれて、証明書のリクエストを押下します。

次に、必要事項を入力していきます。

ドメイン名の追加ですが、ここでは「www.独自ドメイン名」としていますが、wwwはあってもなくても可能です。

ここで設定したドメイン名はあとで使うのでメモ帳にコピーしておきます。

次に検証方法を選択します。

ROUTE53でドメインを取得した場合は、DNSの検証を選択すると簡単です。

選択して、次へを押します。

タグを追加、には何も書かずに確認、をクリックします。

確認とリクエストで、情報を確認してOKでしたら、確定とリクエストボタンをクリックします。

ステップ5検証に移ったら、▶www.devdev.link部分をクリックして、情報を展開します。

展開後、ROUTE53でのレコードを作成、とクリックして、

その後に表示されるメッセージボックスで作成をクリックします。

上手くいけば、成功となると思います。

この時点では、検証状態は「検証保留中」となっています。

時間が経てば変わるらしいですが、どうやらROUTE53にアクセスすると、検証状態が「成功」と速く変わるようなので、

ROUTE53にアクセスします。(またACMに戻るので新しいタブで開くことをお勧めします)

ROUTE53にアクセスします。

このように、CNAMEに証明書が追加されていることが分かります。

 

さて、ACMに戻ります。

戻ると、検証状態が成功に変わっているかなと思います。

(変わっていない場合は、少し待ちましょう)

続行をクリックして、ACMの設定は終わります。

CloudFrontの設定

ディストリビューションの作成

CloudFrontへアクセスをして、「Create Distribution」をクリックします。

 

Get Startedをクリックします。

初期設定

Origin Domain Nameには、「S3の静的ウェブサイトホスティングのバケットウェブサイトエンドポイントのURLの「http://」を除いた部分」(後述)を記述します。

S3へ移動

「S3の静的ウェブサイトホスティングのバケットウェブサイトエンドポイントのURLの「http://」を除いた部分」とは何か、説明します。

S3を新しいタブで開き、前編で作成したバケットへ移動します。

その次にプロパティタブをクリックします。

下部へ移動し、静的ウェブサイトをホスティングまでいきます。

ここの、「バケットウェブサイトエンドポイント」のURL部分の、http://以外の部分をコピペします。

CloudFrontで初期設定の再開

CloudFrontへ戻り、先ほどコピーしたバケットウェブサイトエンドポイントを、Origin Domain Nameへ貼り付けます。

そうすると、Origin IDも自動で入力されるかと思います。

 

Alternate Domain Names(CNAMEs)の設定

下方へ移動していき、Alternate Domain Names(CNAMEs)に、

ACMの設定でコピーしておいた、ドメイン名を記述します。

SSL Certificateの設定

Alternate Domain Namesの下のSSL Certificateへ移動します。

CutomSSL Certificateの入力欄をクリックすると、候補が出てくるかと思います。

そこに、ACMの項で作成した証明書を選択します。

 

設定の終了

下部へ移動し、Create Distributionを押下し、CloudFrontの初期設定は終了です。

Domain Nameのコピー

ディストリビューションの作成後、ディストリビューションの一覧が表示されると思います。

作成したディストリビューションのDomain Nameの部分をコピーします。

ROUTE53の設定

レコードの作成

ROUTE53へ移動し、自身のドメイン名をクリックし、レコードを作成をクリックします。

設定は下記のようにします。

値は、CloudFrontの最後の項でコピーしたDomain Nameを貼り付けます。

その後レコードを作成をクリックします。

しばらくStatusがIn Progressのままかもしれませんが、Deployされるまでしばらく(5分ほど?)一休みします。

Deployedになったら、すべての設定は終了です!

 

サイトの確認

独自ドメイン+HTTPSのURLで、きちんとファイルが表示されたら完成です。

お疲れ様でした!

まとめ

前編通してのまとめです。

  1. ROUTE53でドメインを取得
  2. HTMLファイルを用意する
  3. S3にアップロードする
  4. S3で静的ウェブサイトをホスティングする
  5. S3で公開設定を行う(HTTPサイトの完成)ここまでが前編
  6. ACMでSSL証明書を作成する
  7. CloudFrontの設定を行う
  8. ROUTE53にCloudFrontのドメインを紐づける
  9. 完成!

ちょっと長いですね。。

とはいえ、セキュリティを担保する上では必要なことだとは思いますので、頑張るしかないかなとは思います。

お疲れ様でした!