S3とCloudFrontで静的WEBホスティングを公開する手法
この記事の目的は？
AWSで静的WEBホスティング公開する手法は割とメジャーでナレッジは探せば多くの記事がヒットしますが
AWSは頻繁にUIを変更するので記事をトレースして構築することができず、もどかしい思いをした覚えがあります
令和３年、西暦だと2021年、AWSで静的WEBホスティング公開の手順を再入門という意味を兼ねて記事化します
シンプルな構成なので、IaC（Infrastructure as Code）化しやすく
一旦マネージメントコンソールで手動作成すれば、コード化の際にもイメージしやすいでしょう
この記事の構成
この記事は以下の順序で構成されています
-
S3に静的HTMLを配置
-
静的HTMLをCloudFrontで配信
-
静的HTMLがインターネットに公開されているか確認
終わりに
1. S3に静的HTMLを配置
まずはS3サービスにアクセスしてバケットを作成します
バケット名：任意
AWSリージョン：アジアパシフィック(東京) ap-northeast-1
**index.html（静的HTML）**をアップロードします
中身は適当にこんな感じにしてみましょう
Hello S3 hosting World!!
注意：この時点で静的HTMLはインターネットに公開されていません
2. 静的HTMLをCloudFrontで配信
静的HTMLはまだインターネットに公開されません
公開するためには色々やり方はありますが、今回はS3と CloudFrontを関連付けして公開するやり方を採用します
Q.なぜCloudFrontを採用したの？
A.Cloudfrontはコンテンツ配信サービスで世界中にエッジロケーションが存在するサービスであり、より低いレイテンシーで配信が可能になります ここで使い方を覚えておくと今後役立つ機会があるはずです
エンドユーザーにコンテンツをより低いレイテンシーで届けるため、Amazon CloudFront では、47 か国 90 以上の都市にある 275 以上の POP (Point Of Presence) (265 以上のエッジロケーションと 13 のリージョン別中間層キャッシュ) からなる、グローバルなネットワークを使用しています
CloudFrontにアクセスし、ディストリビューションを作成を選択して以下のように入力
Q.OAI（オリジンアクセスアイデンティティ）とは？
A.S3への直接アクセスを禁止し、Cloudfront経由でしかアクセスできないよう制限するための機能です
オリジンアクセスアイデンティティ (OAI) を使用して Amazon S3 コンテンツへのアクセスを制限する
最初に作ったバケット の アクセス許可を選択して下にスクロール
CloudFrontのディストリビューション作成メニューで はい、バケットポリシーを自動で更新します
を選択しているので、対象のバケットポリシーが自動で更新されました（便利！）
3. 静的HTMLがインターネットに公開されているか確認
ではCloudFrontに戻って ディストリビューション名をコピペしてアクセスしてみましょう
https://(ディストリビューションドメイン名)/index.html
TIPS:デフォルトルートオブジェクトに index.htmlと入れておくと、index.htmlを末尾に入れなくてもアクセスできるようになります
実際にブラウザからアクセスした結果はこちら
無事、CloudFront経由でS3に配置した静的HTMLへアクセス成功しました
※セキュリティ的な理由でCloudFront配信を特定のIPでのみアクセスできるよう限定公開したい場合は、以下の記事を参考にしてWAFv2を作成してみましょう
AWS WAF v2でCloudFrontのIPアドレス制限を作成する
終わりに
今回は静的WEBサイトのホスティング方法を、再入門という形式で改めて記事にいたしました
一昔前まではWEBを公開するためには結構な手間暇がかかりましたが
今ではポチポチ操作するだけで実装できるので、技術進歩の速さに驚愕します
次回はこの静的WEBサイトからAPI機能をコールする記事を作成したいと思います