S3 の静的 Web サイトホスティングで配信しているサイトを別サイトへリダイレクト
はじめに
以前運用していた個人サイトを作り直しました。それに伴い、前サイトへのアクセスがあった場合に現サイトへリダイレクトさせたかったので、今回まとめてみました。
このようなサイト移行の要件は今後も割とあるんじゃないかなと思い、予習も兼ねてやってみようというのがちょっとしたモチベーションです。
前提となる構成と最終目標
それぞれのインフラ構成は下記にようになっています。
- 前サイト
- S3 + CloudFront の構成で AWS 上にデプロイ。
- お名前.com で取得したドメインを Amazon Route53 に登録。
- 現サイト
- Netlify 上にデプロイ。
- （気が向いたらこちらも AWS へ移行したいなと考えています。）
最終的には下記のようなことが実現できればと考えています。
構成図
S3 の設定を変更
さて、やることが概ねつかめてきたので、実際に今の設定を変更していきます。調べてみるとすぐに公式のソリューションが見つかりました。
どうやら S3 の静的ウェブサイトホスティングの機能の 1 つとして「別のホスト名にすべてのリクエストをリダイレクトする」という機能が備わっているようのでこれを使うみたいです。手順は下記です。
- マネジメントコンソールにログインして
S3><BUCKET NAME>>プロパティ>静的ウェブサイトホスティングと進む。 - 下記の画像ように「ホスティングタイプ」という項目があるので、「オブジェクトのリクエストをリダイレクトする」というオプションを選択。
- ホスト名にリダイレクト先のドメインを入力し、最後にプロトコルを https にして保存。
アクセスして確認
cURL で zone apex にアクセスすると、 301 でリダイレクトできていることが確認できました。HTTP/HTTPS の両方で確認しました。
# HTTP
$ curl -I http://xxxxx.com
HTTP/1.1 301 Moved Permanently
Content-Length: 0
Connection: keep-alive
Date: Sat, 15 May 2021 12:33:44 GMT
Location: https://ysmtegsr.com/index.html
Server: AmazonS3
X-Cache: Hit from cloudfront
Via: 1.1 d063c80c78a8368d53c4a98089af352b.cloudfront.net (CloudFront)
X-Amz-Cf-Pop: KIX56-C2
X-Amz-Cf-Id: VOcnO3Zgepsn0dkxjCQ0h_To8XFCOUeKak2fTrBlWjYlnbq16WGveQ==
Age: 5
# HTTPS
$ curl -I https://xxxxx.com
HTTP/2 301
content-length: 0
location: https://ysmtegsr.com/index.html
date: Sat, 20 Feb 2021 14:03:20 GMT
server: AmazonS3
x-cache: Hit from cloudfront
via: 1.1 6d1bfe5b3d4a6b51cc08e4ee91516591.cloudfront.net (CloudFront)
x-amz-cf-pop: NRT12-C5
x-amz-cf-id: _eX0ZKj4Xk_x0kSqOlP99cFc-Qb8zcjHhmAt2S4MJPFMV9DRsEVGWA==
age: 75
リダイレクト元の S3 バケットを断捨離
最後に、できればコストを削減のためリダイレクト元の S3 バケット内のオブジェクトを最小限にしておきます。前サイトのコードが Git 管理されていれば問題なく復元もできるため大丈夫だろうと判断しています。
まず適当にダミーのテキストファイルを作成します。なぜこんなに面倒くさいことするかというと下記を見かけたためです。
空のS3バケットは削除される可能性があるので、何かしらのファイルを保存することをおすすめします。
$ vim tmp/sample.txt
This is a sample file.
続いて AWS CLI を使って S3 バケットのオブジェクトの全削除とローカルからテキストファイルのアップロードをします。
$ aws s3 rm s3://<BUCKET NAME> --recursive
$ aws s3 cp ./tmp/sample.txt s3://<BUCKET NAME>/
最後に確認してみると、非常に軽量なバケットになったことがわかります。
$ aws s3 ls s3://<BUCKET NAME> --summarize --human-readable
2021-05-15 22:12:58 5 Bytes sample.txt
Total Objects: 1
Total Size: 5 Bytes
まとめ
既存のサイトを移行するだけであればめちゃくちゃ簡単にできてしまうと言う印象でした。
CloudFront の課金対象であるデータ転送量を節約でき、前サイトの S3 バケットにはコンテンツをほとんど置く必要がないためバケット容量も削減できてコスパ最強なだと感じました。詳しくは、下記の DevelopersIO の記事が非常にわかりやすく説明されていたのでぜひ参考にして下さい。
参考にさせていただいたサイト
Discussion