【2024年最新版】S3でHTTPS対応の静的サイトを独自ドメインでホスティングする方法～後編～
【更新履歴】
2023年にAWSの変更に合わせて大幅に加筆修正しました。
2024/06/29 www.hoge.comとhoge.com両方使いたい場合を追記
—————–
前回の記事の続きです。
前回までは、AWSのS3を使って、HTTPでウェブサイトをホスティングしました。
今回は、それをバージョンアップし、独自ドメインでHTTPS通信に対応したウェブサイトにしていきます。
※独自ドメインはAWSのROUTE53を使って取得している前提で記述しています。
※私の独自ドメインは[devdev.link]という少し変わったドメインです（年間＄５と安かった）
なので、URLはhttps://www.devdev.link/index.html、のようになります。
そこは、みなさんの独自ドメインに合わせて、読み替えていただければと思います。
構成図
構成は下記のようになっています。
Amazon CloudFrontを使う理由は、AWS Certificate Manager （SSL証明書発行サービス：以下ACM）に対応しているからです。
S3単体ではHTTPS通信には対応していません。
ACMの対応サービスについてはこちら。
証明書のリクエスト
AWS Certificate Manager（以下ACM)で、SSLの証明書を取得していきます。
注意点として後に使うCloudFrontの都合上ロケーションはバージニア北部である必要があります。
バージニア北部になっていない場合は、右上のロケーションをバージニア北部（us-east1)に変更してください。
まずはACMにアクセスして、証明書のリクエストを押下します。
まだ何も作られていない方は下記のように表示されるかもしれません。
同様に、証明書をリクエストを押下します。
次に、パブリック証明書をリクエストに、チェックをいれて、次へを押下します。
次に、必要事項を入力していきます。
ドメイン名ですが、ここでは「www.独自ドメイン名」としていますが、wwwはあってもなくても可能です。
ここで設定したドメイン名はあとで使うのでメモ帳にコピーしておきます。
※ドメイン名を、
www.独自ドメイン名.comと
独自ドメイン名.com
の両方を使いたい場合は、「この証明書に別の名前を追加」で、独自ドメイン名.comも追加します。
将来の拡張性を考えて、*.独自ドメイン名.comとする手もあります。
次に検証方法を選択します。
ROUTE53でドメインを取得した場合は、DNSの検証を選択すると簡単です。
タグを追加、には何も書かずに、下部のリクエストボタンをクリックします。
その後、ぐるぐる渦巻ボタン（更新ボタン）を押すと、証明書が発行されていることがわかります。
青文字の証明書IDをクリックして、証明書の詳細を見ます。
項目：ドメインの部分にある、ROUTE53でのレコードを作成、とクリックします。
フィルターがかかっていて、何も表示されないかもしれませんが、バツボタンを押して、フィルターをクリアすると、
下記のように、検証ステータス：成功の表示が見えると思います。
上手くいっていない場合、検証状態は「検証保留中」となっているかもしれません。
時間が経てば変わるらしいですが、どうやらROUTE53にアクセスすると、検証状態が「成功」と速く変わるようなので、
ROUTE53にアクセスします。（またACMに戻るので新しいタブで開くことをお勧めします）
ROUTE53にアクセスします。
このように、CNAMEに証明書が追加されていることが分かります。
さて、ACMに戻ります。
戻ると、検証状態が成功に変わっているかなと思います。
（変わっていない場合は、少し待ちましょう）
CloudFrontの設定
ディストリビューションの作成
CloudFrontへアクセスをして、「ディストリビューションを作成」をクリックします。
初期設定
Origin Domain Nameには、「S3の静的ウェブサイトホスティングのバケットウェブサイトエンドポイントのURLの「http://」を除いた部分」（後述）を記述します。
S3へ移動
「S3の静的ウェブサイトホスティングのバケットウェブサイトエンドポイントのURLの「http://」を除いた部分」とは何か、説明します。
S3を新しいタブで開き、前編で作成したバケットへ移動します。
その次にプロパティタブをクリックします。
下部へ移動し、静的ウェブサイトをホスティングまでいきます。
ここの、「バケットウェブサイトエンドポイント」のURL部分の、http://以外の部分をコピペします。
CloudFrontで初期設定の再開
CloudFrontへ戻り、先ほどコピーしたバケットウェブサイトエンドポイントを、Origin Domain Nameへ貼り付けます。
そうすると、名前、も自動で入力されるかと思います。
Alternate Domain Names(CNAMEs)の設定
下方へ移動していき、代替ドメイン名(CNAMEs)の項目を追加ボタンをクリックし、
ACMの設定でコピーしておいた、ドメイン名を記述します。
※www.独自ドメイン名.comと独自ドメイン名.com
の両方を使いたい場合は先ほどACMで証明書に「この証明書に別の名前を追加」を行ったと思いますが、
同様に、「項目を追加」ボタンを押して、独自ドメイン名.comも追加します。
SSL 証明書の設定
代替ドメイン名の下のカスタム SSL 証明書へ移動します。
CutomSSL Certificateの入力欄をクリックすると、候補が出てくるかと思います。
そこに、ACMの項で作成した証明書を選択します。
設定の終了
下部へ移動し、ディストリビューションを作成を押下し、CloudFrontの初期設定は終了です。
Domain Nameのコピー
ディストリビューションの作成後、ディストリビューションの一覧が表示されると思います。
作成したIDをクリックした後表示されるディストリビューションドメイン名をコピーします。
ROUTE53の設定
レコードの作成
ROUTE53へ移動し、自身のドメイン名をクリックし、レコードを作成をクリックします。
設定は下記のようにします。
値は、CloudFrontの最後の項でコピーしたDomain Nameを貼り付けます。(https://の部分は抜いても抜かなくてもOKです）
その後レコードを作成をクリックします。
しばらくCloudFrontのステータスがIn Progressのままかもしれませんが、Deployされるまでしばらく（5分ほど？）一休みします。
有効になったら、すべての設定は終了です！
サイトの確認
独自ドメイン＋HTTPSのURLで、きちんとファイルが表示されたら完成です。
お疲れ様でした！
まとめ
前編通してのまとめです。
- ROUTE53でドメインを取得
- HTMLファイルを用意する
- S3にアップロードする
- S3で静的ウェブサイトをホスティングする
- S3で公開設定を行う（HTTPサイトの完成）ここまでが前編
- ACMでSSL証明書を作成する
- CloudFrontの設定を行う
- ROUTE53にCloudFrontのドメインを紐づける
- 完成！
ちょっと長いですね。。
とはいえ、セキュリティを担保する上では必要なことだとは思いますので、頑張るしかないかなとは思います。
お疲れ様でした！