【実践編：第１回】S3 と CloudFront で静的 WEB サイトを構築

##【学習の目的】
### 話せるSEになるために

AWSサービスを実際に色々触って覚えていきたいと思います。
その一環として
- AWS各サービスと類似サービスとの比較を通し、それぞれの長所・短所の理解
- クラウドコンピューティングサービスについての知識強化
などを図っていく予定です

##【準備作業】
- AWS アカウントの作成
[（参照URL）AWS アカウント作成の流れ]("https://aws.amazon.com/jp/register-flow/")
※「ベーシックプラン」を使用

- 請求アラームの設定
[AWS の予想請求額をモニタリングする請求アラームの作成]("https://docs.aws.amazon.com/ja_jp/AmazonCloudWatch/latest/monitoring/monitor_estimated_charges_with_cloudwatch.html#creating_billing_alarm_with_wizard")
※Cloud Watch を使用（月額予算を超過するサービスの利用が生じた場合を想定）

##【S3 と CloudFront について】
### S3(Simple Strage Service)
[クラウド型オブジェクトストレージサービス]("https://aws.amazon.com/jp/s3/")

＜機能＞

- ストレージ機能
- ライフサイクルの設定
- バージョニング
- ログ記録
- 静的Webサイトホスティング （※今回使用する機能）
- イベント
- 暗号化

#### AWS のストレージサービス S3 と EBS の違い

- EC2インスタンスからの見え方

Amazon EBS はネットワーク接続型ではあるものの、EC2インスタンスへ直接接続(アタッチ)して使用するため、OSからはローカルディスクとして認識されます。一方、Amazon S3 ではEC2インスタンスにアタッチすることはできません。

- パフォーマンスの違い

上記のアタッチできる、できないの違いに関連して、EC2インスタンスへアタッチしてから使用する Amazon EBS は、ネットワーク通信を使用する Amazon S3 と比較して高パフォーマンスであると言われています。

- 容量制限の有無

Amazon EBS の容量は1GiB～16TiBとなります(OSごとに制限がある可能性もあるため、実際の最大容量はもっと少なくなる場合があります)。その為、大容量が必要な場合には複数のEBSを使用することになります(EC2インスタンスには複数アタッチ可能)。一方、Amazon S3 には容量の制限はありません。

- 料金の違い

汎用的なストレージ料金のみを比較した場合、Amazon EBS は月額 0.12USD/1GB であるのに対し、Amazon S3 は 0.025USD/1GB と５倍近くの差があります。

### CloudFront
[高速CDNサービス]("https://aws.amazon.com/jp/cloudfront/")
CDN : 負荷を肩代わりしてくれるレンタルサーバのようなもの （静的コンテンツ配信用）

- WEB 高速化
※海外配信の方が国内配信より威力発揮しやすい

- トラフィック分散
ロードバランサ―でのトラフィック分散は回線容量がボトルネックになりえる

- 高可用性（対障害性）への対応

##【Web 構築の手順】
###Step1 - S3 バケット単体でのオブジェクトへの HTTPS アクセス
1. S3 バケットを作成し、HTML オブジェクトを格納する
2. S3 バケットに格納した HTML オブジェクトに HTTPS 接続し、コンテンツに正常にアクセスできることを確認する

### Step2 – S3 バケットの前段に CloudFront を配置
1. CloudFront ディストリビューションをデプロイし、S3 バケットをオリジンとして登録
※CloudFront ディストリビューションからのアクセス制御は Origin Access Identity (OAI) を利用
2. "*https\://xxx.cloudfront.net/sample.html*" にアクセスした時にコンテンツが返却されることを確認
3. デフォルトルート "*https\://xxx.cloudfront.net*" にアクセスした時に "*https\://xxx.cloudfront.net/sample.html*" と同⼀のコンテンツが返却されるように設定を実施

### Step3 – 存在しないページをデフォルトルートオブジェクトにリダイレクト
1. 存在しないページにアクセスした際に 403 Forbidden が返却されることを確認
2. 403 Forbidden が発⽣した時に "*https\://xxx.cloudfront.net*" にリダイレクトするようにLambda@Edge を利⽤した設定を実施

##【静的サイト制作を通して学習できたこと】
- GitHub Pages や Netlify 等の他静的サイトホスティングサービスとの違い
- 動的サイトを制作するための AWS サービス

→ 次回課題：AWS EC2 Linux を使用して Web サーバーの構築


##【参考文献】
### S3 と CloudFront について
- [AWS のストレージサービス EBS と S3 の違い](https://www.acrovision.jp/service/aws/?p=1098)

### Web 構築の手順
#### Step1

- [よく聞くAmazon S3とは]("https://service.plan-b.co.jp/blog/creative/4981/")
- [Amazon S3 の概要について]("https://www.slideshare.net/AmazonWebServicesJapan/20190220-aws-black-belt-online-seminar-amazon-s3-glacier")
- [リソースベースのポリシーとユーザーポリシー]("https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/access-control-overview.html#access-policies-alternatives-intro")
- [匿名ユーザーへの読み取り専用アクセス許可(オブジェクトACL)](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/user-guide/set-object-permissions.html)
- [匿名ユーザーへの読み取り専用アクセス許可(バケットポリシー)](https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/example-bucket-policies.html#example-bucket-policies-use-case-2)

#### Step2

- [第１回 CDN の仕組み （CDNはどんな技術で何が出来るのか）](https://blog.redbox.ne.jp/what-is-cdn.html)
- [Amazon CloudFront の概要について](https://www.slideshare.net/AmazonWebServicesJapan/20190730-aws-black-belt-online-seminar-amazon-cloudfront)
- [オリジンアクセスアイデンティティ(OAI)](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html)
- [デフォルトルートオブジェクト](https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html)

#### Step3
- [Lambda@Edge の概要について]("https://www.slideshare.net/AmazonWebServicesJapan/20180221-aws-black-belt-online-seminar-aws-lambdaedge")
- [HTTP リダイレクトについて]("https://developer.mozilla.org/ja/docs/Web/HTTP/Redirections")
- [Lambda@Edge 関数の例 - HTTP リダイレクトの生成]("https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-examples.html#lambda-examples-http-redirect")
- [Lambda@Edge 用の IAM アクセス権限とロールの設定]("https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-permissions.html#lambda-edge-permissions-function-execution")
- [Lambda@Edge にトリガーを追加する]("https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/lambda-edge-how-it-works-tutorial.html#lambda-edge-how-it-works-tutorial-add-trigger")

### 静的サイト制作を通して学習できたこと
- [静的サイトを作る上でホスティングサービスの検討とNetlifyを使ってみた感想]("https://www.suzu6.net/posts/55-hosting-service/")
- [ホスティングサービスを比較してみた]("https://qiita.com/mei_9961/items/09b7d8ba7d54b020a081")