6. Systeme.ioに独自ドメインを設定する

目次

Systeme.ioに独自ドメインを設定する

初期ドメインで制作する方はスキップしてください。

ここでは、Systeme.ioに独自ドメインを設定する方法を解説します。
このパートは任意ですので、最初から独自ドメインで運用したい方だけご覧ください。

今回は、独自ドメインの中でもサブドメインを使う方法で進めていきます。
サブドメイン運用のほうが手順がやや複雑なため、こちらを押さえておけば応用しやすいためです。

サブドメインの設定手順

サブドメインの場合の設定手順です。

サブドメイン設定の流れは次のとおりです。

1.サブドメインをレンタルサーバーで作成する
2.サブドメインとSysteme.ioを統合する(CNAMEの変更)
3.SSL設定:有料SSLを使用する方法
4.CNAMEを変更してSSL化したらステータスが変化する
5.SSL証明書のコモンネーム設定
6.初期ドメインから独自ドメインに切り替える方法と注意点

サブドメインをレンタルサーバーで作成する

ここでは、サブドメインの作成手順を進めていきます。
私が利用しているのはエックスサーバーなので、エックスサーバーの画面で説明します。

まずは管理画面にログインして、「サーバー管理」に進んでください。
ご覧いただくタイミングによっては画面デザインが変わっている場合がありますが、基本的な流れは同じです。

次に、ドメイン関連メニューの中にある「サブドメイン設定」を開きます。
設定対象ドメインを先に指定してから進める方法もありますが、この手順のほうがわかりやすいと思います。

ここでは、すでに独自ドメインを取得し、エックスサーバーに紐付け済みであることを前提に進めます。
もし「ドメイン会社側とサーバー会社側の紐付け方法」がまだ不明な場合は、AIに確認するか、ドメイン・サーバー設定の学習教材で補完してから進めてください。

私の場合は、現在「kotokonakano.com」というドメインを運用しています。
今回はこのドメインにサブドメインを作成して、Systeme.ioに紐付けていきます。

対象ドメインを選択すると、すでに利用中のサブドメイン一覧が表示されます。
ここで新規作成するために、「サブドメイン設定追加」をクリックしてください。

すると、「kotokonakano.com」の前にどの文字列を追加するかを入力する画面になります。
ここには事前に決めておいた文字列を入力します。今回は例として「app」を使います。つまり、app.kotokonakano.com です。

必要であればメモ(例:Systeme.io用)も記入しておきましょう。
ドキュメントルートは、今回はデフォルトのままで進めます。

その後、「確認画面へ進む」をクリックすると、
「以下のサブドメイン設定を追加しますか?」という確認が表示されます。内容に問題がなければ追加します。
もし修正したい場合は、戻るボタンで戻って設定をやり直してください。

追加が完了したら一覧画面に戻り、サブドメインが表示されていることを確認します。
ただし、この時点では「反映待ち」と表示される場合があります。

サーバーへの反映が完了して利用可能になるまで、最大で1時間程度かかることがあります。
「反映待ち」の表示が消えてから、動作確認を行ってください。しばらく待ってから次の作業に進みましょう。

サブドメインとSysteme.ioを統合する(CNAMEの変更)

ここでは、Systeme.ioに独自ドメインを設定していきます。
現時点では、Systeme.ioで独自ドメインを設定する方法は大きく2つあります。

  • ルートドメイン(トップドメイン)をそのまま設定する方法
    例:kotokonakano.com
  • サブドメインを設定する方法
    例:app.kotokonakano.com

今回はサブドメインを統合する方法、つまり app.kotokonakano.com にアクセスしたときにSysteme.ioのページが表示されるようにする手順を進めます。

まず、Systeme.io側の設定です。
ダッシュボード右上の人型アイコンから「設定」に入り、左メニューの「カスタムドメイン」をクリックします。
初期状態では、初期ドメイン(例:nakanokoto.systeme.io)が表示されているはずです。

次に、右上の「ドメインを追加する」をクリックし、作成済みのサブドメインを入力して保存します。
「ドメインが正常に保存されました」という表示が出たあと、ドメインのDNS構成に関するポップアップが表示されます。

ここから、サーバー側でCNAMEを設定していきます。
CNAMEは、「このサブドメインにアクセスされたら、どこへ転送するか」を指定するための設定です。

注意点として、表示される値の末尾にドット(.)が付いている場合がありますが、コピー時にはこの末尾のドットを含めないようにしてください。

サーバーパネルでは、対象ドメインの「DNSレコード設定」から「DNSレコード追加」を開きます。
複数ドメインを管理している場合は、設定対象ドメインが正しいか必ず確認してください。

最初のCNAME設定では、次のように入力します。

  • ホスト名:サブドメイン名(例:app)
  • 種別:CNAME
  • 内容:Systeme.io側で指定されたCNAME値(末尾ドットなし)

