初めに
皆さん、お疲れさマッチョです💪
今回は、Webアプリケーションの個人開発を進めている際に独自ドメインの設定について調べた内容を、備忘録として残すためにこのような記事を書かせていただきました。
概要
私は先日、自身が開発中のwebアプリケーションの独自ドメインを設定するにあたり、設定方法に関する技術記事等について検索をしていました。
しかし、調べているうちにふと思ったのです。
「《fly.io × お名前.com》 での独自ドメインの設定方法、意外と記事が少ない、のか...？」
と、言うことで備忘録も兼ねて今回、このような技術記事を作成しました。
前提として
まず、今回の説明は独自ドメイン化したいwebアプリは既にfly.ioへデプロイ済みの物として話を進めていきます。
もし、まだデプロイをされていない方は、先にfly.ioへデプロイをしてから本記事に戻っていただく事をオススメします🙇♂️
注意事項
- 独自ドメインの取得には費用が発生します。
- ドメインの取得にはクレジットカードが必要です。
利用するドメイン登録業者によっては、上記のように、独自ドメインの取得にあたり費用の発生・クレジットカードの登録が必須となりますので、ご注意下さい。
設定方法
では、ここから実際にドメインの取得と設定方法に関して説明をしていきたいと思います。
1. ドメインの取得
まず、独自ドメイン化を行うためのドメインを取得していきます。
ドメインの取得は、ドメイン登録業者からドメインを買う必要があります。
今回は、『お名前.com』 と言うドメイン登録業者を利用して、ドメインの取得を行っていきます。
まず、お名前.comにアクセスしていただき、TOP画面の入力フォームに自分が使用したいドメインを入力していきます。
ここでは、取得したいドメインがあるかどうかの確認を行います。
私は今回、tragori と言うドメインが取得可能か確認を行います。
上記のように取得したいドメイン名を入力して検索ボタンをクリックすると、下記のように取得可能なドメインが表示されるので好きなドメインを選択しましょう。
（ちなみに、記事作成時点では既に tragori.com はドメイン取得済みのため、下記のように .com の部分は埋まっている状態となっています。）
お好きなドメインを選択したら、右上の『お申込みへ進む』ボタンをクリックして申し込みを完了させて下さい。
注意点
ここで、クレジットカード情報の登録とお名前.comへの会員登録が必要となってきます。
登録が完了したら、利用ドメイン一覧を開きましょう。
下記のように先ほどのドメイン名が表示されていれば、ドメインの取得は完了です。
2. fly.ioのIPアドレス取得
では次に、fly.ioとドメイン名の関連付けを行っていきます。
fly.ioとドメイン名の関連付けを行うには、『DNSレコード』 と言うデータを設定する必要があります。
DNSレコードとは？
DNSレコードとは簡単に言うと、インターネット上で、ドメイン名と様々な情報を関連付けるためのデータの一種の事です。
DNSはインターネット上での 「電話帳」 のような役割があり、人間が覚えやすいドメイン名（例えば example.com）を、コンピュータが理解できる数値のIPアドレス（例えば 123.4.5.6）に変換する役割を果たします。
つまりこれから行う内容は、先ほど取得した tragori.com とfly.ioにデプロイ済みのwebアプリケーション、そのIPアドレスを連携させると言う事になります。
まず、ターミナルを開きデプロイ済みのアプリケーションのディレクトリに移動して、 flyctl ips list -a custom-quartz を実行します。
（custom-quartz 部分は、fly.ioに登録しているアプリ名を入力して下さい。）
$ flyctl ips list -a custom-quartz
VERSION IP TYPE REGION CREATED AT
v6 xxxx:xxxx:x::xx:xxxx public (dedicated) global Dec 8 2023 02:42
v4 xx.xxx.xxx.xxx public (shared) Jan 1 0001 00:00
すると、《v4・v6》の2種類のIPアドレスが取得出来ると思いますので、そのIPアドレスを覚えておきましょう。
3. DNSレコードの設定
次に、お名前.comのドメイン一覧画面へ戻り、先ほど取得したドメイン名をクリックしてドメイン詳細画面へアクセスして下さい。
すると、下記の『DNSレコード』欄があると思いますので、設定ボタンをクリックして設定画面へアクセスしましょう。
設定画面を進むと、下記の『DNSレコード設定を利用する』と言う箇所がありますので、『設定する』ボタンをクリックしてDNSレコードの設定を行っていきます。
画面へアクセスすると、下記のようにDNSレコードの入力欄がありますので、先ほど取得したIPアドレスを入力していきましょう。（例では、0を入力しています。）
注意点
ちなみに、入力フォームのTYPEですが、v4は A 、v6は AAAA となりますので注意して下さい。
上記のように入力できましたらそれぞれ『追加』をクリックして、下にスクロールしていただき『確認画面へ進む』をクリックして、DNSレコードの設定を完了しましょう。
4. ネームサーバー情報の変更
ドメイン詳細画面に戻っていただき、『ネームサーバー情報』部分の『ネームサーバーの変更』をクリックして、ネームサーバーの変更を行って下さい。
ネームサーバー変更画面へアクセスすると、下記のように『お名前.comのネームサーバーを使う』と言う箇所があるかと思いますので、『設定する』ボタンをクリックして設定を行って下さい。
ちなみに、DNSレコード設定・ネームサーバー変更の反映には24~72時間程掛かる場合がありますのでご注意下さい。
5. SSL/TLS証明書の作成
最後に下記コマンドを実行して、SSL/TLS証明書の作成・確認を行いましょう。
ターミナルを開き、アプリケーションのディレクトリ配下で下記コマンドを実行して下さい。
（custom-quartz はアプリ名、 example.com は取得したドメイン名を記入して下さい。）
$ flyctl certs create -a custom-quartz example.com
$ flyctl certs show -a custom-quartz example.com
上記が問題なく実行され、SSL/TLS証明書が発行されていれば独自ドメインの設定は完了です。
実際に https://設定したドメイン名 にアクセスしてみて、アプリケーションが起動するか確認してみて下さい。
最後に
今回は、【 fly.io × お名前.com 】を用いた独自ドメインの取得から設定方法までについて、説明をさせていただきました。
初学者の方だと、デプロイ・独自ドメイン化は詰まりやすいポイントでは無いでしょうか？
私も、個人開発時にデプロイ・独自ドメインの設定に関しては、躓く事が多々ありました....
これから個人開発を行おうとしている方・現在独自ドメインの設定方法に苦戦している方は、ぜひこちらの記事を参考にしていただければと思います。
最後まで読んでいただき、誠にありがとうございました🦍