AWS学習のはじめとして以下の内容で試験的に静的Webサイト公開をしてみました！
（すでに作成したサイトは閉じています。）
以下のWebページを参考に作成をしています。
Hosting a Static Website on AWS Using S3, CloudFront, and Route53, with Just 7 Steps：
https://dev.to/aws-builders/guide-to-hosting-a-static-website-on-aws-using-s3-cloudfront-and-route53-with-just-7-steps-220b
プロジェクト名
静的Webサイト公開
目的
静的webサイトの高速・セキュア配信構築
S3 + CloudFront + Route53 + Certificate Manager(ACM)
対象ユーザー
サービスの閲覧者（一般ユーザー）
Webサイトの管理者（ファイルアップロード担当）
全体構成概要
外部ネットワーク → Route53 → CloudFront(Certificate Manager) → S3
使用サービス一覧
Amazon S3 --------------
静的Webサイトホスティング（HTML/CSS/JS）の配置
https://aws.amazon.com/jp/s3/?did=ft_card&trk=ft_card
Amazon Route 53 --------------
独自ドメインでのアクセスおよびDNSルーティング
https://aws.amazon.com/jp/route53/?did=ap_card&trk=ap_card
Amazon CloudFront --------------
グローバルCDNキャッシュ・HTTPS対応・オリジン保護
https://aws.amazon.com/jp/cloudfront/?did=ap_card&trk=ap_card
AWS Certificate Manager --------------
SSL証明書の発行とCloudFrontへの紐づけ
https://aws.amazon.com/jp/certificate-manager/
ユースケース
ユーザーが独自ドメインを入力することで、CloudFront経由でS3上のコンテンツに
安全・高速にアクセスできる。
非機能要件
セキュリティ HTTPSによる通信の暗号化
可用性 CloudFrontによる冗長構成とCDN
コスト最適化 S3標準ストレージ + CloudFrontのキャッシュで転送料削減
想定トラフィック
低トラフィック（テスト環境）
成果物
ドメインでアクセスできるWebサイト
HLD / LLDドキュメント、構成図など
簡単な作成概要
1.S3ストレージの作成と静的Webサイトの設定 --------------
ここはコスト面を抑えるために、バージニア北部(us-east-1)を選択。
サイトの利用場所とリージョンの場所が遠すぎると通信の遅延が発生するが、
CloudFrontを導入することで、サイトのキャッシュが使えるようになり、
一度閲覧したサイトページでは、距離的な通信遅延が発生しにくくなる
2.CloudFrontとS3の紐づけ --------------
CloudFrontにて対象のS3を選択し、どのファイルをデフォルト表示にするかを設定。
設定後に表示されるディストリビューションドメイン名をシークレットモードに入力し、
設定したファイルのサイトページが閲覧できることを確認できればok
3.Route 53での独自ドメインの発行及びACMでの証明書発行 --------------
Route53での独自ドメインの発行（10分程度）
独自ドメインが発行された後、ACMにて独自ドメインの証明書も発行（1時間程度）
4.作成した独自ドメインとCloudFrontの紐づけ --------------
CloudFrontの設定項目に「Alternate domain name(CNAME)」の項目に、
Route53で発行した独自ドメインを入力し、CloudFrontと紐づける。
設定後、シークレットモードにて独自ドメインを入力し、
記載したファイルのサイトページが閲覧できることを確認する。
感想
初めての構築 想定通りに動かなかった点としては、以下の通りでした。
・S3バケット作成時に、デフォルトのindex.htmlの部分に用意したhtmlファイル名を入力するが、index.htmlのまま入力してしまった
・CloudFront作成時に、Default root object - optionalにhtmlファイルを入れることを忘れ、403エラーが発生した
・CloudFrontのディストリビューションドメイン名にて対象のhtmlファイルの閲覧が可能になっても、Route53との連携がうまくいかなかった
→結果としてはCloudFrontで独自ドメインを使用するためには、証明書が必須であることをネットより確認して、ACMを用いて証明書を発行
その後、再度設定を行うと問題なく実装ができた。
全体的な感想としては、特にコスト関連の検討が面白かったです。
CloudFrontのキャッシュ利用はコスト削減にも効果的。
アクセスの大半がCloudFrontから配信されるため、S3へのリクエスト回数が抑えられる。
※S3はデータの読み書きでも料金が発生するため
安価なリージョンのS3 + CloudFrontの構成で、高速かつ低コストな運用が可能になる。
今後は「どこまでCloudFrontで賄えるのか」に着目して、最適なアーキテクチャを模索していきたいです。
改善案
今回はS3→CloudFront→ACM→Route53の順で構築を進めましたが、
証明書の発行に時間がかかることを踏まえると、次回以降は先にRoute53とACMの設定を進めておき、証明書の発行待ち時間中に他の構成要素を並行して進める方が効率的だと感じました。
次回予告
LAMPアプリ構築準備中...