CloudFrontを使用してS3静的ウェブサイトを提供する手順

CloudFrontを使用してS3静的ウェブサイトを提供する手順

S3静的ウェブサイトを、CloudFrontを通じて提供したいと思います。今回はいくつかの前提の元、実施してみました。 DNS管理者、AWS管理者、コンテンツ管理者がそれぞれ別の部などでわかれ、AWSにて提供するウェブサイトは随時増えていく想定です。
Clock Icon2019.04.11

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、坂巻です。

S3静的ウェブサイトを、CloudFrontを通じて提供したいと思います。今回はいくつかの前提の元、実施してみました。

前提/構成

DNS管理者、AWS管理者、コンテンツ管理者がそれぞれ別の部等にわかれ、AWSにて提供するウェブサイトは随時増えていく想定です。イメージは以下となります。

0

  • DNS管理者
  • AWS外のネームサーバでDNSレコード設定等を行います。ドメイン、SSL証明書をAWS外で調達します。調達した証明書はAWS管理者に連携します。
  • AWS管理者
  • CloudFront、S3バケットなど、AWSの構築、管理を行います。
  • コンテンツ管理者
  • コンテンツを作成し、S3へアップロードします。他者のコンテンツにはアクセスできません。

本エントリは、上記、赤枠のAWS管理者を中心にした内容となります。

ここでは、ドメインはFreenomを利用し、SSL証明書はLet’s Encryptを利用しました。

目次

  • S3バケット作成
  • ACM証明書インポート
  • CloudFrontディストリビューション作成
  • IAMユーザ作成
  • 動作確認

S3バケット作成

前提に記載の通り、AWS管理者の作業となります。 ログ保存用のバケット(S3、CloudFront)と、コンテンツ格納用のバケットを作成します。

S3アクセスログ用バケット

S3アクセスログの格納用のバケットを作成します。任意のバケット名(ここではs3-accesslog-xxxxxxxxxxxx)を入力して、「次へ」をクリックします。

5

デフォルト設定のまま「次へ」をクリックします。

6

S3アクセスログの格納は、ログ配信グループと呼ばれる特別なログ配信アカウントを使用してアクセスログを書き込みますので、「システムのアクセス許可の管理」で「Amazon S3 ログ配信グループにこのバケットへの書き込みアクセス権限を付与する」を選択し「次へ」をクリックします。

7

設定値を確認し「バケットを作成」をクリックします。

8

S3アクセスログ用のバケットが作成できました。

9

CloudFrontアクセスログ用バケット

CloudFrontアクセスログ格納用のバケットを作成します。任意のバケット名(ここではcf-accesslog-xxxxxxxxxxxx)を入力して、「次へ」をクリックします。

16

デフォルト設定のまま「次へ」をクリックします。

6

デフォルト設定のまま「次へ」をクリックします。 12

設定値を確認し「バケットを作成」をクリックします。

38

CloudFrontアクセスログ用のバケットが作成できました。

39

コンテンツ用バケット

コンテンツ格納用のバケットを作成します。 任意のバケット名(ここではnochan.tk-xxxxxxxxxxxx)を入力して、「次へ」をクリックします。

10

「バージョンニング」と、「サーバアクセスログの記録」を有効化しました。(こちらの設定は任意です。)コンテンツ用バケットのアクセスログは、S3アクセスログ用のバケットに集約させます。ターゲットバケットには、S3アクセスログ用のバケット(ここではs3-accesslog-xxxxxxxxxxxx)を指定し、ログ記録のターゲットプレフィックスに任意の名称(ここではnochan.tk/)を設定します。

11

デフォルト設定のまま「次へ」をクリックします。 12

設定値を確認し「バケットを作成」をクリックします。

13

コンテンツ格納用のバケットが作成できました。

14

ACM証明書インポート

DNS管理者から連携された証明書をACMにインポートします。CloudFrontにSSL証明書を設定しますので、証明書をインポートするリージョンはバージニア北部となります。

コンソールよりCertificate Managerを起動して「証明書のインポート」をクリックします。 1

証明書の情報を入力し「レビューとインポート」をクリックします。

2

「インポート」をクリックします。

3

正常にインポートが行われました。現時点では「使用中?」の値は「いいえ」となっています。

4

なお、証明書情報の入力に誤があると、インポート時にエラーとなりインポートが失敗します。エラーが検出された際は、以下を確認してください。

CloudFrontディストリビューション作成

コンソールよりCloudFrontを起動し、ディストリビューションの作成にて、webディストリビューションの「Get Started」をクリックします。

15

