本サイトに掲載しているコードや画像は全てフリー素材として公開しております。私用商用問わず、ご自由にお使いください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
その他
S3で静的ホスティングしたWEBサイトをHTTPS化する方法(AWS)
更新日:2022.12.3
- 本ページで紹介している手順を進めるためには、Route53でドメイン取得、ACMでパブリック証明書取得、S3でWEBサイトを静的ホスティングの各手順を完了させておく必要があります。
- 本ページの手順は、ルートドメイン・サブドメイン両方のHTTP化に対応しています。
- 本ページの内容については、下記の公式ドキュメントを参考にしました。
👉 Amazon CloudFront ディストリビューションを使用して静的なウェブサイトを提供する
S3で静的ホスティングしたWEBサイトのHTTPS化手順
- (前提)Route53でドメインを取得していること、ACMでパブリック証明書(SSL証明書)を取得していること、S3でWEBサイトを静的ホスティングしていること。
- (注)手順内の画像はサブドメインをHTTPS化していますが、ルートドメインの場合も同様の手順でHTTPS化できます。
- (注)AWSは日々更新されているため、下記手順は最新でない場合があります。最新の情報は公式ドキュメントをご確認ください。
- AWSコンソールからCloudFrontにアクセスし、「ディストリビューションを作成」をクリック。
- 「オリジンドメイン」でHTTPS化したいドメインを選択(S3のバケットウェブサイトエンドポイントの値)。すると「名前」の欄も自動入力される。
- 「S3 バケットアクセス」は「Legacy access identities」を選択、「オリジンアクセスアイデンティティ」は「新しいOAIを作成」をクリック、「バケットポリシー」は「自動で更新」を選択。
- 「ビューワープロトコルポリシー」は「Redirect HTTP to HTTPS」がオススメ。HTTPでアクセスしてきたユーザーをHTTPSにリダイレクトしてくれる。
- 「キャッシュポリシー」は「CachingOptimized」を選択。
- 「料金クラス」は日本向けのサイトであれば、アジアを含む3つめの項目を選択(すべてにすると若干料金上がると思われ、、)。
「代替ドメイン名」に「ドメイン名(S3バケット名)」を入力、「カスタムSSL証明書」にACMで作成した証明書を選択。
- 「デフォルトルートオブジェクト」は「index.html」を入力。
- 以上、その他の項目はデフォルトのままで、「ディストリビューションを作成」をクリック。
- 下のバナーが表示されたらOK!
- ドメインへのインターネットトラフィックが、作成したCloudFrontディストリビューションにルーティングされるようにするために、Route53でレコードを追加する。
AWSコンソールでRoute53にアクセス。 - 「ホストゾーン」から対象のドメイン名をクリックし、「レコードを作成」を選択。
- 「ルーティングポリシー」で「シンプルルーティング」を選択し、「次へ」→「シンプルなレコードを定義」をクリック。
- 「レコード名」はサブドメイン名を入力(ルートドメインの時は空欄)、「レコードタイプ」は Aレコードを選択、「値/トラフィックのルーティング先」は「CloudFront ディストリビューションへのエイリアス」を選択、ディストリビューション名に「作成したCloudFrontディストリビューションのドメイン名」を選択する。
「シンプルなレコードを定義」をクリック。
- 「レコードを作成」をクリック。
- 下のバナーが表示されたらOK!
- 以上でHTTPSの設定は完了なので、ドメイン名でWEBサイトにアクセスしてちゃんと表示されたらOK!
上のバナーの通り、権威DNSサーバーに変更が伝達されるまで時間がかかるので、少し時間をおいてアクセスしてみてください。
- CloudFrontはCDNサービスなので、本ページで紹介した構成のWEBサイトは、CloudFrontにキャッシュされます。
- したがって、この構成のWEBサイトはサクサク動作し、アクセス集中にも強い、高可用なサイトとなります。
- 一方で、S3バケット内のファイルを更新した場合は、CloudFrontのキャッシュを削除する作業をしなければいけません。
- CloudFrontのキャッシュを削除する方法は、こちらのページで紹介しています。