ABOUT ME

wentertainment logo @Eiju Web Designer/Engineer
本サイトに掲載しているコードや画像は全てフリー素材として公開しております。私用商用問わず、ご自由にお使いください。
なお、本サイト内で紹介している外部のライブラリ等につきましては、提供元のサイトにて使用許諾等をご確認ください。
その他

S3で静的ホスティングしたWEBサイトをHTTPS化する方法(AWS)

更新日:2022.12.3

S3で静的ホスティングしたWEBサイトのHTTPS化手順

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