AWS S3でのhttps対応含む静的ウェブサイト公開

AWSのS3って単純にストレージとして利用している人も多いと思いますが、html/js/cssだけの静的なウェブサイトやホームページ、アプリなんかはs3でホスティングした方が、落ちることもないし、良いと思う。

S3での静的ウェブサイト公開

1. S3でバケットを作成
2. html/css/jsを配置する
3. バケットのプロパティ[静的ウェブサイトホスティング]で[ウェブサイトのホスティングを有効にする]を選択し、トップページにしたいhtmlとインデックスドキュメントに設定する
4. バケットのプロパティ[アクセス許可]で[バケットポリシーの編集]を押し、下記を入力

{
    "Version": "2008-10-17",
    "Statement": [
        {
            "Sid": "AddPerm",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::[バケット名]/*"
        }
    ]
}

上記でバケットのプロパティ[静的ウェブサイトホスティング]の[エンドポイント]に記載されているURLで配置したhtmlが公開される

上記だと公開されるURLが
http://[バケット名].s3-website-[region].amazonaws.com/~
みたいになる。
これをhttpsにしたい場合は、CloudFrontというAWSの別サービスを利用する必要がある。

https, 独自ドメインでのs3　静的ウェブサイト公開

1. S3でバケットを作成し、html/css/jsを配置する（この時、バケット名を公開したいドメイン名にしておく https://hogehoge.co.jp であれば、バケット名は hogehoge.co.jp )
2. CloudFrontでDistributionを作成
   1. [CreateDistribution]を押し、[Web]の方の[Get Started]を押す
   2. [Origin Settings]
      1. [Origin Domain Name]にカーソルを合わせると上記で作成したS3のバケットが選択肢に出てくるので選択
      2. [Origin Path]は付けたければ
      3. [Origin ID]は[Origin Domain Name]選択で自動付加
      4. [Restrict Bucket Access]を[yes]にする（S３のアドレスで直接アクセスを許さなくする）
      5. [Origin Access Identity]は[Create a New Identity]を選択
      6. [Comment]はわかりやすいもの（自動でもつく）
      7. [Grant Read Permissions on Bucket]は[yes]にする
      8. [Origin Custom Headers]は付けたければ
   3. [Default Cache Behavior Settings]
      1. アクセスをhttpsのみにしたければ[Viewer Protocol Policy]を設定
   4. [Distribution Settings]
      1. [Alternate Domain Names(CNAMEs)]にはs3のバケット名でもあるドメイン
      2. [SSL Certificate]は独自ドメインであればcustomの証明書を選択
      3. [Default Root Object]はs3のrootのhtmlを入力
      4. [log]は付けたければ
3. Route53
   1. [Create Record Set]を押す
   2. [Name]はバケット名に設定したドメイン名を入力
   3. [Type]は[CNAME-Canonical name]を選択
   4. [Value]は上記で作成したCloudFrontの[Domain Name]　(generalから確認可能)

上記でhttpsによる独自ドメインの静的ウェブサイトがs3で公開できるはずです。

何かご指摘、ご意見あればお願い致します。