このとき、「Aレコードが設定されているのでCNAMEが設定できません」と表示されることがあります。
これは同じホスト名にAレコードとCNAMEを同時設定できないためです。

サブドメイン作成時に自動でAレコードが入っているケースがあるため、
今回Systeme.ioへ向けるホスト名に既存Aレコードがある場合は、一度削除してからCNAMEを追加してください。
その後、改めて同じ内容でCNAMEを登録します。

続いて、Systeme.ioの案内に従って必要な2つ目のCNAMEも追加します。
ここでも、コピー時の末尾ドットや不要な記号が混ざらないように注意してください。

「ホスト名を正しく入力してください」というエラーが出た場合は、ホスト名の末尾に余分なドットが入っていないかを確認すると解決しやすいです。

2つのCNAMEが追加できたら、DNS設定一覧で反映内容を確認します。
もし案内ポップアップを閉じてしまっても、「説明を表示する」から同じ情報を再確認できます。

DNS変更はすぐには全世界に反映されないため、反映待ち時間が発生します。
進捗確認には DNS Checker が便利です。app.kotokonakano.com のCNAMEを検索し、結果を確認してください。

表示の見方は次のとおりです。

  • 緑:その地域では反映済み
  • 赤(バツ):まだ未反映

時間の経過とともに反映範囲が広がるため、必要に応じてブラウザの表示をリフレッシュしながら確認していきましょう。
以上で、サブドメインをSysteme.ioに統合するためのCNAME設定は完了です。

SSL設定:有料SSLを使用する方法

ここでは、エックスサーバーで有料SSLを使って安定運用する手順を見ていきます。
まず app.kotokonaka.com にアクセスしてみたところ、DNS反映途中だったこともあり、警告画面が表示されました。無料SSLが適用されているはずなのに警告が出る、という状況です。

実際、タイミングによってはリフレッシュ後に接続できることもありました。
ただ、私の運用環境では複数サブドメインを使っていて、school.kotokonaka.com では証明書失効が発生していました。

エックスサーバーの無料独自SSLは、環境によっては定期的な更新対応が必要になります。
さらに今回は、CNAMEでエックスサーバー外(Systeme.io側)へ向ける構成にしているため、更新タイミングの読みづらさもありました。
そのため、今回は有料SSLで解決する方針にしています。

エックスサーバーには有料SSLプランがあり、エックスサーバーSSL として月額880円から利用できます。手順としては、エックスサーバーアカウントから「追加申し込み」を選び、「SSL証明書追加申し込み」へ進みます。

証明書申込画面では、最も安価なクラウドSSL(例:880円)を選択し、契約期間を指定します。
「独自IPアドレス」については、基本的には不要なケースが多いです。

画面下部には重要な注意事項があり、
SSL証明書のツーウェイ利用に関して、Common Nameの扱い(WWWドメイン名の指定)について案内があります。
この部分は見落としやすいので、必ず確認してから進めてください。

利用規約・個人情報の取り扱いを確認してチェックを入れ、
「お申し込み内容の確認と支払いへ進む」に進みます。

ここで「どのドメインを指定するのか」が画面に出ない場合があります。
私もその点で確認しましたが、エックスサーバーマニュアル上は次の流れです。

  1. 先に支払いを完了する
  2. その後、取得申請に関する案内メールが届く
  3. メール案内に沿って、Common Name(適用ドメイン)を具体的に申請する

つまり、ドメイン指定は支払い後の工程で行う形です。

支払いはクレジットカードで進めます。
登録済みカードがあればそれを利用できます。
なお、支払い後の返金不可に関する注意は事前に確認しておいてください。

もう一点、申し込み前の重要事項があります。
独自SSL申請前に、独自ドメインのメールアドレスを作成しておく必要があります。
未作成の場合は、先にメールアドレスを用意してから申し込んでください。

私の場合は、クレジットカード認証時にワンタイムパスワードがスマートフォンへ送信されました。
そのコードを入力して決済を完了し、次の画面へ進みました。

CNAMEを変更したらステータスが変化する

app.kotokonagano.comという、サブドメインを入力したら、Systeme.ioの画面に飛ぶようになりました。 つまりCNAMEが反映されました。

じゃあこのとき、Systeme.ioの管理画面はどんな表示になるのか。 

最初は認証保留中となっていますね。 ブラウザをリフレッシュしたら変わるかを見てみると、「使用する準備が完了しています」に変わっています。まだ確定ではないんだけれど、一応つながったよというふうになると、このようにステータスが変わります。

SSL証明書のコモンネーム設定を行う

ここでは、SSL証明書の契約後に行うコモンネーム設定について進めていきます。
まず「取得申請」をクリックします。

