常連

reactで作成されたSPAをリソースをS3に配置してAWS CloudFront経由で配信しています。
SPAをS3で配信する場合、cloudFrontの設定で404エラー時のカスタムエラーレスポンスでindex.htmlをレスポンスコード200にて指定することが一般的かと思います
https://dev.classmethod.jp/articles/s3-cloudfront-spa-angular-403-access-denied/
（リンクは403エラーですが、権限が足りていれば404エラーになる為、404エラー時の設定を実施）
上記設定を行うと、SPAとして本当に404を返したい場合にレスポンスコード200で返ってしまいます

どうにか404でレスポンスを返したのですが、簡単に設定できる方法はありますでしょうか？
現状案としては以下です
a：別でもう一つCloudFrontを作成し、reactの404ページではそこに向けてリクエストをリダイレクトする。もう一つのcloudFrontではカスタムエラーレスポンスでerror用のhtmlとレスポンスコード404を指定する
b（実現可能か不明）：S3の設定でそのオブジェクトを返す時のデフォルトレスポンスコードの様なものが設定できればそこで404を設定し、reactからはそのオブジェクトURLへリダイレクトする

似たような事象にはまって解決したような記事でもあれば良いのですが、あまり見つからず。参考情報などいただけると幸いです

CloudFront + S3でSPAを配信するときに404エラーをきちんとステータスコード404で返したい

### 実現したいこと
Cloudfrontの仕組みを知りたいです

### 前提
こちらにAWSで利用されているIPアドレス一覧があります。
この一覧は公式情報です。
常に最新の情報が提供されています。
https://ip-ranges.amazonaws.com/ip-ranges.json

`service`に`CLOUDFRONT`が付いているIPアドレス範囲がCloudfrontで利用されているIPアドレス範囲です。
とても多くのIPアドレスがCloudfront用として利用されているようです。

### 質問
何故多くのIPアドレスが必要なのでしょうか？

