アプリとサービスのすすめ

アプリやIT系のサービスを中心に書いていきます。たまに副業やビジネス関係の情報なども気ままにつづります

CloudFrontからS3にuploadしたコンテンツ(サイト)にアクセスする手順まとめ【AWS】

s3にuploadしたコンテンツ(html, css, javascriptで構成したwebUIのコード)にアクセスする手順をまとめた。

これで、S3バケット上のコンテンツを、シンプルにCloudFrontのみからアクセスできるように設定できる。

なので、node.jsとか余計なサーバを用意せずにAWSだけで簡単にサイトを表示できる。


主にこの図のWebUIの部分

f:id:trafalbad:20191209103101p:plain



表示するサイト

f:id:trafalbad:20191209103228j:plain



1.S3バケットの作成

s3バケットを作成、webUIコンテンツをuploadする。

バケット名は「webui-*****

でWebUIファイルをupload。




2. CloudFrontの設定

→ CloudFrontからのみ、アクセスできるようにする

コンソールからCloudFrontへいき、「Create Distribution」作成

Webリージョンの「Get Started」をクリック
「Origin Domain Name」にさっき作ったS3を指定。


「Restrict Bucket Access」を選択し、オリジンアクセスアイデンティティを使用する設定にするため 『yes』
下の2つもyes 。


f:id:trafalbad:20191209152426p:plain


他はデフォルトでCreate Distributionをクリック。






3.CloudFrontのキャシャを無効化

上の「Invalidations」から更新するファイルを追加する。

今回は一括で指定できる「/*」を追加。これでs3のファイルが更新されるたびにキャッシュが消えて、サイトが更新される。

f:id:trafalbad:20191221183106j:plain

またキャッシュスピードを速くするため、「Behavior」編集時にTTLを設定して、全部値を0にする。



f:id:trafalbad:20191220141638p:plain

参考サイト:Amazon CloudFrontのキャッシュ無効化(TTL設定)




4.CloudFrontでorigin access identifyの確認


Security から「origin access identify」でorigin access identifyの一覧が表示される。ここでorigin access identify IDを確認しておく

comment
access-identity-webui-********.s3.amazonaws.com

ID
E************

S3 canonical userid
71************




5. S3でバケットにorigin access identifyが付与されてるか確認

S3 アクセス権限からバケットポリシーを見ると指定したs3バケットにorigin access identifyが付与されている

バケットポリシーの中身


この3つの該当部分
arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E************”

Action": "s3:GetObject"

"Resource": "arn:aws:s3:::webui-*****/*"

{
    "Version": “2010-12-01“,
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity E************”
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::webui-*****/*"
        }
    ]
}


6.CloudFrontでBehaviorの作成

cloudfrontで「create behavior」をクリック。Path Patternで「/*.html」と入力し、「create behavior」を作成

f:id:trafalbad:20191209152354p:plain

CloudFrontのstatusが「In Progress」から「Deploy」に変わったらOK.




7.CloudFront経由でアクセスできるか確認

コンソールからCloudFrontをクリックし、アクセス用URLを確認


Domain Name    d24*******.cloudfront.net


ブラウザで 「d24*******.cloudfront.net/index.html」
を開く


s3にuploadしたサイトが表示された。

f:id:trafalbad:20191209103357j:plain





Node.jsとかでサーバを立ち上げなくてもAWSでサイトが簡単に表示できた。独自ドメインとかを取得するならRoute53や代替ドメインCDN設定とかが必要になる。

けどシンプルにs3のコンテンツをCloudFrontで表示するだけで、CloudFront以外からアクセスできないし、AWSだけで完結するのでサーバ代わりとしては十分すぎる



参考
CloudFront + S3-特定バケットに特定ディストリビューションのみからアクセスできるよう設定する

S3の特定バケットへのアクセスを特定のCloudFrontからのみ許可する