勉強前のイメージ
サーバなしにwebサーバを表示するもの
オリジンサーバとかナントカあった気がするけど忘れた
調査
cloudfrontとは
Amazon CloudFrontとは、データや動画などwebコンテンツを配信するCDN(コンテンツデリバリーネットワーク)です。
全世界にあるエッジロケーションのネットワークを通じてコンテンツの配信が行われます。
世界にあるので、エッジロケーションのレイテンシーは確保され配信に関する遅延は少ない状態にあります。
cloudfrontを作ってみよう
構成
ユーザはcloudfrontを経由して、s3の静的コンテンツを見ることができます。
s3にファイルを設置
- S3バケットを作成
s3にバケットを作成します
バケット名を適切に入力します。
ブロックパブリックアクセスのバケット設定はデフォルトのパブリックアクセスをすべてブロックにしておきます。
ほかの設定かもすべてデフォルトでバケットを作成します。
バケットが作成できました
- ソースコードをアップロード
この、test-cloudfront-webserver-202012バケットに、以下のソースコードをアップロードします
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>
アップロードされました
cloudfrontのディストリビューションの設定
- ディストリビューションを作成します
cloudfrontに移動しまして、Create Distribution でディストリビューションを作成します
- コンテンツの配信方法
今回はs3の静的ファイルを表示させるので、webで進めます。
下のRTMPは動画などに適しているらしいです
- ディストリビューションの設定
ディストリビューションの設定をします
はまらないように、Origin Domain Name だけきちんと記載します。
Origin Domain Name をクリックするといくつか選択肢が出てきます。
その中に、先ほど作成したs3のバケットも出てくるのでこちらをクリックします。
このままこれを適応してもよいのですが、CloudFrontのURLにアクセスしてもS3のURLにリダイレクトされる現象が起きたので(待てば解決するらしいです)、
デフォルトの選択肢では s3.amazonaws.com になるのですが、リージョン名を指定して書き換えることですぐにアクセスできるようになりました。
test-cloudfront-webserver-202012.s3.amazonaws.com
↓
test-cloudfront-webserver-202012.s3 -ap-northeast-1 .amazonaws.com
変更する箇所は
- Origin Domain Name (詳細は上記に記載)
- Restric Bucket Access : S3のURLではなくCloudFrontのURLを使用してコンテンツにアクセスさせる
- Origin Access Identity : 上記の際にオリジンアクセスIDをオリジンに割り当てます
- Comment (デフォルトで入る)
- Grant Read Permissions on Bucket : cloudfrontがアクセスするs3バケットに自動的にアクセス許可を付与します
これでディストリビューションを作成します。
Grant Read Permissions on Bucket を行うことで、
s3バケットのアクセス許可に以下のようなバケットポリシーが自動的に追加されます
- 作成完了
作ったばっかりでは status が In Progress となっていますが、 Deployed に変更されると準備が完了しました
アクセスを行う
- cloudfrontのドメイン名を確認
Domain Name に記載されてる xxxx.cloudfront.net がドメイン名です
この後ろに、s3バケットのファイル名、今回でいうと index.html を記載します。
- ブラウザでアクセス
無事、hello worldが表示されました。
勉強後のイメージ
思ったより大変だった
s3のURLにリダイレクトされるところがめちゃくちゃハマった。
でも、はじめてのcloudfront表示できてよかった！！！
次は自分のドメインにcname書いて表示できたらもっといいね