at backyard

Color my life with the chaos of trouble.

さくらのレンタルサーバで取得したサブドメインをNetlifyで使う方法

さくらで取得したサブドメインをNetlifyで使う

さくらのレンタルサーバで取得していたドメインから、サブドメインを作成し、そのサブドメインだけNetlifyで使うためにやったことを自身の備忘録として残す。
ネットワークの知識が自分にはないからだが、設定する中で躓いた箇所があったので、忘れる前に一気に書き残しておく。

参考にしたサイト

下記の記事を参考にさせてもらった。ありがたや。

fewlight.net

備忘録、の前に

ネットワークのことを理解しきれていない部分があるため、ここで書かれている内容には間違いが含まれている可能性があります(特に言葉の使い方とか)。
もしそのような箇所があった場合は、コメントでご指摘いただけますと幸いです。

さくらのレンタルサーバで取得したサブドメインをNetlify側で使うために、実際に自分がやったこと (備忘録)

上の記事だけでは分からなかった箇所が、今回の自分のケースではあったので忘れる前に一応、設定した時系列順に作業メモとして書き残しておく

1. さくらインターネットのサーバコントロールパネルドメイン/SSLから新しいドメインの追加 を選択し、サブドメインを取得する

ここのやり方については下記ドキュメントを参考にすればOK!

help.sakura.ad.jp

あとSSLの設定もしたりしたが、ここらへんはさくら側で簡単に設定できるような仕組みがあるため、わざわざここに書く必要はない。 Let's Encryptを用いて設定してくれる。

www.sakura.ne.jp

マジ便利だ!

ここの設定までで少し時間がかかるので、気長に待つ。たぶん1〜2日ぐらいで終わった記憶。

2. Netlifyにアプリをデプロイ

Netlify でサイト作成し、デプロイする。
その後、Domain SettingからCustom Domainの設定をする。
ここらへんは調べればいくらでも出る感じだし、上に貼った参照させてもらったポストにも書いてあるので割愛。

ドメイン設定時に、Check DNS configuration と出たので、Set up Netlify DNS 〜 をクリックして、Netlify側でDNSの設定を行った。
設定自体は簡単で、基本的に迷うことはない。

ネームサーバの情報などが表示されるかと思うので、メモっておく。
(その後、Domainメニューからも確認はできる)

注意!!

ここの設定をするとき、下に追記した、追記: NetlifyにDomain管理を移行したときに気をつけること も読んでおいたほうが良い。
サブドメイン無しのドメインもNetlify のドメイン設定でエイリアスの設定を行う必要がありそう。

3. さくらのレンタルサーバ側でドメイン設定を変更する

ネームサーバの変更を行う必要がある。
ここも基本的には先程のポストを参考に設定すれば問題なし。
ネームサーバの情報については 2. Netlifyにアプリをデプロイを参照

4. さくらのレンタルサーバ側のドメイン設定でCNAMEを追加する

会員メニュー > ドメイン > ゾーン表示のページで、新たに追加したサブドメインをエントリ名として追加し、タイプはCNAMEで、データにnetlifyのアドレスを指定する必要がある。
これも2. Netlifyにアプリをデプロイの項目で表示されているかと思う下記のような記述を参考にすれば迷わず設定できる

{設定しようとしているサブドメイン} CNAME {netlify側でのドメイン}.netlify.com.

# 設定しようとしているサブドメイン -> エントリ名
# {netlify側でのドメイン}.netlify.com -> データ(末尾の`.`は不要)

今回の場合、さくらのレンタルサーバ側で取得したサブドメインをNetlify側でしようとしているため、このCNAME追加処理は必須になる。
上で参照させてもらっているポストの場合はサブドメインではないと思うので、ここの設定は記載されていないが、サブドメインの場合、CNAMEの設定をしないと、サブドメインでアクセスした場合、さくらのレンタルサーバ側へのアクセスとNetlify側へのアクセスの2通りの道が生まれてしまう。
最初この設定を忘れていたせいで、サブドメインにアクセスすると、さくらのレンタルサーバ上で動いているサイトと、Netlify側にデプロイしたサイトがランダム(?)に表示されるような感じになってしまっていた。
CNAMEの設定を行うことで、このサブドメインでアクセスした場合は、Netlify側で動いているサイトにアクセスさせるようにできる。

備忘録は以上となる。

追記: NetlifyにDomain管理を移行したときに気をつけること

上のやり方でやったところ、サブドメインなしのページが表示されなくなってしまったので、表示するために行ったことをこちらに追記します。
たぶんサブドメインなしの方のページがエラーなく表示されていたのは、単にDNSが浸透しきっていなかったからかも。
素人同然の自分だからこそのミスだと思いますが、一応書いておきます。

NetlifyでDNSを設定した場合、こちらですべてのDNSレコードを管理する必要があるので、サブドメイン無しのものも、設定する必要があった。
これを忘れていたせいで、サブドメインなしにあったウェブサイトが繋がらなくなっていた。
ALIASで設定することですぐに反映されはじめた。