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

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

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