### 調べたこと
IPアドレスを多く利用しない方法として[IP Anycast](https://jprs.jp/glossary/index.php?ID=0108)という方法があるようです。

BGP経路情報をもとに最適な経路で通信がされるので、経路的に最適なサーバーが自動で選択されてIPアドレスも多く必要ないのでいい事ばかりのような気がします。
（おそらく多くのIPアドレスを持つ事は維持コストもかかると思うので）

こちらのような方式を利用すればCloudfrontでも1つのIPアドレスだけで良いのではないでしょうか？
なぜCloudfrontは多くのIPアドレスが必要なのでしょうか？

また、IPアドレスは`region`が`GLOBAL`になっており、全世界でIPアドレスがバラバラに利用されているようです。
IPアドレス範囲AはAWS`東京`リージョンだけで利用されて、
IPアドレス範囲BはAWS`大阪`リージョンだけで利用されて、
・・・
という事ではないようです。

GLOBALで利用されてIPアドレスが世界中のサーバーに振り分けられている状況でどのように最適なサーバーが選択されているのでしょうか？
仮にIPリストからラウンドロビンのようにランダムなサーバーが選ばれている場合、Cloudfrontのメリットである「高速伝送」「低遅延」と言えるでしょうか？日本から閲覧する場合は日本サーバーが近いので日本サーバー（東京または大阪）が選択されるべきという気がします。海外サーバーが選択されてしまうと遅くなるはずです。

それを回避するために何らかの処理をCloudfront内部的に行っているとすると多くのIPアドレスが必要なCloudfrontの今の仕組みはIP Anycastと比べるととても複雑な仕組みになっているように思います。

また、多くのIPアドレスがあるということは多くのサーバーがあるということなのでCloudfrontのキャッシュヒット率も相当低くなるのではないでしょうか。
CloudfrontのIPアドレスは追加され続けているようです。今後もIPアドレスが追加され続けると更にキャッシュヒット率が低くなり続けると思います。
IP AnycastであればBGP情報をもとに常に最適なサーバーが自動で選択されるのでサーバーが増えたとしてもキャッシュ率は高いのではないでしょうか。
日本から閲覧する場合はAWS東京かAWS大阪が選択されるはずです。
現在のCloudfrontのようにアクセスするたびにランダムにIPアドレスが変化する事はないはずです。

※以下コマンドの結果は変化し続けます。
数秒単位では変化しませんが応答されるIPアドレスは変わり続けます。
```
$ dig a xxxxx.cloudfront.net

;; ANSWER SECTION:
xxxx.cloudfront.net. 60 IN    A       13.225.165.4
xxxx.cloudfront.net. 60 IN    A       13.225.165.29
xxxx.cloudfront.net. 60 IN    A       13.225.165.115
xxxx.cloudfront.net. 60 IN    A       13.225.165.52
```

仮に以下のような構成だとIPアドレスは少なくて良いですが（リージョンごとに1個で良いはず）
ロードバランサ自体がネットワーク帯域が多すぎて耐えられないのでダメという事でしょうか？
※インスタンス自体にはプライベートIPアドレスを付与して、グローバルIPアドレスは付与しない
![](https://ddjkaamml8q8x.cloudfront.net/questions/2023-02-21/281b0a13-2c1a-48e6-b17b-239fbd56903c.png)

# 参考
こちらの資料に目を通しましたがIPアドレスが多く必要な理由はわかりませんでした。
https://pages.awscloud.com/rs/112-TZM-766/images/AWS-29_AWS_Summit_Online_2020_NET02.pdf

Cloudfrontの仕組みを知りたい

### 実現したいこと

- [ ] This XML file does not appear to have any style information associated with it. The document tree is shown below.を解決させて、コンテンツを表示させる。

### 前提

会社の年間目標にAWSで検証環境を用意するというものをやっておりまして、そこで発生したエラーになります。

### 発生している問題・エラーメッセージ

```
This XML file does not appear to have any style information associated with it. The document tree is shown below.
```

### 該当のソースコード

```ここに言語名を入力
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>------------------</RequestId>
<HostId>-------------------------</HostId>
</Error>
```

### 試したこと
S3のバケット作成後、https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/GettingStarted.SimpleDistribution.html
を見ながら、CloudFrontのディストリビューションを作成。
This XML file does not appear to have any style information associated with it. The document tree is shown below.が発生したのでググり、以下のページにヒット。
https://qiita.com/LemonmanNo39/items/b1fe0ba4c00bf9e0d66b
https://stackoverflow.com/questions/71121544/xml-error-this-xml-file-does-not-appear-to-have-any-style-information-associate


### 補足情報（FW/ツールのバージョンなど）

[構成]
・CloudFront + S3

### 追記
・Access Deniedが発生しているので、コンテンツをAmazon S3にアップロードし、オブジェクトにアクセス許可を付与がちゃんとできていないかもしれません。


This XML file does not appear to have any style information associated with it. 

### 実現したいこと

CloudFront経由でEC2にアクセスし、Ec2にインストールしたApacheに設定している
index.htmlを表示する。

### 前提

カスタムオリジンとしてEC２を設定しています。

### 発生している問題・エラーメッセージ
ディストリビューションドメイン名を指定してアクセスすると以下のようなメッセージが出力され
Webページが表示されない。
```
ERROR
Failed to contact the origin.
```

### 該当のソースコード

「オリジン」
プロトコル：マッチビューワー
　ー最小オリジン SSL プロトコル：TLSv1.2
オリジンパス - オプション：/index.html

### 試したこと

・Route53による名前解決
・ApacheにSSL設定を追加

### 補足情報（FW/ツールのバージョンなど）
CloudFront経由でEC2にアクセスする際の設定を教えて頂きたいです。



CloudFront経由でEC2にアクセス

CloudFront+S3の環境でS3にhttpsでPOSTしたい。

CloudFrontでhttpsでS3のバケットにPostしたいです。
CloudFrontを使うのはACMで証明書を使いたいというのと、基本認証を入れたいという目的があります。
（基本認証はまだいれてないです）

外側からHttpsでファイルがアップロードする環境を作ってます。
なるべく簡単な仕組みでS3にアップロードし、保存できる仕組みを作りたいと考えております。
（長期保存して○○の分析をしたいとかではなく、あくまで簡潔にアップロードできて保存できればよい）

Cloudfrontの許可されたHTTPメソッドは以下のようにしています。
GET, HEAD, OPTIONS, PUT, POST, PATCH, DELETE


S3のバケットのアクセスポリシーは以下の通りです。
```ここに言語を入力
{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity HOGEHOGEHOGEHOGEHOGE"
            },
            "Action": "s3:*",
            "Resource": "arn:aws:s3:::hogehogehoge-test.fugafugafugafuga.com/*"
        }
    ]
}
```

PUTだとファイルをアップロードすることができるのですが、CloudFrontでPOSTを許可しているのにアップロードすると405が出てしまい、失敗します。
```ここに言語を入力

* upload completely sent off: 14 out of 14 bytes
< HTTP/1.1 405 Method Not Allowed
< Content-Type: application/xml
< Transfer-Encoding: chunked
< Connection: keep-alive
< Allow: HEAD, DELETE, GET, PUT
< Date: Wed, 06 Apr 2022 05:31:09 GMT
< Server: AmazonS3
< X-Cache: Error from cloudfront
< Via: 1.1 907f35c342230a570151549d009005d8.cloudfront.net (CloudFront)
< X-Amz-Cf-Pop: NRT12-C5
< X-Amz-Cf-Id: bura-bura-bura-hogehogehogehoge_fugafugafuga==
```

ググるとS3はPOSTできないような記事が見つかりますが、CloudFrontを使ってもPOSTできないでしょうか？
あまり複雑な仕組みにはしたくなくて、CloudFrontを使う形でなくても簡単にできる仕組みがあればそれでもいいと思ってます。

お知恵を拝借できますでしょうか。


CloudFront+S3の環境でS3にhttpsでPOSTしたい

https://qiita.com/shinon_uk/items/2171071b6f6795af726c
こちらのサイトを参考にaws amplifyで作成したwebページに対してcloud frontを設定し、WAFを設定しました。

amplifyにはuserとpasswordを設定し、cloud frontにはアメリカからのアクセス禁止ルールを適用しました。
### 想定
```
amplifyからのurlではuserとpasswordを聞かれる
cloudfrontのurlからのアクセスではuserとpasswordは聞かれず、アメリカからのアクセスのみ遮断する
```
### 結果
```
cloud frontのurlにアクセスした際もuserとpasswordを聞かれて、入力してもまたuserとpasswordを聞かれるループに入ります。
```
amplifyの環境変数で```_DISABLE_l2_CACHE=true```も設定しています。


情報も少なく、詰まっています。どなたか解決策をご存じでしたら教えてください。



aws cloud frontにアクセスするとループになる

### CloudFrontからs3のバケットへアクセスしたい

s3の静的ファイルをcloudfrontを使って表示させようとしてるのですが、うまくいきません。
詰まっている内容としてはcloudfrontへ複数originを設定していることが大きな要因だとは思うのですが、原因を特定するとことができませんでした。

### 発生している問題・エラーメッセージ

エラーメッセージ
```
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<Error>
<Code>AccessDenied</Code>
<Message>Access Denied</Message>
<RequestId>K4T15V3ASB9A75EM</RequestId>
<HostId>K43yz2wt2bfht3Jolrnw601ECoXgXC6nWwqDrQ2Kt9NubtluBD/hX72sxEFj4ZhNXsGgzbfpmUk=</HostId>
</Error>
```

### 設定
画像が添付できなかったのでgoogledriveへあげたのでこのリンクを見ていただけるとorigin,ビヘイビアに関する設定がご覧いただけます。
https://drive.google.com/drive/folders/1MbTPVjFbuZLMhJHxo3UdWKATY6qLaYxa?usp=sharing

apoigatewayは問題なく使えるのですが、そのほかのs3へのアクセスに関しては上記のエラーが出てしまい、うまくいけません。
また、s3のバケットポリシーは以下の通りです。
よろしくお願いします。
```
{
    "Version": "2008-10-17",
    "Id": "test",
    "Statement": [
        {
            "Sid": "1",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::****-notauth/*"
        }
    ]
}
```

cloudfrontからs3のバケットを表示させたい

wordpress用にEC2でインスタンスを作成し、ロードバランサーの設定をしました。
今後、cloudfrontを用いてアクセスを裁くためにcloudfrontのオリジンに
ロードバランサーを指定したいと考えています。

ロードバランサーのDNS名 XXXXXXXXXXXXX.ap-northeast-1.elb.amazonaws.com
をブラウザに入力したところ、404 not found になりました。nginxは表示されています。

![イメージ説明](049beac5dda4212a3b4dd059ee36c678.png)

またchromeの左上には「保護されていない通信」と表示されていました。
このような場合、ロードバランサーの設定が間違っているのでしょうか。
認証関係でしょうか。
どのような箇所の確認をすべきか教えていただければ幸いです。

Amazon CloudFront