独自ドメインを設定し、コンテンツ格納用バケット内のオブジェクトに、CloudFrontがアクセスできるようにします。HTTPリクエストはHTTPSにリダイレクトさせ、アクセスログを出力するように設定します。以下を指定し「Create Distribution」をクリックします。

  • Origin Domain Name … 先ほど作成したコンテンツ用のバケットを選択(ここではnochan.tk-xxxxxxxxxxxx
  • Restrict Bucket Access … Yes を選択
  • Origin Access Identity … Create a new identity を選択
  • Grant Read Permissions on Bucket … Yes, Update Bucket Policy を選択
  • Viewer Protocol Policy … Redirect HTTP to HTTPS
  • Alternate Domain Names … 利用する独自ドメインを入力
  • SSL Certificate … Custom SSL Certificateを選択し、ACMにインポートした証明書を選択
  • Default Root Object … 任意のオブジェクトを入力(Alternate Domain Namesリクエスト時に返すオブジェクト)
  • Logging … On を選択
  • Bucket for Logs … 先ほど作成したCloudFrontアクセスログ用のバケットを選択(ここではcf-accesslog-xxxxxxxxxxxx
  • Log Prefix … 任意のプレフィックを入力

21

「State」が「Enabled」になったことを確認して、Domain Name(ここではd1tq5pvyvycu5.cloudfront.net)を、DNS管理者に連携します。

40

ACMを確認すると「使用中」の値が「はい」となっていることが確認できます。

41

IAMユーザ作成

コンテンツ管理者用が利用するIAMユーザを作成します。

カスタマー管理ポリシー作成

IAMユーザに付与するポリシーを作成します。コンソールよりIAMを起動し「ポリシーの作成」をクリックします。

22

「JSON」をクリックします。

23

ポリシーは特定のバケット(ここではnochan.tk-xxxxxxxxxxxx)のみ、全アクションを許可し、バケットの作成、削除については制限します。 以下、ポリシーを設定し「ポリシーの確認」をクリックします。

24

ポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": "s3:*",
            "Resource": [
                "arn:aws:s3:::nochan.tk-xxxxxxxxxxxx",
                "arn:aws:s3:::nochan.tk-xxxxxxxxxxxx/*"
            ]
        },
        {
            "Effect": "Deny",
            "Action": [
                "s3:DeleteBucket",
                "s3:CreateBucket"
            ],
            "Resource": [
                "*"
            ]
        }
    ]
}

任意のポリシー名を設定し「ポリシーの作成」をクリックします。

25

ポリシーが作成されました。

26

IAMユーザ作成

「ユーザを追加」をクリックします。 27

任意のユーザ名を入力します。S3バケットへのコンテンツアップロードは、CLI等のツールを想定しているため、コンソールログイン権限は付与せず「プログラムによるアクセス」を選択し、「次のステップ:アクセス権限」をクリックします。

28

「既存のポリシーを直接アタッチ」をクリックします。

29

先程作成したポリシーを選択し「次のステップ:タグ」をクリックします。

30

「次のステップ:確認」をクリックします。

31

設定値を確認し「ユーザの作成」をクリックします。

32

ユーザが作成できました。適宜、認証情報をダウンロードしてください。

33

コンテンツアップロード

コンテンツ管理者の作業となります。ここではCloudBerry Explorerを利用して、S3への接続、アップロードを行います。セットアップ等については割愛していますので、初めて利用される方は以下を参考にしてください。

コンテンツを格納するバケット名(ここではnochan.tk-xxxxxxxxxxxx)を指定します。

35

アクセスができたことを確認し、コンテンツをアップロードします。

36

なお、他のバケットを指定しても、権限がないためバケットをリストする事はできません。

37

DNSレコード追加

DNS管理者の作業となりますので、割愛します。CloudFrontへのレコードを追加します。

動作確認

独自ドメインにアクセスすると、静的ウェブサイトの確認できました。

42

ログ確認

S3ログバケットを確認すると、指定したプレフィックでフォルダが作成されています。

43

フォルダ内にログが格納されています。出力されるログの内容については、以下を確認ください。

44

CloudFrontのログについても同様で、指定したプレフィックでフォルダが作成され、配下にログが格納されています。 45 46

出力されるログの内容については、以下を確認ください。

バージョンニング確認

バケットに指定したバージョンニングを確認してみたいと思います。現時点ではバージョンが1つのみです。

47

確認のため、コンテンツを更新しました。

48

独自ドメインにアクセスすると、コンテンツが更新されています。

50

コンテンツの更新が確認できない場合は、CloudFrontのキャッシュ削除を実施してください。

再度バージョンを確認すると、2つのバージョンが保管され、更新したオブジェクトに最新バージョンが設定されています。

49

最新バージョンを選択し、「アクション」 - 「削除」をクリックします。

51

「削除」をクリックします。

52

選択したバージョンが削除されました。

53

コンテンツも前バージョンの内容となっています。

54

さいごに

CloudFrontでのキャッシュ時間等はデフォルト設定としていますので、要件にあわせ調整してください。また、S3に出力する各種ログについては、ライフサイクル等は設定はしていないので、こちらも適宜設定してください。

参考

Share this article

facebook logohatena logotwitter logo

© Classmethod, Inc. All rights reserved.