【AWS】CloudFrontを使ってS3の静的WebサイトをHTTPSで表示する

前の記事で、S3上にHTMLファイルをアップロードして静的なWebサイトを表示しました。ただ、このままだとHTTPS化されていないため、Chromeで表示すると「保護されていない通信」と表示されてしまいます。

セキュリティ上問題があるのでS3の静的WebサイトもHTTPS化したいですよね。ですが、S3 ウェブサイトエンドポイントは HTTPS をサポートしていません。HTTP化するために、AWS CloudFront を使用します。

CloudFrontとは

Amazon CloudFrontはAWSのCDNサービスです。CDN経由のトラフィックに応じて、Amazon CloudFrontの利用費が発生します。単価は$0.114/GBと安いので、仮に月に10GBの配信がある場合でも$1.1しかかかりません。

CloudFrontを使ってHTTPS化する

↓CloudFront コンソールにアクセスします。https://console.aws.amazon.com/cloudfront/

↓「オリジンドメイン」をクリックして、プルダウンから作成したS3バケットを選択します。「名前」も自動で入力されます。

↓「ビューワー」の「ビューワープロトコルポリシー」を「Redirect HTTP to HTTPS」にします。HTTPにアクセスすると、HTTPSにリダイレクトされる設定です。リダイレクトしないと、HTTPサイトにもアクセスできてしまうため、URLが分かれてしまいSEOが不利です。

他の項目はデフォルト値のままで、「ディストリビューションを作成」ボタンをクリックします。ディストリビューションがデプロイされるまで 20 分以上かかることがあるため、しばらく待ってからアクセスして、HTTPS化されていることを確認します。参考サイト:AWS CloudFront を使用して Amazon S3 バケット向けに HTTPS リクエストを提供するにはどうすればよいですか。

↓CloudFrontの設定が完了したら、CloudFront経由でアクセスしてみます。CloudFrontのコンソールで、「ディストリビューションドメイン名」をコピーし、https://ディストリビューションドメイン名/index.htmlとパスに変更してアクセスすると、HTTPSで表示されます。試しにhttpでアクセスしても、httpsにリダイレクトして表示されます。参考サイト:AWS CloudFront からコンテンツにアクセスする

今のままだとCloudFrontのランダムなURLのため、次の記事で独自ドメイン(オリジナルドメイン)でCloudFrontにアクセスできるようにします。

コメント

タイトルとURLをコピーしました