はじめに
こんにちは。はじめまして、katoです。
まだAWSに慣れていないので比較的簡単なものから理解を深めようと思い、S3とCloudFrontを使用して静的サイトを作成していきます。
Amazon S3は、HTMLや画像などのファイルを保存できるストレージサービスです。
Amazon CloudFrontは、S3などに置いたコンテンツを高速に配信するためのサービスです。
今回はS3に保存したファイルをCloudFront経由で表示できるようにしました。
S3の作成
バケット名を記入しバケットを作成します。
一般的な設定
| 項目 | 設定内容 |
|---|---|
| バケットタイプ | 汎用 |
| バケット名前空間 | グローバル名前空間 |
| バケット名 | xpower-s3-bucket |
バケットのブロックパブリックアクセス設定
パブリックアクセスがすべてをブロックにチェックマークが ついていることを確認しバケットを作成します。
作成が完了したら以下の画面が表示されます。
htmlの作成
バケットに置くhtmlの作成をします。 今回はhelloworld.htmlを作成し以下の内容を記述します。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8" /> <title>Hello World</title> </head> <body> <h1>helloworld</h1> </body> </html>
作成できたら、バケットにアップロードします。
アップロードできていることを確認します。
CloudFrontの作成
CloudFrontのディストリビューションを作成します。
今回は無料のプランで実施します。
ステップ2では名前の入力をしNext
ステップ3のOriginに先ほど作成したS3をBrowse S3から設定します。
他の設定はデフォルトのまま作成します。
デフォルトルートオブジェクトが未設定の場合、CloudFrontのURLにアクセスした際にAccessDeniedが表示されることになります。 一般の設定の編集から作成したhtmlファイルを設定します。
HTTPSで表示確認する
ディストリビューションドメイン名をコピーしてブラウザで開いて確認します。 また、https://ディストリビューションドメイン名になっていることを確認します。
まとめ
今回は、S3とCloudFrontを使用して静的サイトを作成し、httpsで表示を確認することができました。
S3のファイルを直接公開するのではなく、CloudFront経由で表示するという流れを理解できたのが良かったです。
CloudFrontの設定では、デフォルトルートオブジェクトにHTMLファイル名を指定する必要がある点で少しつまずきました。
