Help us understand the problem. What is going on with this article?

【AWS】S3で独自ドメインでhttpsホスティング

はじめに

S3を使うと手軽に静的ウェブサイトホスティングすることができ、
Route53でCNAMEを指定すれば独自ドメインでホスティングすることができます。
ただhttps化することはできずChromeでは「保護されていない通信」扱いされてしまいます。
そこでCloudFrontを使ってS3で独自ドメインhttpsホスティングさせたときのメモです。

前提

独自ドメイン取得済みでACMなどの設定済

S3バケット作成

  1. 任意の名称でS3バケットを作成する

CloudFront Distributions 作成

  1. CloudFrontへアクセス
  2. 「Create Distributions」-Web:「Get Started」
  3. 下記設定項目入力

    cloudfront.png

  4. S3許可用のOrigin Access Identity追加
    origin.png

  5. Distributionsの「Origins and Origin Groups」よりOriginsを編集
    origin - コピー.png

S3バケットにCloudFrontからのみ許可設定

  1. バケット設定の「アクセス権限」-「バケットポリシー」に下記を設定しCloudFrontからのアクセスを許可する
    (バケット名とOrigin Access Identity IDは適宜)
{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity XXXXXXXXXXXXX"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<BUCKET_NAME>/*"
        }
    ]
}

Route 53へCNAMEを登録する

下記CloudFrontのDomain NameをRoute 53へCNAMEとして追加する

r53.png

補足

CloudFrontは高速化のためにコンテンツをキャッシュしているためS3のコンテンツを更新後
速やかに反映させたい場合はAmazon CloudFrontのキャッシュ削除(Invalidation)を実行する必要がある。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away