【AWS利用】ドメイン変更時のリダイレクトの仕組み作成 - 新米エンジニアの失敗再発防止メモ

経緯

rebikunn.jp というドメインを取得しました。
それで一時、当ブログのURLを https://blog.rebikunn.jp/ にしてたのですが、
SEOの関係で色々と良くないことになったので、元々のURLにもどしたのです。
そしたらそれはそれで問題が起きました。
検索エンジンでは、blog.rebikunn.jp の方のドメインで出てきたりしちゃったんです。
なので、blog.rebikunn.jp にアクセスされた場合、maitakeramen.hatenablog.com にリダイレクトする仕組みを作りました。
勿論、ドメイン以降のパスやパラメータはそのまま引っ付ける形でリダイレクトします。
例えば、

https://blog.rebikunn.jp/entry/2019/01/23/191602

にアクセスされた場合、以下のURLにリダイレクトされます。上記URLで試してみてください。

https://maitakeramen.hatenablog.com/entry/2019/01/23/191602

当記事では、このような仕組みを作った方法を解説します。
ちなみに無料でできます。AWSは1年間無料のプランがあるので。
無料期間が終わっても年間数百円程度じゃないですかね？

概念図 (雑ですが)

AWS利用時のドメイン変更時のリダイレクトの仕組み

雑ですが、概念図です。
⑦のときにもDNSを経由しますが、そこはあまり重要じゃないので割愛しました。
他にも突っ込みどころがあるかもしれませんが、細かいところは気にしないでください＞＜

手順

まずは、AWSに登録し、EC2を利用します。
AWSにログインした状態で以下にアクセス
https://s3.console.aws.amazon.com/s3/home?region=ap-northeast-1

そしてパケットを作成します。
AWS利用時のドメイン変更時のリダイレクトの仕組み２

パケットを作成したら、アップロードボタンでindex.htmlを設置します。
AWS利用時のドメイン変更時のリダイレクトの仕組み３

index.htmlの中身

<script>
var redirect_url = "https://maitakeramen.hatenablog.com" + location.pathname + location.search;
if (document.referrer) {
        var referrer = "referrer=" + encodeURIComponent(document.referrer);
        redirect_url = redirect_url + (location.search ? '&' : '?') + referrer;
}
location.href = redirect_url;
</script>

当ブログにパス・パラメータをそのままにリダイレクトするだけのJavascriptです。

次は、CloudFrontの設定です。

この設定をすることで、上記のindex.htmlへHTTPアクセスできるようになります。
AWSにログインした状態で以下にアクセス
https://console.aws.amazon.com/cloudfront/home?region=ap-northeast-1#distributions:
Create Distributionボタンを押下して、Distributionを作成してください。
AWS利用時のドメイン変更時のリダイレクトの仕組み４

気を付けるべきところは、
Alternate Domain Names (CNAMEs) には、独自ドメイン(blog.rebikunn.jp )を設定、
Default Root Objectには、index.htmlを設定することです。

他は以下のページが参考になるかと思います。
qiita.com

Distributionを作成したら、さらに編集して、以下のようになるようにしてください。
AWS利用時のドメイン変更時のリダイレクトの仕組み５
設定の仕方は画面を開けば大体分かりますよね。分からなかったらコメントでお聞きください。
これをすることで、存在しないページにアクセスされてもindex.htmlを呼び出すようになります。