第8章 公開の仕方/2 本目 / 全 5/約20分

独自ドメインをつける

こより

借りるのは1本でいい。前に付ける名前で分けられるよ。DNSは触る前に、いまの並びを写しておいて。

案内役 こより
この術でできるようになること

自分の名前のURLになる

なぜ要るか

前の術で公開しました。ただしURLは、置き場から割り当てられたものです。

これを自分の名前にします。使うのがドメインです。ドメインとは、URLの真ん中にある example.com の部分、つまりインターネット上の住所にあたる名前です。これを年額で借りて、自分の名前として使います。

効くのは3つです。

効く点 中身
覚えられる 人に口で伝えられる
信用される 「ちゃんと作っている」に見える
引っ越せる 置き場を変えてもURLが変わらない

3番目が本当の価値です。 割り当てられたURLで配ってしまうと、置き場を変えた日にリンクが全部死にます。

使う道具: なし(ドメインの取得だけ)

AIプロンプト

この術の作業をAIへ任せるときは、これをそのまま貼ってください。

いまあるDNSの行の一覧と、これから足せと案内された行を貼ります。
足してよい行と、既にある行と衝突する行を分けてください。
特にメールの受信・送信に関わる行は、どの行と衝突するかまで示してください。
(ここへ両方を貼る)

(ここへ両方を貼る)の部分は、書き写した記録と、案内された行の一覧に置き換えてください。

1つ買って、サブドメインで分けます

ここが最初の判断です。作品ごとにドメインを買わないでください。

僕は1つのドメインを、こう分けています。

ichinin.kenty.app    この講座のサイト
tcg.kenty.app        カードゲームのアプリ
ninlabo.kenty.app    別のゲーム

前に付く部分(サブドメイン)を変えるだけで、いくらでも増やせます。追加の費用はかかりません。買ったのは kenty.app の1本だけで、その前に好きな名前を足しているだけです。

作品ごとに買うと、毎年の更新も、設定も、全部が増えます。最初の1本は、サブドメインで足ります。

つける作業は3ステップです

やることは少ないです。

手順 中身
1 ドメインを取る
2 ドメインの管理を、公開先と同じところへ向ける
3 「このURLをここへ繋ぐ」と設定に書く

2番目は、ドメインの案内係を切り替える作業です。ドメインを買った業者の画面で「このドメインの案内は Cloudflare に任せる」と指定します。これをしないと、設定を書いても公開先へ繋がりません。

3番目は、8-1で見た設定に1行足すだけです。

"routes": [
  { "pattern": "ichinin.kenty.app", "custom_domain": true }
]

custom_domain: true が「このドメイン全部をここへ」の意味です。 書いたら、8-1と同じ npm run deploy を実行します。それで設定が公開先へ届き、繋がります。

サイトのDNSとメールのDNSは別物です

ここが一番事故ります。 僕も一度、危ないところまで行きました。

ドメインには「どこへ繋ぐか」を書く表(DNS)があります。この表は管理画面から見られて、1行ずつ足したり消したりできます。そして用途の違う行が同居しています。

行の種類 何のため
サイトの行 このURLをどのサーバーへ繋ぐか
メールの行 このドメイン宛のメールをどこへ届けるか
メール送信の証明の行 このドメインから送るメールが偽物でないことの証明

サイトの設定をしているつもりでメールの行を触ると、メールが届かなくなります。

僕の場合、この講座のメールを送るために、送信の証明の行を足す必要がありました。そのとき指示された内容にはこう入っていました。

足すもの:
  send.〜         送信用
  〜._domainkey   偽物でないことの証明

(案内には受信用の行も含まれていた)

この受信用の行を足してはいけませんでした。 すでに使っているメールの受信設定と衝突して、届いていたメールが止まります。

だから決めておきます。

決めごと 中身
既にある行は消さない・書き換えない 特にメールの行
足すのは、いま必要な行だけ 案内に載っていても、用途が違うものは足さない
触る前に、いまの状態を書き写す 戻せるようにする

3番目を必ずやってください。 具体的には、管理画面の表をそのまま画面の写真に撮るか、1行ずつテキストへ写します。DNSは元に戻すのに時間がかかるので、記録が無いと復旧できません。

