1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

S3をWebサーバーにしてコンテンツを公開する③(CloudFrontパブリック編)

Last updated at Posted at 2021-03-09

S3をWebサーバーにして静的コンテンツを公開する方法を紹介します。

  1. S3パブリック編
  2. S3署名付きURL編
  3. CloudFrontパブリック編 ←コレ!
  4. CloudFront署名付きURL編 
  5. CloudFront署名付きCookie編

手順

バケットの作成

まずはバケットを作成しましょう。

マネジメントコンソールでS3のページを開きます。
バケットを作成をクリックします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad).png

バケットの名前を入れて、リージョンを選択します。
バケット名は世界中のS3で一意である必要があります。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (1).png

「バケットのブロックパブリックアクセス設定」はデフォルトのすべてブロックで問題ありません。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-3(iPad).png

これでバケット作成は完了です。

HTMLの格納

作成したバケットを選択します。
そして、HTMLファイルをドラッグアンドドロップします。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (3).png

設定が色々ありますが、画面最下部のアップロードを実行します。

s3.console.aws.amazon.com_s3_home_region=ap-northeast-1(iPad) (4).png

複数ファイルやフォルダーまるごとアップロードすることも可能です。

CloudFrontの設定

まず、マネジメントコンソールでCloudFrontの画面を開きます。
そして、「Create Distoribution」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad).png

「Get Started」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (1).png

「Origin Domain Name」のところに、S3のバケット名を入れると、候補が表示されるので、「--- Amazon S3 Buckets ---」のセクション内にある、バケットを選択します。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (2).png

設定項目は、以下のように設定しました。

項目 設定内容 説明
Restrict Bucket Access Yes ユーザーが常にAmazonS3URLではなくCloudFrontURLを使用してAmazonS3コンテンツにアクセスすることを要求する場合は、[はい]をクリックします。これは、署名付きURLまたは署名付きCookieを使用してコンテンツへのアクセスを制限する場合に役立ちます。ヘルプで、「CloudFrontを介したプライベートコンテンツの提供」を参照してください。
Origin Access Identify Create a New Identity ユーザーが常にCloudFrontURLを使用してAmazonS3コンテンツにアクセスすることを要求するには、特別なCloudFrontユーザー(オリジンアクセスID)をオリジンに割り当てます。新しいオリジンアクセスIDを作成するか、既存のIDを再利用できます(一般的な使用例では、既存のIDを再利用することをお勧めします)。追加の構成が必要です。ヘルプで、「CloudFrontを介したプライベートコンテンツの提供」を参照してください。
Grant Read Permissions on Bucket Yes, Update Bucket Policy ディストリビューションの作成時にCloudFrontがオリジンアクセスIDに読み取りアクセス許可を自動的に付与して、CloudFrontがAmazon S3バケット内のオブジェクトにアクセスできるようにする場合は、[はい、マイバケットアクセス許可を更新します]をクリックします。どちらのオプションを選択する場合でも、バケットの権限を確認する必要があります。

設定したら画面最下部の「Create Distribution」をクリックします。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (3).png

5分ほど待つと、ステータスが「In Progress」から「Deployed」に変わります。
ディストリビューションの一覧から、作成したものを選ぶと、CloudFrontが発行したドメイン名がわかります。

console.aws.amazon.com_cloudfront_home_region=ap-northeast-3(iPad) (4).png

今回の例では、
http://d168j73yp42rht.cloudfront.net/index.html
にアクセスすると、S3に配置したコンテンツが確認できます。

CloudFront経由でS3にアクセスさせることで、HTTPS接続を強制させたり、独自ドメインを適用したりできるようになります。

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?