0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

AWS AmplifyのカスタムドメインをHTTPS対応で301リダイレクトする方法

0
Posted at

概要

AWS Amplifyでホスティングしている静的サイトのドメインを変更する際、旧ドメインから新ドメインへHTTPS対応の301リダイレクトを設定する手順をまとめます。

やりたいこと:

https://old-domain.com/* → https://new-domain.com/* (301リダイレクト)

※本記事は、Claudeを使用して作成しています。


なぜAmplifyのリダイレクトルールだけでは不十分なのか

Amplifyの「リライトとリダイレクト」機能でドメイン間のリダイレクトを設定しようとしても、旧ドメインが本番ブランチに紐付いている場合はコンテンツ配信が優先されてリダイレクトが機能しません。

ブランチの紐付けを外しても同様の問題が発生するケースがあります。

解決策:CloudFront + CloudFront Functions で専用リダイレクターを構築する。


構成

https://old-domain.com/<パス>
  → Route 53(Aエイリアスレコード)
  → CloudFront(リダイレクト専用ディストリビューション)
  → CloudFront Functions(301リダイレクト処理)
  → https://new-domain.com/<パス>

メリット:

  • HTTPS完全対応
  • パス構造を維持したまま301リダイレクト(SEO評価を引き継げる)
  • ACM証明書は無料
  • CloudFront + CloudFront Functionsのコストはほぼ無料レベル(月数円〜数十円)

前提条件

  • 旧ドメインのDNS管理がRoute 53であること
  • 新ドメインはすでに稼働していること

手順

ステップ1:ACM証明書の発行

⚠️ CloudFrontで使用する証明書はバージニア北部(us-east-1)リージョンで発行する必要があります。

  1. AWSコンソール右上のリージョンを 「米国東部(バージニア北部)us-east-1」 に切り替える
  2. ACM(AWS Certificate Manager)コンソールを開く
  3. 「証明書をリクエスト」をクリック
  4. 以下を設定してリクエスト:
    • ドメイン名:old-domain.com(リダイレクト元)
    • 検証方法:DNS検証
  5. Route 53に検証用CNAMEが自動追加され、数分で「発行済み」になる

ステップ2:CloudFront Functionsの作成

  1. CloudFrontコンソール → 左メニュー「Functions」→「関数を作成」
  2. 関数名を入力(例:redirect-old-to-new
  3. 以下のコードを貼り付ける:
function handler(event) {
  var request = event.request;
  var uri = request.uri;
  return {
    statusCode: 301,
    statusDescription: 'Moved Permanently',
    headers: {
      location: { value: 'https://new-domain.com' + uri }
    }
  };
}
  1. 「保存」→「発行」まで実施する

new-domain.com の部分は実際の新ドメインに書き換えてください。


ステップ3:CloudFrontディストリビューションの作成

  1. CloudFrontコンソール → 「ディストリビューションを作成」
  2. 以下を設定する:

基本設定

項目
Distribution name 任意(例:redirect-old-to-new
Route 53 managed domain old-domain.com を選択(自動でRoute 53レコードが追加される)

オリジン設定

項目
Origin type Other
Origin domain new-domain.com(実際にはFunctionsで処理するためダミー)

デフォルトキャッシュビヘイビア

項目
ビューワープロトコルポリシー Redirect HTTP to HTTPS
関数の関連付け(ビューワーリクエスト) CloudFront Functions → ステップ2で作成した関数

設定

項目
代替ドメイン名(CNAME) old-domain.com
カスタムSSL証明書 ステップ1で発行したACM証明書を選択
  1. 「ディストリビューションを作成」をクリック(デプロイ完了まで数分かかる)

ステップ4:Route 53レコードの設定

Route 53 managed domainでドメインを選択していた場合は自動でAレコードが追加されています。追加されていない場合は手動で設定します。

  1. Route 53コンソール → 該当ホストゾーンを開く
  2. 「レコードを作成」をクリック
  3. 以下を設定する:
項目
レコード名 old-domain.com(またはサブドメイン部分)
タイプ A
エイリアス オン
トラフィックのルーティング先 CloudFrontディストリビューション
ディストリビューション ステップ3で作成したもの

ステップ5:動作確認

curl -I https://old-domain.com/some/path

以下が返れば成功:

HTTP/2 301
location: https://new-domain.com/some/path

パス部分(/some/path)が維持されていることも確認してください。


コスト

サービス 料金
ACM証明書 無料
CloudFront 最初の1TB/月まで $0.0085/GB。リダイレクトのみなら月数円〜数十円レベル
CloudFront Functions 月100万リクエストまで無料
Route 53 既存ホストゾーンへの追加なら実質無料

まとめ

Amplifyのリダイレクトルールではドメイン間の301リダイレクトが正常に動作しないケースがあります。CloudFront + CloudFront Functionsを使うことで、HTTPS対応・パス維持・SEO引き継ぎを満たした301リダイレクトを低コストで実現できます。

同じAmplifyアプリでドメイン変更が発生した場合はこの構成が最もシンプルで確実な解決策です。

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?