書き写した記録は、そのまま検査にも使えます。行を足す前にAIへ見せてください。

いまあるDNSの行の一覧と、これから足せと案内された行を貼ります。
足してよい行と、既にある行と衝突する行を分けてください。
特にメールの受信・送信に関わる行は、どの行と衝突するかまで示してください。
(ここへ両方を貼る)

「案内に載っていたから全部足す」を、この一手で止められます。 僕の受信用の行の事故は、これで防げたはずのものでした。

なお、ドメインの管理業者によっては手作業になります。 僕のメール用のドメインは自動で触れないので、1行ずつ画面から足しました。この場合は特に、書き写しの記録が効きます。

反映は待ちます

書いてすぐには切り替わりません。世界中に広がるのを待ちます。

なぜ待つのか。「このドメインはここへ繋ぐ」という案内は、世界中の機械が控えを持って使い回しています。あなたが表を書き換えても、その控えが入れ替わるまでは古い案内が使われます。だから、書いた直後に開くと繋がらないのが普通です。

8-1の「公開直後は古いものが返る」と同じ話ですが、DNSはもっと長くかかります。 数分から数時間です。

だから確認はこうします。

やること 理由
数分待ってから開く すぐは繋がらない
スマホの回線でも開く 手元の記憶に騙されない
繋がらない時間があっても慌てない 待ちの途中かもしれない

待っている間に設定を何度も書き換えないでください。 どの変更が効いたのか分からなくなります。

やってみる

  1. ドメインを取る

    短くて、口で言えるものにしてください。自分の名前でも、作品の名前でも構いません。

  2. 管理を公開先へ向ける

    ドメインを取った業者の画面で、案内どおりに切り替えます。ここで既存の設定がある場合は、先に書き写してください。

  3. サブドメインを決める

    <作品名>.<自分のドメイン>
    

    迷ったら作品名です。あとで増やせるので、悩まないでください。

  4. 設定に1行足して公開する

    "routes": [
      { "pattern": "mitsunomato.example.com", "custom_domain": true }
    ]
    
    npm run deploy
    
  5. 数分待って開く

    繋がったら、スマホでも開いてください。

  6. 前のURLも生きているか確認する

    両方が生きている状態が普通です。人に配るのは新しい方だけにしてください。

  7. 保存する

    git add .
    git commit -m "独自ドメインをつけた"
    git push
    

つまずきどころ

httpsにならない(鍵マークが出ない)

証明書の準備が終わっていません。証明書とは、通信を暗号化するためにドメインごとに用意される電子的な証明のことで、これが付くとブラウザに鍵マークが出ます。ドメインを繋ぐと自動で用意されるので、待てば付きます。 数分から数十分かかることがあります。

www を付けると開けない/付けないと開けない

www あり・なしは別のURLとして扱われます。 両方を使いたいなら、両方を設定するか、片方からもう片方へ飛ばします。

設定したのに繋がらない

DNSの反映待ちか、書いた場所の間違いです。まず10分待ってください。 それでも駄目なら、書いた行と公開先の設定が一致しているか見ます。

メールが届かなくなった

メールの行を触っています。 書き写した記録から戻してください。記録が無い場合は、メールの提供元に正しい設定を確認します。

古いURLで配ってしまった

そのまま生かしておいて構いません。新しいURLへ飛ばす設定もできます。ただし飛ばす設定は、置き場によって書き方が違うので、必要になった時点で調べてください。

ドメインを何個も買いそうになる

サブドメインで足ります。1本目を育てる方が、名前としても強くなります。

Windows の場合

作業は全部ブラウザの管理画面と設定ファイルなので、差はありません。

次の一歩

新しいURLを、口で誰かに伝えてください。

打ち間違えられたら、そのURLは長すぎるか覚えにくいです。口で伝わるかが、良いドメインの判定基準です。

自分の名前のURLになりました。次は公開前の最終チェックで、初見の人が詰まらない状態を作ります!

術の一覧へ戻る

メルマガ(無料)忖度なしのAI事情を、メールでお届けします。ご登録の方に、プレゼントをお渡ししています