はじめに

こんにちは、エンジニアのクロ(@kro96_xr)です。バックエンドを中心にフロントエンドやらインフラやら色々担当しています。
今回は弊社ティザーサイトのドメイン変更時にリダイレクト用のサーバが必要になり、Cloudfront+S3という構成で作成した話をしたいと思います。どちらかというと社内SEやコーポレートエンジニアの方向けっぽい内容ですかね。

背景

元々弊社ティザーサイトはhttps://metaverse.synamon.jp/という形でコーポレートサイトのサブドメインで運用していました。
しかし、メタバースブランディングプラットフォームとして「SYNMN」を公開するにあたり、https://synmn.biz/という新規ドメインを取得、運用することになりました。

prtimes.jp

その際に問題となったのが、旧サイトからのリダイレクトをどうするかという問題です。

ティザーサイト自体は外部のSaaSを使って構築されており、自社でサーバ管理をしているわけではありませんでした。そのため、弊社でリダイレクト用のサーバを用意することが必要でした。

方法を色々検討してみたものの、リダイレクトのためにEC2を建ててホスティングするのもなぁ…ということでS3の静的ホスティング+リダイレクト設定を使用することにしました。
また、S3の静的サイトホスティングではHTTPSに対応できないため、CloudfrontとACMも使用する必要がありました。

対応

使用したサービスは以下の通りです。

S3
ACM
CloudFront

DNS設定も必要ですが、コーポレートサイトドメインに関してはAWS外で設定しているため今回は除外します。
必要な場合はRoute53で設定すると良いのではないかと思います。

S3の設定ついて

Amazon S3では静的ウェブサイトをホスティングすることができます。 docs.aws.amazon.com

そしてこの静的ウェブサイトホスティング機能のオプションとしてリダイレクト機能があります。 docs.aws.amazon.com

公式リファレンスにもある通りS3では以下のようなリダイレクト設定ができます。

バケットのエンドポイントに対するリクエストを別ドメインにリダイレクトする
リダイレクトルール設定に基づきリダイレクトする
オブジェクトのリクエストをリダイレクトする

このあたりはClassmethodさんの記事が詳しいのでぜひ参考にしてみてください。 dev.classmethod.jp

今回は、ドメイン単位でのリダイレクトかつ複雑なルールも不要なので1つめの対応を行いました。

設定方法はバケットのプロパティから以下のように設定するだけです。

静的ウェブサイトホスティング：有効にする
ホスティングタイプ：オブジェクトのリクエストをリダイレクトする
ホスト名：リダイレクト先の新ドメイン
プロトコルオプション：HTTPS

設定するとバケットウェブサイトエンドポイントが表示されるのでこちらをCloudfrontで使用します。

ACMについて

Cloudfrontで使用するためAWS Certificate Manager(ACM)で旧ドメインの証明書を取得します。
Cloudfrontで使用する場合はバージニア北部(us-east1)で取得する必要がありますのでご注意ください。

Cloudfrontについて

Cloudfront経由でS3にアクセスするためディストリビューションを作成します。
設定内容は以下の通りです。書いていない部分は特に変更していません。

オリジンドメイン：S3で発行されたバケットウェブサイトエンドポイント
代替ドメイン名 (CNAME)：旧ドメイン
カスタムSSL証明書：ACMで発行された証明書

これでAWS側の設定は完了です。

DNSの設定について

最後にCloudfrontのエンドポイントをDNSに設定してやります。
Route53で管理している場合は、「Cloudfrontディストリビューションへのエイリアス」を選択すれば作成したディストリビューションが出てくるかと思います。
弊社の場合はAWS外のDNSを使用しているため、以下のようなDNSレコード設定をしています。