【図解付き】Netlifyでサブドメインを使う方法【保存版】

  • URLをコピーしました!
目次

はじめに

非エンジニアのRyoです。今回はNetlifyでサブドメイン(eiken5.coommu.com)を使う方法を学びました。正直、最初は「親ドメインを違うアプリの公開用に使ってると怒られるって何?」「DNSが世界中に伝播って何それ?」って感じで、マジでわからんかったんですよね。

でも、実際にやってみると意外と簡単で、トラブル対処法も含めてすげー実用的なことがわかりました。同じように「サブドメインでアプリを公開したいけど、どうすればいいの?」って悩んでいる非エンジニアの方の参考になればと思います。

今回やったこと

・Reactアプリや静的サイトをNetlifyでホスト
・独自ドメインのサブドメイン(eiken5.coommu.com)で公開
・ConoHaでDNS設定を追加
・トラブル対処法も含めて完全マスター

準備:全体の流れを把握しよう

まずは全体の流れを理解しておきましょう。実は3つのステップだけで完了します:

  1. Netlifyにサブドメインを追加
  2. ConoHaのDNS設定にCNAMEを追加
  3. NetlifyでVerify(確認)

これだけです。マジでシンプルなんですよね。

STEP 1:Netlifyにサブドメインを追加する

1. Netlifyのプロジェクト設定に移動

Netlifyのプロジェクト設定に移動します。
Site settings → Domain management → Add custom domain の順番でクリックします。

2. サブドメインを入力

「eiken5.coommu.com」を入力して「Verify」をクリックします。

3. CNAME設定指示を確認

Netlifyから「CNAMEレコードをこの値に設定してください」と表示されます。

例:

eiken5 CNAME eikendensetsu5.netlify.app

※この値は自分のアプリごとに違うので、表示された値をメモしておきましょう。

STEP 2:ConoHaのDNS設定にCNAMEを追加

1. ConoHaのコントロールパネルにログイン

ConoHaのコントロールパネルにログインします。

2. DNS設定画面を開く

DNS → coommu.com のレコード一覧を表示します。

3. CNAMEレコードを追加

以下のように CNAMEレコードを追加します:

種別名前TTL
CNAMEeiken53600eikendensetsu5.netlify.app.

※最後のドット(.)を忘れずに付けてください!

4. 保存して反映を待つ

保存して反映を待ちます。通常は数分~数時間かかります。

補足:DNS伝播の確認方法

DNSが世界中に伝播しているかは dnschecker.org などで確認できます。正直、最初は「伝播って何?」って感じでしたが、要は「設定が世界中のサーバーに広がっているか」を確認する方法です。

STEP 3:NetlifyでVerify(確認)

1. DNS設定を検証

NetlifyのCustom Domains画面で「Verify DNS configuration」をクリックします。

2. 成功確認

成功すると eiken5.coommu.com が表示され、サイトの公開URLとして使用可能になります。

トラブル対処:ドメインが削除できない場合

もし「coommu.com」がNetlifyのPrimary domainになっていて削除できない場合があります。

エラー例

You cannot remove primary custom domain while domain aliases are present

解決手順

  1. 先にサブドメイン(eiken5.coommu.com)を削除
  2. coommu.com を Primary から .netlify.app に戻す
  3. その後、coommu.com 自体を削除

正直、最初はこのエラーが出て「マジかよ」って感じでしたが、この手順で解決できました。

成功後の状態例(ConoHa DNS設定)

以下のように CNAME が設定されていればOKです:

eiken5 CNAME eikendensetsu5.netlify.app.

よくある質問と注意点

Q. DNS伝播って何?

→ DNS設定が世界中のサーバーに広がることを「伝播」と言います。設定変更後、すぐには反映されない場合があります。

Q. TTLって何?

→ Time To Liveの略で、DNSレコードの有効期間を表します。3600秒(1時間)が一般的です。

Q. なぜ最後にドット(.)を付けるの?

→ 完全修飾ドメイン名(FQDN)を表すためです。これがないと正しく動作しない場合があります。

まとめ

正直、最初は「DNS設定って難しそう」って思ってましたが、実際にやってみると意外と簡単でした。NetlifyとConoHaの連携がすげー便利で、トラブル対処法も含めて実用的な知識が身につきました。

同じようにサブドメインでアプリを公開したい非エンジニアの方は、ぜひ試してみてください!


よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

調剤薬局で働く現役薬剤師です。
医療現場の非効率さに疑問を持ち、独学でプログラミングを習得しました。
今では、ReactやPythonを使って現場の業務を効率化するツールを自作しています。
このブログでは、医療や薬局業務に役立つIT活用術や、プログラミング初心者の方に向けた実践的な学習ノウハウを発信しています。

目次