LoginSignup
1
0

More than 3 years have passed since last update.

[CloudFront, S3, ALB] “独自ドメインを使用した静的ウェブサイト”の拡張

Posted at

AWSを使った静的サイトの制作において、以下のケースを想定します。

  1. ルートドメイン(example.com)とサブドメイン(www.example.com)のどちらからアクセスがあっても、ルートドメインにリダイレクトし検索インデックスを統一させたい
  2. http,https を区別せずに目的のサイトに到達させたい
  3. 特定のパスのみ、別のバックエンドを参照したい

このとき、Amazon S3のウェブサイトホスティングを使う方法が、サーバーレスで組むのに最も良い方法であり、AWSの公式ドキュメントでも紹介があります。
例: 独自ドメインを使用して静的ウェブサイトをセットアップする

一見、直感的な構築方法ではないように思えたため、こちらを深掘りしていきたいと思います。

1. ドメインのリダイレクト設定

公式ドキュメントを要約すると S3バケットを2つ用意して、片方はリダイレクトのみを担当、もう片方にコンテンツを配置する という方法を紹介しています。

s3_redirection (2) (1).jpg

リダイレクト用のS3は空のバケット、つまりコンテンツを置く必要がないというのが珍しい使い方のようにみえるのですが、サーバーレスでの環境構築と考えるととても有用でした。

S3の各設定は以下です。

image.png

image.png

Route53上での、S3バケットへのaliasレコードの発行、S3のリダイレクトの挙動詳細については、こちらのqiitaがとても参考になりましたのでリンクしておきます。

Route53 で S3 バケットへ alias レコードを作った際のリダイレクトのふるまい

2. http, httpsのリダイレクト設定

ここからが拡張その1です。
S3のウェブサイトホスティングは、httpのみしかサポートしないため、https化するためにはそのフロントにリダイレクト役が必要になります。
ここでは、CloudFrontを使用したパターンを考えてみました。
s3_CF_redirection (1).jpg

ポイントは、CloudFrontの Viewer Porotocol Policy で、サブドメイン側のCFはHTTP and HTTPSを許容し、ルートドメイン側のCFでは Redirect HTTP to HTTPS により、リダイレクトをかけることです。

Screen Shot 2020-02-21 at 12.31.45.png

Screen Shot 2020-02-21 at 12.33.28.png

3. 特定のパスのみ、別のバックエンドを参照

仮に、/media/* のパスのみEC2のインスタンスを参照したいケースを考えます。
2の延長で、フロントのCFのパスパターン振り分けにより、特定パスのみALBを参照します。
s3_CF_ALB_redirection.jpg

Screen Shot 2020-02-21 at 16.30.37.png

といいつつ冗長な気もする...

サブドメインおよびプロトコルのリダイレクト処理をフロントに任せているため、ALBがいるにも関わらずS3,CFともに2つずつ必要なのがtoo muchな気もします。アクセスが増えれば増えるほど、リダイレクト時の転送量も大きくなります。

そこで、ALBにリダイレクト処理を一任する方法も考えてみました。

CF_ALB_redirection (1).jpg

こうすることにより、S3,CFを1つずつ減らすことができました。

1つ注意点は、ALBの振り分けバックエンドとしてS3のaliasを指定できない ことにより、新たに /lp/* の振り分けをCFで指定し、S3へと飛ばす必要がある点です。
S3のディレクトリ構成に多少変更が必要なのと、パスが変わってしまうことを許容できるのであれば、この方法のほうがよさそうです。

Screen Shot 2020-02-21 at 21.23.51.png
Screen Shot 2020-02-21 at 21.26.06.png

まとめ

ランディングページやオウンドメディア を1つのドメインで提供する際の、振り分け設定を考えてみました。
CloudFrontは1つ設定を変えるだけで浸透に数分~数十分かかるため、なかなかトライアンドエラーに時間がかかるため、図示してよく考えてから設定することをおすすめします。

1
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
1
0