0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 オリジンへの直接アクセス制限と、インデックスドキュメント機能を共存させる方法

■S3とCloudFront関連のあれこれ

伝えたい事

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?