エックスサーバ（XServer）で保有しているドメインを利用してAmplifyのカスタムドメインを設定する

AWS

はじめに

おつかされまです。tyamonです。

この記事では、XServer（エックスサーバ）で管理しているドメインを、AWS Amplifyのカスタムドメインとして設定する方法を解説します。以下のような方を対象としています。

  • XServerでドメインを取得・管理している
  • AWS AmplifyでWebアプリをホスティングしている
  • AmplifyにカスタムドメインをあてたいがDNS設定の方法がわからない

結論（または成果物）

本記事の手順を実施することで、XServerで管理しているドメインをAmplifyアプリのカスタムドメインとして使用できるようになります。

前提条件・環境

  • XServerのサーバーパネルにアクセスできる
  • 対象ドメインのDNS管理がXServerで行われている
  • AWS AmplifyにWebアプリがデプロイ済みである
  • AWSコンソールにアクセスできる

AmplifyのカスタムドメインはデフォルトでAmazon Route 53との連携を想定しています。XServerのようなサードパーティのDNSを使う場合は、手動でDNSレコードを設定する必要があります。

AmplifyコンソールでカスタムドメインをAmplifyコンソールで設定する

カスタムドメインの追加画面を開く

  1. AWSコンソールにログインし、Amplifyのアプリを開きます。
  2. 左メニューの「ホスティング」から 「カスタムドメイン」 を選択します。
  3. 右上の 「ドメインを追加」 ボタンをクリックします。

ドメイン名を入力する

入力欄に使用したいサブドメイン名（例: tools.example.com）を入力し、ドメインを追加します。

この時点で「これはRoute 53ドメインではありません。」という警告が表示されます。XServerでDNSを管理している場合は正常な表示です。このまま進めます。

サブドメインの設定をする

サブドメインの設定画面では、どのブランチにどのURLをあてるかを設定します。（今回は変更していません）

URLブランチ備考
https://example.commainメインのURL
https://wwwmainhttps://example.com へリダイレクト

カスタムSSLの設定をする

SSL証明書は 「Amplify マネージド証明書」 を選択します。AWS Certificate Manager（ACM）が自動で証明書を発行・管理します。

設定を確認したら 「ドメインを追加」 をクリックします。

AmplifyからDNSレコード情報を確認する

ドメイン追加後、Amplifyコンソールのカスタムドメイン画面に戻ります。追加したドメインを開くと、XServerに設定すべきDNSレコードが表示されます。

以下の3つのCNAMEレコードが表示されます。

  • CNAME レコード（SSL証明書検証用）: ACMによるSSL証明書の発行に必要なレコード（ホスト名が _ で始まる）
  • CNAME レコード（サブドメイン向け）: サブドメイン（例: tools）をAmplifyへ向けるレコード
  • CNAME レコード（wwwサブドメイン向け）: wwwサブドメイン（例: www.tools）をAmplifyへ向けるレコード

この画面に表示されているレコード情報を次のステップでXServerに設定します。

XServerのサーバーパネルでDNSレコードを設定する

サーバーパネルにログインする

XServerのサーバーパネル（https://secure.xserver.ne.jp/xapanel/login/xs/server/）にログインします。

DNSレコード設定を開く

  1. 「ドメイン」カテゴリ内の 「DNSレコード設定」 をクリックします。
  2. 「＋DNSレコード設定を追加」をクリックします。

以下の3つのCNAMEレコードをそれぞれ追加します。「確認画面へ進む」→「設定する」の手順を3回繰り返してください。

CNAMEレコードを追加する（SSL証明書検証用）

Amplifyコンソールの「これらの値を含むCNAMEを追加」に表示されているレコードを登録します。

項目値
種別CNAME
ホスト名Amplifyコンソールに表示されているホスト名（_ で始まる文字列）
内容Amplifyコンソールに表示されているデータ/URL
TTL3600（デフォルト）

ホスト名にドメイン名が含まれている場合、XServerではドメイン部分を省略した形で入力します。例えば _abc123.tools.example.com であれば、ホスト名には _abc123.tools のみ入力します。

CNAMEレコードを追加する（サブドメイン向け）

Amplifyコンソールの「これらのレコードを設定して、サブドメインがAmplifyドメインをポイントするようにします。」に表示されている1つ目のレコードを登録します。

項目値
種別CNAME
ホスト名サブドメイン名（例: tools）
内容Amplifyコンソールに表示されているデータ/URL（CloudFrontのドメイン）
TTL3600（デフォルト）

CNAMEレコードを追加する（wwwサブドメイン向け）

同じくAmplifyコンソールに表示されている2つ目のレコードを登録します。

項目値
種別CNAME
ホスト名wwwサブドメイン名（例: www.tools）
内容Amplifyコンソールに表示されているデータ/URL（CloudFrontのドメイン）
TTL3600（デフォルト）

まとめ

今回はXServerで管理しているドメインをAmplifyのカスタムドメインとして設定する手順を紹介しました。ポイントは以下の通りです。

  • AmplifyはデフォルトでRoute 53連携を想定しているが、サードパーティDNSでも手動設定で対応できる
  • AmplifyコンソールからCNAMEレコード情報を取得し、XServerのDNSレコード設定に追加する
  • SSL証明書検証用のCNAMEレコードも忘れずに追加する

次のステップ

DNSレコードの反映には数分〜数時間かかる場合があります。Amplifyコンソールのカスタムドメインページでステータスが「利用可能」になれば設定完了です。反映されない場合は、TTLの時間が経過してから再度確認してみてください。

参考資料

コメント

タイトルとURLをコピーしました