S3+CloudFrontで、SSL証明書を無料で設定しhttps化する方法

ウェブサイトリニューアル時、クライアントに費用を出していただきSSL証明書を購入・設定するのには一定の専門知識が必要だったが、AWS(S3+CloudFront)の場合、無料でhttps化が実現できるのが素晴らしい。その設定方法を残す。

■料金 – AWS Certificate Manager | AWS
https://aws.amazon.com/jp/certificate-manager/pricing/

前提

手前味噌ではあるが、以下のようにS3で静的ウェブサイトを公開できていること。

■独自ドメインを購入し、個人の静的ページをAmazon S3で公開する方法 – S3で静的ウェブサイト
https://twinkangaroos.com/how-to-run-your-own-domain-with-s3.html

CloudFrontウェブディストリビューションを作成

以下のサイトを参考にしたが、日本語が理解できない・・・。

■CloudFront を使用して Amazon S3 でホストされた静的ウェブサイトを公開する
https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serve-static-website/

「匿名 (パブリック) アクセスを許可して、ウェブサイトのエンドポイントをオリジンとして使用する」をベースにすすめていく。

Amazon S3 コンソールを使用してバケットを作成し、このバケットで静的ウェブサイトのホスティングを有効にします。

こちらは設定済み。

[静的ウェブサイトホスティング] ダイアログボックスから、バケットのエンドポイントをコピーします。

S3の「プロパティ」の以下の部分のこと。なんとなく記憶しておく、くらいでよい(あとでプルダウンで選択できるので)。

作成したバケットへパブリック読み取りアクセスを許可するバケットポリシーを追加します。

既に追加済み。

CloudFront ウェブディストリビューションを作成します。

ここからがメイン。以下のページを参照する。

■ディストリビューションの作成-AmazonCloudFront
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-creating-console.html

CloudFrontのトップページへ。「CloudFront ディストリビューションを作成」ボタンをクリック。

オリジン作成

オリジンドメインは、先ほど目にした「パケットウェブサイトエンドポイント」を選択する。名前は「twinkangaroos.com」とする。

この設定完了後、httpへのアクセスは不要になるので、「ビューワープロトコルポリシー」で「Redirect HTTP to HTTPS」を選択し、httpsにリダイレクトするようにしておく。

SSL証明書をリクエスト

代替ドメイン名に「twinkangaroos.com」とし、カスタムSSL証明書ブロックの「証明書をリクエスト」リンクをクリック。

「ステップ1.ドメイン名の追加」にて、ドメイン名を入力し「次へ」ボタンクリック。

「ステップ2.検証方法の選択」にて、DNSの検証を選択して「次へ」クリック。

「ステップ3.タグを追加」→「ステップ4.確認」で「確認とリクエスト」ボタンをクリック。

「ステップ5.検証中」。「Route 53 でのレコードの作成」ボタンをクリック。

「作成」ボタンをクリック。→「成功」と表示される。

「続行」ボタンクリック。「検証保留中」と出るのでしばらく待つと「発行済み」に。

「カスタムSSL証明書」が選べるようになる。

「/」へのアクセスで「index.html」を参照するよう、デフォルトルートオブジェクトに「index.html」を入力。 最後に「ディストリビューションを作成」ボタンをクリック。

完了画面が表示される。

ドメイン名である「xxx.cloudfront.net」を後で選択するので目に止めておく。

ドメインの DNS レコードを更新して、ウェブサイトの CNAME を CloudFront ディストリビューションのドメイン名に設定します。

この日本語の意味がわからなくて迷う迷う・・・。今回、CNAMEではなく、Aレコードのルーティング先を変更することで実現する。
「Route 53」ダッシュボードから「ホストゾーン」リンクをクリック。

ドメイン名のリンクをクリック。

以下の「twinkangaroos.com」のAレコードの「値/トラフィックのルーティング先」を変更する。チェックボックスをクリックして「レコードを編集」ボタンをクリック。

「トラフィックのルーティング先」をクリックすると先ほど確認した「xxxx.cloudfront.net」が現れるので選択し、「保存」ボタンクリック。

DNS の変更が反映され、以前の DNS エントリが期限切れになるまで待ちます。

これで設定完了です!お役に立てたなら幸いです。