![](https://mik2062.jp/wp-content/uploads/2022/08/fbb78db025839258a0abd0d6100df36a-150x150.png)
S3で作ったWEBサイトはhttpsには対応していないのですか?
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
![](https://mik2062.jp/wp-content/uploads/2022/08/1341584-150x150.jpg)
CloudFrontやRoute53と連携して、S3のWEBサイトをhttpsや独自ドメインで公開する方法を説明します
- S3で作成したWEBサイトをCloudFrontでhttpsに対応する手順
- S3で作成したWEBサイトをRoute53で独自ドメインに対応する手順
事前準備
この記事では、AWSのS3で作成したWEBサイトをCloudFrontと連携してhttpsに対応します。
S3でWEBサイトを作成する手順は以下の記事になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-1-300x158.jpg)
![](https://mik2062.jp/wp-content/uploads/2023/06/aws-1-1-300x158.jpg)
CloudFrontを作成してhttpsに対応する
S3のWEBサイトホスティング機能はhttpでのWEBサイト公開にしか対応していません。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-159.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-159.png)
CloudFrontをS3と連携させて、S3のWEBサイトをhttpsで公開します。
作成したS3のバケットのバケットウェブサイトエンドポイント
をクリップボードなどにコピーしておきます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-14.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-14.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-24.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-24.png)
AWSのマネジメントコンソールで検索欄にCloudFront
と入力して、リストからCloudFrontを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-132-1024x530.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-132-1024x530.png)
CloudFrontのコンソール画面で CroudFlontディストリビューションを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-26-1024x364.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-26-1024x364.png)
ディストリビューションの作成画面になります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-28.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-28.png)
一番上のオリジンドメイン欄に、準備しておいたS3のウェブサイトエンドポイント
を入力します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-133.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-133.png)
オリジンドメイン
欄にカーソルを入れると、AWSで利用しているドメインのリストが表示されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-32.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-32.png)
リストからS3で先程作成したバケットのドメインを選択するとWEBサイトエンドポイントを使用するよう促されるのでクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-30.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-30.png)
ウェブサイトエンドポイント
の値に置き換わります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-31.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-31.png)
オリジンドメインを入力すると名前欄にも同じ値が自動的に入ります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-38.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-38.png)
デフォルトのキャッシュビヘイビア では、http://〜での接続をhttps://〜に繋ぎ変えるために、ビューワープロトコルポリシーをRdirect HTTP to HTTPS
にします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-79.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-79.png)
ウェブアプリケーションファイアウォール(WAF)
はセキュリティ保護を有効にしないでください
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-80.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-80.png)
設定
は何も変更せずに ディストリビューションを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-78.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-78.png)
ディストリビューションが作成されます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-81-1024x497.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-81-1024x497.png)
ディストリビューションにアクセスできるか確認します。
ディストリビューションドメイン名
をコピーしておきます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-135.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-135.png)
ブラウザに貼り付けると、httpsでWEBサイトにアクセスできます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-84.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-84.png)
Route53で独自ドメインに対応する
これまでの手順で、CloudFrontを利用してhttpsでWEBサイトを公開しています。
ただ英数字の羅列.cloudfront.net
というURLは分かりにくいので、独自ドメインでアクセスできるように設定します。
この記事の手順で独自ドメインを利用するには、Route53で独自ドメインのホストゾーンが必要です。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-88.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-88.png)
Route53で独自ドメインを取得した場合、ホストゾーンは自動的に作成されます。
お名前.comなど他のドメイン登録サービスで独自ドメインを取得した場合は、以下の記事の手順で作成できます。
![](https://mik2062.jp/wp-content/uploads/2023/09/image-82-300x158.png)
![](https://mik2062.jp/wp-content/uploads/2023/09/image-82-300x158.png)
CloudFrontにSSL証明書を設定する
CloudeFrontで、この記事で作成したディストリビューションを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-89-1024x237.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-89-1024x237.png)
設定
の 編集をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-90-1024x617.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-90-1024x617.png)
代替ドメイン名(CNAME)
に以下の2つの内容を入力します。
- 独自ドメイン名(例: example.com)
- www.独自ドメイン名(例: www.example.com)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-138.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-138.png)
カスタム SSL 証明書
欄の証明書をリクエストをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-91.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-91.png)
証明書をリクエスト
画面に移動しますので 次へをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-92.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-92.png)
パブリック証明書をリクエスト
画面で完全就職ドメイン名
にディストリビューションの画面で代替ドメイン名(CNAME)に入力したのと同じドメイン名を入力します。
- 独自ドメイン名(例: example.com)
- www.独自ドメイン名(例: www.example.com)
検証方法
はDNS 検証・推奨
を選択して リクエストをクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-95.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-95.png)
証明書のリクエストが完了しますので 証明書を表示をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-98-1024x377.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-98-1024x377.png)
作成直後の 証明書を表示ボタンを閉じてしまった場合、説明書の一覧
メニューから説明書を表示できます。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-139.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-139.png)
証明書の画面で Route 53 でレコードを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-141.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-141.png)
作成されるレコードの確認画面が表示されるので レコードを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-142.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-142.png)
Route53のホストゾーンにレコードが作成されます。
作成直後のステータスは保留中の検証
となっています。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-144.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-144.png)
1分程度でステータスが成功
に変わります。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-112.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-112.png)
Route53とCloudFrontを連携する
Route53の独自ドメインのホストゾーンにCloudFrontのディストリビューションのレコードを作成して連携します。
Route53で独自ドメインのホストゾーンを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-146.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-146.png)
ホストゾーンの内容が表示されるので レコードの作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-114-1024x501.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-114-1024x501.png)
レコードの作成画面でレコード名
は空のままにしてエイリアス
のチェックをONにします。
トラフィックのルーティング先
のリストからCloudFrontディストリビューションへのエイリアス
を選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-151.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-151.png)
ディストリビューションを選択
欄で今回作成したディストリビューションを選択します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-147.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-147.png)
レコード レコードを作成をクリックします。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-148.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-148.png)
ディストリビューションのレコードが作成されます。
続けてもう1件レコードを作成します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-149.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-149.png)
2個目のレコードはレコード名
にwww
と入力して、あとは1個目と同じ内容で作成します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-121-1024x675.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-121-1024x675.png)
これですべての手順が完了です。
ブラウザからhttps://独自ドメインおよびhttps://www.独自ドメインでアクセスできることを確認します。
![](https://mik2062.jp/wp-content/uploads/2023/06/image-153.png)
![](https://mik2062.jp/wp-content/uploads/2023/06/image-153.png)