Skip to content

S3 の静的 Web サイトホスティングで配信しているサイトを別サイトへリダイレクト

  • AWS
  • S3

📅 2021-02-20

⏱️ 5 min read

きっかけ

以前運用していた個人サイト yossiee.com というドメインから今はこちらのサイト ysmtegsr.com に移行した。それに伴い、前サイトへのアクセスがあった場合に現サイトへリダイレクトさせたいなと思ったのでやってみることにした。

前提

それぞれのインフラ構成は下記にようになっている。

  • 前サイト

    • S3 + CloudFront の構成で AWS 上にデプロイ。
    • お名前.com で取得したドメインを Route53 に登録。
  • 現サイト

    • Netlify 上にデプロイ。
    • 時が経てばこちらも AWS へ移行したいと思う。

URL 変更を伴うサイト移行について

前サイトへのアクセスをリダイレクトさせるにあたり SEO 効果を引き継ぎたいという願望があった(そこまでのアクセスのあるサイトではなかったがせっかく見てくれている人もいるので)。

リダイレクトはステータスコード 30X 台であることは理解してたが、一桁台までうろ覚えだったので調べてみた。

  • 301 Moved Permanently

リクエストされたリソースの URL が永遠に変更されたことを示します。レスポンスで新しい URL が与えられます。

ref. HTTP レスポンスステータスコード - HTTP | MDN

今回はサイト移行なので一時的ではなく永続的な変更。つまり上記に則ると 301 を返すようにすれば問題ない。

S3 の設定を変更

さて、やることが概ねつかめてきたので、実際に今のインフラの設定を変更していく。 調べてみるとすぐにソリューションが見つかった。

Route 53 を使用してドメインを別のドメインにリダイレクトする

どうやら S3 の静的ウェブサイトホスティングの機能の一つとして「別のホスト名にすべてのリクエストをリダイレクトする」という機能が備わっているようだ。

なので、実際にマネジメントコンソールにログインして S3 > yossiee.com > プロパティ > 静的ウェブサイトホスティング と画面を進んでいく。すると下記のように「ホスティングタイプ」という項目があるので、「オブジェクトのリクエストをリダイレクトする」というオプションを選択し、ホスト名に今回リダイレクト先である ysmtegsr.com を入力、最後にプロトコルを https にして保存。

screenshot-s3-redirect-setting

アクセスして確認してみる

cURL で zone apex にアクセスすると、 301 でリダイレクトできていることが確認できた。

➜ curl -I https://yossiee.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

ブラウザで yossiee.com の URL を開いてもちゃんとリダイレクトされているのでこれで問題なく動作してそう。

まとめ

既存のサイトを移行するだけであればめちゃくちゃ簡単にできてしまうと言う印象だった。

詳しくは、下記の DevelopersIO の記事を参考にして欲しいが、CloudFront の課金対象であるデータ転送量も節約できて且つ前サイト用の S3 バケットにはコンテンツをおく必要がないためバケット容量も削減できてコスパ最強らしい。

参考にさせていただいたサイト

Next →
  • © ysmtegsr 2019 - 2021