はじめに
当日、記事を書いて、上げる。
そんな流れでやってます。
どーも、のぶこふです。
今回は、前回の続きで、S3を使って、ウェブサイトのホスティングをやってみようと思います。
この記事はGFAMアドベントカレンダー2021の7日目の記事です。
今回のサービス一覧
| Service名とか | 概要 |
|---|---|
| S3 | 拡張性と耐久性を兼ね備えたクラウドストレージ |
| CloudFront1 2 | グローバルなコンテンツ配信サービス |
| ※S3については、前回で解説したので省略。 |
CloudFront
- 高性能な分散配信 (世界187拠点の接続ポイント) ※2019年7月時点
- 高いパフォーマンス (高いパフォーマンスの実績)
- キャパシティアクセスからの解放 (予測不可能なスパイクアクセスへの対応)
- ビルトインのセキュリティ機能 (WAF 連携、DDoS 対策)
- 設定が容易で即時利用可能 (GUI からの設定で15 分程度でサービス利用可能)
- 充実したレポーティング (ログ、ダッシュボード、通知機能)
- 完全従量課金 (初期費用がなく安価、一時的な利用も可能)
CloudFront 用語
| 名前 | 読み方 | 概要 |
|---|---|---|
| Viewer | ビューワー | クライアント / Web ブラウザ |
| Distribution | ディストリビューション | コンテンツ配信の設定単位、CloudFront ドメイン名、代替ドメイン名毎に作成 |
| Origin | オリジン | コンテンツ提供元の Web サーバー毎に作成 |
| Behavior | ビヘイビア | キャッシュ動作設定、 URL パスパターン毎に作成 |
| ※ Origin, Behavior は⽤途毎に複数設定が可能 |
- オリジン
- カスタムオリジン: Amazon VPC やオンプレミスの Web サーバー
- S3 オリジン: 静的コンテンツを提供する S3 バケット
やってみる
参考
S3
-
バケットの作成
- 「パブリックアクセスをすべてブロック」は外して、すべて許可状態にしておく
-
「index.html」「error.html」をアップロードする
-
静的ウェブサイトホスティングを有効にする
- バケット ＞ プロパティ ＞ 一番下の「静的ウェブサイトホスティング」の「編集」
- バケット ＞ プロパティ ＞ 一番下の「静的ウェブサイトホスティング」の「編集」
-
バケットポリシーを変更する
- バケット ＞ アクセス許可 ＞ バケットポリシー 「編集」を選択
- 記述例は後述
-
静的ウェブサイトホスティング
- 静的ウェブサイトホスティング：有効にする
- ホスティングタイプ：静的ウェブサイトをホストする
- インデックスドキュメント：index.html
- エラードキュメント：error.html
-
バケットのエンドポイントをコピーする
- 先頭の「
http://」は除く
- 先頭の「
例：htmlファイル
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Index</title>
</head>
<body>
<h1>INDEX Page</h1>
</body>
</html>
error.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Error</title>
</head>
<body>
<h1>ERROR Page</h1>
</body>
</html>
例：バケットポリシー
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::nobkovskii-web/*"
}
]
}
CloudFront
-
「CloudFrontディストリビューションを作成」を選択する
-
情報を入力し、ディストリビューションを作成する
- オリジンドメインには、先程コピーした値を入力する
- ドロップダウンで候補が出てくるが、使用しないこと
- オリジンドメインには、先程コピーした値を入力する
-
「ディストリビューションの作成」を選択する
アクセスしてみる
- CloudFrontのドメイン名にアクセス
おわりに
今回は簡単にではありますが、S3とCloudFrontを使用して、静的ウェブサイトのホスティングを試してみました。
今回の例だと、バケット名が漏洩すると、S3へ直接アクセスが行われる可能性があるので、注意してください。
CloudFrontを使用するのであれば、S3のリージョンはわざわざ東京を指定する必要も無いですね。
今回はここまでです。
ありがとうございました。