STUDIOの有料プランにアップグレードすると、独自ドメインを使用してホームページを公開することができます。
今回の記事では、「さくらのドメイン」で発行した独自ドメインを使用し、STUDIOで作成したページを公開する手順を紹介していきます。
【今回の記事でわかること】
✔️ STUDIOで独自ドメインを使用したホームページの公開手順
✔️ さくらのドメインでAレコードを設定する方法
✔️ 独自ドメインでの公開時の注意点
まず、前提条件として・・・
・STUDIOでのページ作成が完了していること。
・「さくらのドメイン」でのドメイン発行が完了していること。
上記2つが完了している状態からの手順を説明します。
今回の記事では「さくらのドメイン」を用いて説明していますが、他のドメイン管理サービスをご利用の方もぜひ参考にしてみてください。
今回参考にした記事は以下の記事です▼
STUDIO U – 独自ドメインでサイトを公開する
まずはSTUDIOを有料プランに変更する
STUDIOで作成したページを、独自ドメインで公開するためには、まずは有料プランに加入している必要があります。
有料プランへ登録すると、料金の支払いが発生するため、まずは決済方法の設定から行います。
決済方法の設定
ダッシュボード右上のアイコンマークをマウスオーバーすると、メニューが表示されます。
「設定」をクリックするとポップアップが表示されるので、「クレジットカード」をクリックします。
※STUDIOで現在対応している決済方法はクレジットカードのみです。（2022年4月現在）
決済方法に関する詳細はこちらをご覧ください。
「クレジットカードを登録」からクレジットカード情報を入力します。
有料プランの設定
クレジットカード情報を登録し、決済方法の設定が完了したら、次は有料プランの設定を行います。
独自ドメインで公開を行うプロジェクトのダッシュボードから、「プラン＆お支払い」をクリックします。
Starterプラン、CMSプラン、Businessプランの3つから、公開するプロジェクトに合うプランを選択します。
「アップグレード」ボタンをクリックするだけで、すぐに独自ドメインで公開できる状態になります。
有料プランへの変更が完了したら、さっそく独自ドメインでの公開設定を行います。
料金プランに関することは以下をご参考ください▼
STUDIO U – 料金プラン
STUDIO公式ページ – 料金プラン
あらかじめDNSレコード設定を行っておく
ホームページを独自ドメインで公開するためには、ドメインとホームページを公開するサーバーを紐づける作業が必要になります。
DNSレコードの設定を行うことで、発行した独自ドメインでのホームページ公開が可能になります。
STUDIOのAレコード：35.194.122.208 を、ドメインを発行した、ドメイン管理サービスのDNSレコード設定画面にて追加しておきます。
※レコードの設定内容が反映されるまでに、数時間かかることがあります。
ホームページの公開日時が決まっている場合は、なるべく前日までにレコードの設定を完了させておくことがおすすめです。
STUDIOのAレコードを追加
DNSレコード設定は、さくらサーバーの「ドメインコントロールパネル」より行います。
さくらインターネットのページから会員ログインし、契約情報＞契約中のドメイン一覧＞ドメインコントロールパネル から開くことができます。
「ドメインコントロールパネル」を開いたら、まずは「ゾーン」をクリック。
「ゾーン」をクリックすると「ゾーン情報」が表示されるので、右下の「編集」をクリックします。
「レコード設定」の一番下、「レコード追加」で以下のように各項目を埋めた後、「追加」をクリックします。
【入力する内容】
エントリ名： ＠
タイプ： IPアドレス（A） ←デフォルトはこれ
データ： 35.194.122.208 ←STUDIOのAレコード
DNSチェック： する ←デフォルトはこれ
他社サーバーからSTUDIOサーバーへ切り替える場合
他社サーバーからSTUDIOのサーバーに切り替える際、サーバー切り替え前に登録していたAレコードを削除する必要があります。
不要なAレコードは削除しておかないと、STUDIOで作成したページが反映されません。
事前に契約中のドメインの中から削除する必要があるAレコードを確認しておきましょう。
STUDIO側で「公開設定」
ダッシュボードから「公開設定」をクリックします。
公開パネルが表示されるので「独自ドメイン設定」をクリックします。
さくらインターネットで発行したドメインを入力し、「OK」をクリックします。
すると次のステップ「2.DNSレコード設定」に進みます。
公開パネルに、STUDIOのAレコード：A 35.194.122.208 が表示されます。
もし、この段階でDNSレコードの設定が終わっていない場合は、Aレコードをコピーし、さくらインターネットのドメインコントロール画面にてSTUDIOのAレコードを追加します。
さくらインターネット側でのDNSレコード設定が完了している場合は、「次へ」をクリックします。
TLS証明書の発行
「ご利用中のドメインサービスで〜」の画面で「次へ」をクリックすると、「TLS証明書を発行中」という画面になります。
ドメインに対してTLSの証明書を発行する画面です。
TLS証明書の発行には、時間がかかることがあるため、しばらく待機する必要があります。
TLS証明書の発行は自動で進むそうです。
このステップでは公開設定のパネルを閉じて待機しても大丈夫です。
なんらかの原因で証明書の取得に失敗した場合はリトライボタンが表示されるため、ボタンを「クリック」し、再取得を行います。
TLS証明書の発行が完了すると「接続を確認しました」というポップが出ます。
次の画面へ進むと、以下のような公開画面が表示されます↓
「公開」ボタンをクリックすると、設定した独自ドメインでホームページを公開することができます。
Freeプランだと強制的に表示されていた、画面左下のSTUDIOバナーを非表示にする設定もこの画面で行うことができます。
TLS証明書の発行中にエラー画面が表示された
筆者が独自ドメインでページ公開を行なった際、TLS証明書の発行中に以下のような画面が表示されました↓
ちなみに筆者の場合は以下のような状況下、STUDIOで独自ドメインを使用したページ公開となりました。
・すでにWordPressを使用し、さくらインターネットのサーバー（さくらサーバー）で同じドメインのページを公開中。
・ドメインもさくらインターネットのサービスを利用。
・今回はドメインは変えず、WordPressで作ったページからSTUDIOで作ったページへ切り替え。
・レンタルサーバーは、さくらサーバーからSTUDIOのサーバーへ切り替え。
・DNSレコードの設定はSTUDIOのページ公開当日に行なった。
今回、「この接続ではプライバシーが〜」の画面が表示されたのは、WordPressからSTUDIOのページへの切り替え中でした。
一晩放置していたら、無事にSTUDIOで作成したページが反映されていました。