すると、コモンネーム設定画面が表示されます。
「対象サーバID」は、エックスサーバー内のどのサーバを対象にするかを選ぶ項目です。私の場合は契約が1つなので、そのまま表示されているものを選択します。

次に、コモンネームの選択です。
ここには、エックスサーバーに登録しているドメイン一覧が表示され、各ドメインについて www あり・なしの両方が選べるようになっています。
今回は kotokonakano.com に対してSSL証明書を発行したいので、www 付きのほうを選びます。

続いて、CSR情報を入力します。
国名(Japan)に加えて、都道府県、市区町村、組織名、部署名などを入力します。
個人申し込みで部署名がない場合は、案内に従って入力してください。

入力後、画面下の注意事項も確認します。
コモンネームについては「www あり・なし両方でSSL接続を使いたい場合は www 付きで申し込む」という案内があるので、ここは必ず再確認しておきましょう。

なお、コモンネーム選択欄をスクロールするとサブドメインも表示されます。
この点は事前に確認したのですが、エックスサーバーでは、基本的にサブドメインごとに証明書を発行する運用になります。

いわゆるワイルドカード証明書(*. を使って複数サブドメインを包括する方式)については、
対象プランや条件が異なり、今回の構成ではそのまま一括適用できる形ではありませんでした。
そのため、作成済みのサブドメイン単位で設定していく必要があります。

同一ドメイン内の複数サブドメインを1枚でカバーできる上位プランもありますが、
費用は高め(目安として1万円以上)になるため、予算と運用方針に合わせて選ぶ形になります。

私の場合はすでに申し込みを進めていたため、今回はトップドメイン側を指定し、
Systeme.ioで使っているサブドメイン(app.kotokonakano.com)は、ひとまず無料独自SSLのままで運用する判断にしました。

ここまで設定したら、次の確認画面へ進みます。
確認画面では、プラン(ブランドクラウドSSL)、コモンネーム、対象サーバーID、CSR情報が表示されます。

認証方法は DNS認証 のままで問題ないので、「取得申請をする」をクリックしてください。

申請後は「お客様でのお手続きは完了です。弊社にてインストール作業を行います」という案内が表示され、完了後は登録メールアドレス宛に通知が届きます。

契約管理ページのトップへ戻ると、「SSL証明書 コモンネームなし」だった表示が、指定した www.kotokonakano.com に変わります。
ステータスは「申請中」となり、「申請状況確認」を開くと「SSL証明書をインストール中です」と表示されます。

つまり、Systeme.ioをサブドメインではなくルートドメイン(例:◯◯.com や ◯◯.net)で運用する場合は、この流れで有料SSL証明書を発行できます。

初期ドメインから独自ドメインに切り替える方法と注意点

ここでは、初期ドメインから独自ドメインへ切り替える方法と注意点を解説します。
私の場合は app.kotokonaka.com という独自ドメインを設定し、使用準備完了の状態になっています。

この状態で app.kotokonaka.com にアクセスすると、Systeme.ioには接続できているものの、404(ページが見つからない)と表示されることがあります。
これは、まだ初期ドメイン側(例:nakanokotoko.systeme.io)がデフォルトで稼働しているためです。

切り替え手順は次のとおりです。

  1. カスタムドメイン一覧で、現在緑のチェックが付いている稼働中ドメインを確認する
  2. 切り替えたい独自ドメインの三点リーダーを開く
  3. 「ドメインをデフォルトとしてマークする」をクリックする
  4. 確認ダイアログで「確認」をクリックする

これでデフォルトドメインの切り替え自体は完了します。
ただし、URL直下にページ設定がない場合は、切り替え後でも404表示のままになることがあります。

その場合は、実際に運用しているコンテンツ側で確認します。
たとえばコースを作成済みであれば、コース設定のドメインを初期ドメインから独自ドメインへ変更し、保存します。

その上でコースリンクを開くと、app.kotokonaka.com/school/course/… のように独自ドメインで表示されることを確認できます。

ログイン画面も同様に、独自ドメイン側のURLへ切り替わります。

言語設定によっては /english などが表示されることがありますが、日本語設定では jp/login の形になります。

このように、どのドメインを使うかは切り替えできますが、注意点があります。

初期ドメインでコースを多く作成済みの場合、各コース設定でドメインを個別に選び直す必要があります。

また、ドメインを変更するとURLが変わるため、すでに初期ドメインURLで受講生へ案内している場合は、案内の更新が必要です。受講者側の導線や認証情報の扱いにも影響が出るため、事前に周知しておくことをおすすめします。

そのため、独自ドメイン運用にする場合は、できるだけ初期段階で切り替えておくのが安全です。

以上で、初期ドメインから独自ドメインへの切り替え手順の説明は完了です。

ルートドメインの場合

ルートドメインの場合は、サブドメイン作成の部分を除いて、同じ手順で行なってください。