0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-07-17

##【学習の目的】

話せるSEになるために

AWSサービスを実際に色々触って覚えていきたいと思います。
その一環として

  • AWS各サービスと類似サービスとの比較を通し、それぞれの長所・短所の理解
  • クラウドコンピューティングサービスについての知識強化
    などを図っていく予定です

##【準備作業】

##【S3 と CloudFront について】

S3(Simple Strage Service)

クラウド型オブジェクトストレージサービス

<機能>

  • ストレージ機能
  • ライフサイクルの設定
  • バージョニング
  • ログ記録
  • 静的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 と5倍近くの差があります。

CloudFront

高速CDNサービス
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 について

Web 構築の手順

Step1

Step2

Step3

静的サイト制作を通して学習できたこと

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?