🐮

CloudFront+S3で静的Webサイトを公開する時の話

2022/02/05に公開

Webサーバ上で動いていた静的WebサイトをS3の静的Webサイトホスティングへ移行したい。更にCloudFrontも使いたい。。。でもあれ、静的Webサイトホスティングを有効にしなくてもCloudFront経由でWebサイト動きそうってなって。でも移行してみたらリンク押しても他のページに遷移しない(サイトの作りによる)などあって結局、静的Webサイトホスティング有効にしたら動くようになって。でも静的WebサイトホスティングのエンドポイントをCloudFrontオリジンに指定したらオリジンアクセスアイデンティティ(以下OAI)が使えなくなって。S3に直接アクセスさせず、CloudFront経由に絞りたいけど、S3のバケットポリシーでIP制限しようと思ったら、CloudFrontのエッジサーバのIPが動的に変わるし。。みたいな事になったので整理ついでにメモ。

結局、調べたいことはココに全部書いてあった。

CloudFront を使用して、Amazon S3 でホストされた静的ウェブサイトを公開するにはどうすればよいですか?

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serve-static-website/

REST API エンドポイントとウェブサイトエンドポイントって何?

1.REST API エンドポイント  ・・・バケット作成したら絶対あるS3エンドポイント
  <例> https://[S3バケット名].s3.[リージョン].amazonaws.com/
2.ウェブサイトエンドポイント ・・・静的Webサイトホスティングを有効にした場合に払い出されるエンドポイント
  <例> http://[S3バケット名].s3-website-[リージョン].amazonaws.com/ 
    ※ウェブサイトエンドポイントは「HTTP」

■Amazon Simple Storage Service エンドポイントとクォータ

https://docs.aws.amazon.com/ja_jp/general/latest/gr/s3.html

何が違うの?
ウェブサイトエンドポイントと REST API エンドポイントの主な違い

https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/userguide/WebsiteEndpoints.html#WebsiteRestEndpointDiff

私はこれを読んでも?ってなったので。
具体的には静的Webサイトホスティングにしないといけない理由にはこんなことがあるようで。

Amazon S3 + Amazon CloudFrontでWebサイトを構築する際にS3静的Webサイトホスティングを採用する理由

https://dev.classmethod.jp/articles/cloudfront-with-s3-hosting/

S3のRESTAPIエンドポイントをオリジン指定した場合は、OAIで制限できる。
でも、静的Webサイトホスティングのウェブサイトエンドポイントをオリジンに指定OAIは使えなくなる。この為、直接CloudFront以外からS3ウェブサイトエンドポイントへのアクセスをどうやって制限するかを考える必要がある。

思いついたのは、S3のバケットポリシーでCloudFrontのエッジサーバのIPアドレス制限。でも、IPアドレスは公開されているが、動的に変わる。。。。しかも制限できたとしても、他のアカウントでCloudFrontディストリビューションを作成して、静的WebサイトホスティングのS3指定されたら、アクセス可能だなと。

■CloudFront エッジサーバーの場所と IP アドレス範囲

https://docs.aws.amazon.com/ja_jp/AmazonCloudFront/latest/DeveloperGuide/LocationsOfEdgeServers.html

■CloudFront エッジサーバのIPアドレスの取り出し方

https://www.テクめも.com/entry/aws-ip-ranges

じゃあどうする?で、またここに戻る。

CloudFront を使用して、Amazon S3 でホストされた静的ウェブサイトを公開するにはどうすればよいですか?

https://aws.amazon.com/jp/premiumsupport/knowledge-center/cloudfront-serve-static-website/
⇒「アクセスが Referer ヘッダーで制限されたオリジンとして、ウェブサイトのエンドポイントを使用する」
オリジンのカスタムヘッダーにRefererで秘密の値を指定。S3のバケットポリシーでRefererに秘密の値が設定されている場合のみアクセスさせることでCloudFront経由に制限。
ただ、Refererに指定した値が漏れるとRefererヘッダーを書き換えればアクセスできてしまうので、やっぱ静的Webサイトホスティングじゃなく、OAIが使えるREST API エンドポイントにしたいところ。

でも、Rest APIエンドポイントにした場合、index.htmlに転送されないなどあるようで、そんな時はLambda@Edgeを使う必要があるそう。

■できた!S3 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法

https://dev.classmethod.jp/articles/directory-indexes-in-s3-origin-backed-cloudfront/

■S3とCloudFront関連のあれこれ

https://engineering.mobalab.net/2019/06/25/tips-on-s3-and-cloudfront/

伝えたい事

Webサーバ上で動いていた静的Webサイトを移行する時、Rest APIエンドポイントを使用する場合はWebサイトのコードをRestAPI用に修正する必要があること、それができなくてOAIを使わず、静的Webサイトホスティングを有効にして使うならS3へ直接アクセスを防ぐ考慮が必要ということを認識しておいてたほうが良さそう。

Discussion