S3のWEBサイトを独自ドメインで公開してSSL証明書の自動更新を行う手順

当ページのリンクには広告が含まれています。
  • URLをコピーしました!
生徒

S3で作ったWEBサイトはhttpsには対応していないのですか?

先生

CloudFrontやRoute53と連携して、S3のWEBサイトをhttpsや独自ドメインで公開する方法を説明します

この記事で分かること
  • S3で作成したWEBサイトをCloudFrontでhttpsに対応する手順
  • S3で作成したWEBサイトをRoute53で独自ドメインに対応する手順
目次

事前準備

この記事では、AWSのS3で作成したWEBサイトをCloudFrontと連携してhttpsに対応します。

S3でWEBサイトを作成する手順は以下の記事になります。

CloudFrontを作成してhttpsに対応する

S3のWEBサイトホスティング機能はhttpでのWEBサイト公開にしか対応していません。

CloudFrontをS3と連携させて、S3のWEBサイトをhttpsで公開します。

事前準備

作成したS3のバケットのバケットウェブサイトエンドポイントをクリップボードなどにコピーしておきます。

AWSのマネジメントコンソールで検索欄にCloudFrontと入力して、リストからCloudFrontを選択します。

CloudFrontのコンソール画面で CroudFlontディストリビューションを作成をクリックします。

ディストリビューションの作成画面になります。

一番上のオリジンドメイン欄に、準備しておいたS3のウェブサイトエンドポイントを入力します。

オリジンドメインをリストから選択する場合

オリジンドメイン欄にカーソルを入れると、AWSで利用しているドメインのリストが表示されます。

リストからS3で先程作成したバケットのドメインを選択するとWEBサイトエンドポイントを使用するよう促されるのでクリックします。

ウェブサイトエンドポイントの値に置き換わります。

オリジンドメインを入力すると名前欄にも同じ値が自動的に入ります。

名前は自分がわかりやすい名前に変更しても問題ありません。

デフォルトのキャッシュビヘイビア では、http://〜での接続をhttps://〜に繋ぎ変えるために、ビューワープロトコルポリシーRdirect HTTP to HTTPSにします。

Googleにhttp://〜https://〜が別々に登録されたり、正確なPV数が測りにくなったりするのでhttps://〜だけに統一しておいた方がよいです。

ウェブアプリケーションファイアウォール(WAF)セキュリティ保護を有効にしないでくださいを選択します。

有効にしても構わないのですが、有料の機能のため、ここでは無効を選択しています。

設定は何も変更せずに ディストリビューションを作成をクリックします。

ディストリビューションが作成されます。

作成されたディストリビューションの内容がインターネット上に反映されるまでには数分掛かります。

ディストリビューションにアクセスできるか確認します。

ディストリビューションドメイン名をコピーしておきます。

ブラウザに貼り付けると、httpsでWEBサイトにアクセスできます。

Route53で独自ドメインに対応する

これまでの手順で、CloudFrontを利用してhttpsでWEBサイトを公開しています。

ただ英数字の羅列.cloudfront.netというURLは分かりにくいので、独自ドメインでアクセスできるように設定します。

Route53のホストゾーンが必要です

この記事の手順で独自ドメインを利用するには、Route53で独自ドメインのホストゾーンが必要です。

Route53で独自ドメインを取得した場合、ホストゾーンは自動的に作成されます。

お名前.comなど他のドメイン登録サービスで独自ドメインを取得した場合は、以下の記事の手順で作成できます。

CloudFrontにSSL証明書を設定する

CloudeFrontで、この記事で作成したディストリビューションを選択します。

設定 編集をクリックします。

代替ドメイン名(CNAME)に以下の2つの内容を入力します。

  • 独自ドメイン名(例: example.com)
  • www.独自ドメイン名(例: www.example.com)

使いたいサブドメインが他にある場合、それも追加して入力します。

カスタム SSL 証明書欄の証明書をリクエストをクリックします。

証明書をリクエスト画面に移動しますので 次へをクリックします。

パブリック証明書をリクエスト画面で完全就職ドメイン名にディストリビューションの画面で代替ドメイン名(CNAME)に入力したのと同じドメイン名を入力します。

  • 独自ドメイン名(例: example.com)
  • www.独自ドメイン名(例: www.example.com)

検証方法DNS 検証・推奨を選択して リクエストをクリックします。

証明書のリクエストが完了しますので 証明書を表示をクリックします。

証明書を表示する別の方法

作成直後の 証明書を表示ボタンを閉じてしまった場合、説明書の一覧メニューから説明書を表示できます。

証明書の画面で Route 53 でレコードを作成をクリックします。

作成されるレコードの確認画面が表示されるので レコードを作成をクリックします。

ここでレコードが表示されない場合、ディストリビューションの代替ドメイン名(CNAME)の設定やRoute53のホストゾーンのレコード設定を見直してください。

Route53のホストゾーンにレコードが作成されます。

作成直後のステータスは保留中の検証となっています。

1分程度でステータスが成功に変わります。

Route53以外で独自ドメインを取得していて、数分経ってもステータスが保留中の検証のままで成功に変わらない場合、Route53のホストゾーンでで独自ドメインのネームサーバーが正しく設定されているかを確認してください。

Route53とCloudFrontを連携する

Route53の独自ドメインのホストゾーンにCloudFrontのディストリビューションのレコードを作成して連携します。

Route53で独自ドメインのホストゾーンを選択します。

ホストゾーンの内容が表示されるので レコードの作成をクリックします。

レコードの作成画面でレコード名は空のままにしてエイリアスのチェックをONにします。

トラフィックのルーティング先のリストからCloudFrontディストリビューションへのエイリアスを選択します。

https://独自ドメインでアクセスするためのレコードです。

ディストリビューションを選択欄で今回作成したディストリビューションを選択します。

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

ディストリビューションのレコードが作成されます。

続けてもう1件レコードを作成します。

2個目のレコードはレコード名wwwと入力して、あとは1個目と同じ内容で作成します。

これですべての手順が完了です。

ブラウザからhttps://独自ドメインおよびhttps://www.独自ドメインでアクセスできることを確認します。

よかったらシェアしてね!
  • URLをコピーしました!
目次