【2024年 AWS】S3でSSL化した静的Webサイトを公開する

ブログ運営するために今回S3を使ったのでメモ。

S3バケット作成とファイルアップロード

まずバケット作成。

パブリックアクセスを許可。

バケットポリシーを設定。

バケットポリシー

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-name/*"
        }
    ]
}

プロパティタブから静的ホスティングを有効にする。

後はファイルをアップロード。
最低限index.htmlとerror.htmlが必要。
背的ホスティングを有効にした際に表示されるURLにアクセスするとサイトが表示される(静的Webサイトのホスティング作業が完了)。

CloudFront経由でS3にアクセス

CloudFrontでディストリビューションを作成。
以下のオプションで、OAIではなく機能強化されたOACを使います。

こちらの記事がとてもわかりやすく説明されていたので、以下の記事を参考に設定した。
https://dev.classmethod.jp/articles/amazon-cloudfront-origin-access-control/
「Webサイトのエンドポイントを選択」というボタンが出てきますが無視してS3バケットを選択。じゃないとOACの設定ができない。
OACの設定以外は特にいじらずデフォルトのまま。
https://(cloudfrontのURL)/index.htmlでWebサイトが表示されたらOK。
cloudfrontのみのアクセスにしたいので、S3はパブリックアクセスをブロックに戻しておく。

Route53でドメイン設定

Route53でドメイン取得は高いのでお名前.comでドメイン取得する。
ドメインが取得できたらホストゾーンを作成。

以下サイトを参考にお名前.comの方でネームサーバー設定。
https://dev.classmethod.jp/articles/route53-domain-onamae/

ACMでSSL証明書を発行し設定

以下サイトの「5. ACMでSSL証明書を発行する」を参考に設定した。
https://www.aws-room.com/entry/s3-ssl-hosting
ACMで証明書のリクエストの後に「Route53でレコード作成」で作成後、半日後にはステータスが成功になります。


上記のサイトを参考に作成した証明書をCloudFrontに設定する。


「ウィザードに切り替える」を押すと参考サイトと同様の画面になる。
CloudFrontでディストリビューションを作成したのにリソースが見つからないと出る。

CloudFrontの設定で代替ドメイン名に取得したドメイン名を追加すると表示されるようになる。

以下のオプションも設定しておかないと403エラーが出るので、ドメインに直でアクセスされた際に表示するhtmlファイル名を入れておく。

https://(独自ドメイン)でページが表示されたら、最後にS3ホスティング機能を無効にしておく。S3の静的ホスティングURLからもアクセスできてしまうので

参考サイト

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteHosting.html
https://zenn.dev/wakkunn/articles/66a6e8372611dc
https://dev.classmethod.jp/articles/amazon-cloudfront-origin-access-control/
https://www.aws-room.com/entry/s3-ssl-hosting
https://dev.classmethod.jp/articles/route53-domain-onamae/
https://mik2062.jp/s3-cloudfront/#index_id0