AWSのS3とCloudFrontでHTMLファイルを公開する方法

AWSのS3とCloudFrontは、静的ウェブサイトの構築やグローバルな高速配信に最適なコンビネーションですよね。
S3は頑丈でセキュアなストレージを提供してくれるし、CloudFrontはそのコンテンツを超速のCDNで瞬時に届けてくれますし
この二人のパートナーシップを利用すれば、ウェブサイトの読み込み速度を速めて、訪問者に満足してもらえるチャンスがグッと増えますね。

HTMLファイルの公開方法
今回はAWSのサービスを使ってHTMLファイルを公開する方法について
AWSのS3に静的HTMLを入れて、それをCloudFrontで配信します。
（既に多くのサイトで公開されてるので自分自身のお勉強用です。。）

・S3とCloudFrontを使用して公開するメリット

メリットとしては
データ量の増加により自動的にスケールアップすることですよね。
あと、パッケージ管理のアップデート等が不要になって、不要なメンテナンス作業が減るから楽です。。

後、パフォーマンスもセキュリティも向上していいですよねん。。。

デメリットとしては
アクセスが急増するとS3だけだったら、コストパフォーマンスの部分だったり
CloudFrontを経由してSSL/TLS証明書を適用する必要する必要があったり
パス変更が複雑だったりしますよね。。

手順としては（管理コンソール使用する場合）

S3バケットの作成: AWSマネジメントコンソールでS3バケットを作ります。

HTMLファイルのアップロード: 作ったバケットにHTMLファイルをアップロードします。これで公開したいウェブページができます

バケットポリシーの設定: バケットに適切なポリシーを設定して、公開アクセスを許可します。

CloudFrontディストリビューションの作成: CloudFrontディストリビューションを作って、S3バケットをオリジンとして指定します。

CNAMEの設定: 独自ドメインを使う場合は、CloudFrontディストリビューションにCNAMEを設定します。

SSL証明書の適用: HTTPSを使う場合は、SSL証明書を適用してセキュリティを確保します。AWSから証明書取得し、バージニアリージョンで適用してます。

実際の使用感想
設定は楽です。削除するのも楽です。
ただ、エラーの特定ができない部分もあります。

アクセス許可の部分だったり、API実行の失敗（CORエラーだったり）
慣れてないと解決がすぐにはできない。

よくあるエラーと対処方法
でも、この組み合わせを使うときには、いくつかの一般的なエラーにぶつかることがあるんだ。例えば、CORSエラーや、CloudFrontのキャッシュによる古いコンテンツの配信などですね。これらのエラーに対処する方法は以下のようです。

CORSエラー: S3バケットのCORS設定をちゃんと行って、必要なHTTPヘッダーをレスポンスに含ませるようにします。

アクセス許可の問題: S3バケットポリシーとCloudFrontのOAI（オリジンアクセスアイデンティティ）を確認して、ちゃんとアクセス許可が設定されているか確認する必要があります。

AWSのS3とCloudFrontを使ってランディングページの更新とかには非常に容易だと思います。今更ですけどねｗ