S3とCloudFlareで独自ドメインの静的ホスティング対応

概要

S3とCloudFlareを使用した独自ドメインの静的ホスティング方法についてまとめました。

対応事項

0. アカウント作成

事前にAWSのアカウントと、CloudFlareのアカウントを作成しておきます。
詳細は各種サポートページをご確認ください。

1. [AWS] S3バケット作成

アカウントの発行が完了したら、AWSのS3バケットを作成します。
S3コンソールの「バケットを作成」からバケットを作成してください。

パブリックアクセスをすべてブロック を OFFにした状態でバケットを作成してください。
その他の設定はデフォルトのままでOKです。

2. [AWS] バケットポリシーの更新

パブリックアクセスをすべてブロック を OFF にしただけでは、バケットへのアクセスは許可されていません。
バケットポリシーを更新し、GETでのリソースアクセスを許可します。

※Action を "*"とすると、リソースの作成や削除が行えてしまうので注意！

設定したjson

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "AddPerm",
      "Effect": "Allow",
      "Principal": "*",
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::xxx.test.jp/*",
      "Condition": {
        "IpAddress": {
          "aws:SourceIp": [
            "0.0.0.0/1",
            "128.0.0.0/1"
          ]
        }
      }
    }
  ]
}

3. [AWS] 静的ウェブホスティングの有効化

[プロパティ]タブの[静的ウェブホスティング]からホスティングを有効化します。

静的ウェブホスティングを有効にすることで、バケットにアクセスするためのエンドポイントが払い出されます。
このエンドポイントに対して、特定のドメインでアクセスできるようにCloudFlareで設定しましょう。

設定後、適当なファイルをindex.htmlとしてバケット内に作成しておきます。

4. [CloudFlare] CNAMEレコードの作成

CloudFlareにログインし、CNAMEレコードを作成します。

• タイプ: CNAME
• 名前: （任意）
• ターゲット: 静的ウェブホスティングで払い出されたエンドポイント

保存後、設定したドメインでS3バケットへのアクセスが可能かご確認ください🙏
バケットTOPに配置したindex.htmlが表示されればOKです。

まとめ

以上です。
どなたかの役に立てたのであれば...