この記事でやること
- 静的ウェブサイトホスティングを使用せずにCloudFrontからS3上に配置した静的ページをを表示する方法について。
- ドメインの紐付けまではしない。
自己紹介
- 都内のDevOps系の企業でエンジニアをやっています。
- 主にAWSとTerraformを扱っております。
- フルリモートで勤務しております。
- 大阪在住、年齢は27歳、趣味は古着屋巡りと映画鑑賞です。
静的ページの準備
静的サイトについては以下ページのサンプルページを使いたいと思います。
https://code-step.com/portfolio1-menu/
S3バケットの作成
まずは以下設定で作成します。
ごく普通のバケットの作成です。
次に作成した静的コンテンツをS3バケット上にアップロードします。
アップロードが完了しました。
※現段階において静的コンテンツは公開されていません。
CloudFrontの設定
引き続きCloudFrontの設定をやっていきます。
[ディストリビューション]の作成を押下します。
OAIを作成してCloudFrontからファイルアクセスできるようにします。
ディストリビューション作成後、
S3のバケットポリシーを変更してCloudFrontディストリビューションからのアクセスを許可する必要があります。
CloudFront側でポリシーステートメントが用意されているのでそちらを使用していきます。
[ディストリビューション]→[オリジン]→[編集]
編集画面の[ポリシーをコピー]を押下してください。
バケットポリシーの更新
コピーしたポリシーステートメントをバケットポリシーに貼り付けてバケットポリシーを更新します。
以下がバケットポリシーです。
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipal",
"Effect": "Allow",
"Principal": {
"Service": "cloudfront.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::static-sample-2023-0628/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::AccountID:distribution/DistributionID"
}
}
}
]
}
CloudFrontからアクセス
ではCloudFrontのディストリビューションドメイン名からアクセスしてみましょう。
ドメイン名そのままアクセスしたらエラーがでました。
/index.htmlを付ける必要がありました。。
AWSではデフォルトルートパスを設定することが推奨されています。
[一般]→[編集]から
[デフォルトルートオブジェクト]に
index.htmlとします。
/index.htmlではないので要注意です。
設定できました。
再度ドメイン名から確認してみましょう。
ドメイン名だけでアクセスできることが確認できました。
以上がS3に格納した静的ファイルをCloudFront経由で閲覧する方法になります。