こんにちは！
AWS初心者の ぶーちょ です！
今回は「次期 AWS Champions を目指すアドベントカレンダー」に参加させていただきます 🎄
自己紹介（AWSレベル感）
AWSの経験としては、
- Budgets / Cost Explorer を少々
- 社内ハンズオンイベントに少し参加した程度
というレベル感です。
普段はどちらかというと AWS利用料金の番人 的な立ち位置で、
部署全体のAWS利用料を 約8,000ドル削減 したことがあります
（この話はまた別の機会に…）
とはいえ、
インフラ構築の実務経験はほぼゼロ です。
「これはさすがにまずいぞ」と思い、
何かしらハンズオンをやろうとネタを探していたところ、先輩からこんなものを教えてもらいました。
30日でAWSをマスターするハンズオン問題集
30日でマスターする！？
コレだっ！！！
ということで、こちらのハンズオンに挑戦することにしました。
今回選んだ題材
本記事執筆時点でもいくつかハンズオンのネタが公開されていましたが、
今回はその中から
S3 と CloudFront を使った静的ホスティング
を選びました。
AWSの試験ではよく聞く構成ですが、
実際に自分で構築したことがなかった ため、ハンズオンとして取り組んでみました。
まずは基本の「キ」から。
本記事では、初心者目線で
- どこで詰まったか
- なぜそうなるのか
を中心にまとめていきます。
全体構成
そもそも「静的ホスティング」とは？
静的ホスティングとは、
- HTML
- CSS
- JavaScript
- 画像ファイル
など、あらかじめ用意したファイルをそのまま配信する Webサイトの公開方法です。
一方で、動的ホスティングはアクセスごとに処理が発生します。
例えば、
- ECサイト
- 会員制サービス
- ログイン判定が必要なサイト
などが該当します。
S3 と CloudFront をおさらい
S3（Amazon Simple Storage Service）
S3 は様々な種類のファイルを保存できるストレージサービスです。
つまり、
- HTML ファイルも保存できる
- HTML を保存した S3 バケットを 静的Webサイトとして公開 できる
というわけですね。
S3 単体でも静的ホスティングは可能ですが、
- セキュリティ
- アクセス制御
の面で課題があります。
CloudFront
そこで登場するのが CloudFront です。
CloudFront は CDN（コンテンツ配信サービス）で、
- 世界中にキャッシュして高速配信できる
- HTTPS を簡単に利用できる
というメリットがあります。
今回のゴール
今回は、
S3 に配置した静的ファイルを
CloudFront 経由で HTTPS で表示する
ことをゴールにします。
大まかな手順は以下の通りです。
- S3 バケットを作成して静的ファイルを配置
- CloudFront ディストリビューションを作成
- CloudFront 経由でアクセスできることを確認
① S3 バケットを作成して静的ファイルを配置
まずは S3 バケットを作成します。
ここで少し悩んだのが パブリックアクセス設定。
デフォルトでは
「パブリックアクセスをすべてブロック」にチェックが入っていますが、
今回は 簡易的なハンズオン ということでチェックを外しました。
※ 実運用ではしっかり制御が必要ですね
（ANS の知識が頭をよぎりました）
HTML ファイルをアップロードします。
無事アップロードできました。
② CloudFront ディストリビューションを作成
次に CloudFront の設定です。
……が、
CloudFront ディストリビューションって何？
となったので、ここで少し復習。
CloudFront ディストリビューションとは？
CloudFront ディストリビューションとは、
コンテンツ配信のルールをまとめた設定 のことです。
代表的な設定項目として、
オリジン：コンテンツの取得元
今回は S3 ですが、試験だと ALB が出てきたりしますね
ディストリビューション設定
先ほど作成した S3 バケットをオリジンに設定し、
あとは基本的にポチポチ進めていきました。
設定完了です。
③ CloudFront 経由でアクセス確認（ここで詰まる）
ここで最初の壁。
「どうやって CloudFront からアクセスするの？」
ハンズオンのヒントを見ると、以下の形式でアクセスするとのこと。
https://<ディストリビューションドメイン名>/<ファイル名>.html
なるほど、ドメイン名ってこうやって使うのか…。
よし！アクセスだ！！
……と思いきや。
なぜ！？
2つ目の壁：アクセスできない
「サーバーが見つかりません」とのこと。
ハンズオンの解説と見比べてみると、
CloudFront の WAF が有効 になっていました。
今回はハンズオンなので、WAF は無効にします。
アクセス成功！
無事アクセスできました 🎉
HTTPS でアクセスできていることも確認できました。
まとめ
今回は S3 + CloudFront を使った静的ホスティングを実装してみました。
手順自体はそこまで複雑ではありませんでしたが、
- CloudFront のアクセス方法が分からない
- ディストリビューションの概念がふわっとしていた
など、実務経験の無さを痛感 する結果となりました。
次は、
- WAF の設定
- アクセス制御
- セキュリティ周り
にも挑戦してみたいと思います。
ここまで読んでいただき、ありがとうございました！
参考文献
- 【30日でAWSをマスターするハンズオン問題集】Day5： S3 の基本的な用途と静的サイトウェブホスティングを構築しよう
https://qiita.com/satosato_kozakana/items/4a0ed414f1ad4c9c614f