Netlifyにお名前.comで取得したドメイン名を設定する
日付 タグ hugo netlify カテゴリ others目次
お名前.comでドメイン取得する
最初に希望のドメイン名をお名前.comで取得。取得済みのものがあれば、それを利用しても良い。
https://www.onamae.com/ - お名前.com
![お名前.com](/images/netlify-onamae/D855BD5E9D69434F6125966114416933.jpg)
ドメイン名は.comや.jp等で価格が違ってくる。
Netlifyでサイトを公開する
https://www.netlify.com - Netlify
![Netlify](/images/netlify-onamae/A4F5233D8764414F685BB671FC804A2D.jpg)
前にやったような手順でGithubにPushしたブログサイトのコードをNetlifyにDeployしてサイトを一旦公開しておく。 ( ==> Netlifyに作ったブログサイトをGithub経由でDeployする )
特にカスタムドメインを設定していなければ、
https://[Netlifyから自動で振られたID].netlify.app
となっているので、ここから、これを自分で取得したドメイン名に変更していく。
Netlifyでカスタムドメイン設定する
Netlifyにログインして、「Domain Settings」
![Domain Settings](/images/netlify-onamae/C4CDB8B3800853234D98A1790F24CF48.jpg)
続いて「Add custom domain」
![Add custom domain](/images/netlify-onamae/2D36D75D8E5A9E47A4CAC632E4DDB29A.jpg)
続いてお名前.comで取得したドメイン名を入力して「Verify」
![Original domain](/images/netlify-onamae/99757058EBD03C58E0F23D8E93422032.jpg)
あなたがドメインのオーナーで間違いないか?と確認されるのでドメイン名のスペルミスなどがなければ、「Yes, add domain」
![スペルミスチェック](/images/netlify-onamae/2B2C91AAD9F8E16A9C19ED8E19C0D03F.jpg)
自分の取得したドメイン名にここで変わるが、まだこれで終わりではない。
![ドメイン表示](/images/netlify-onamae/4F0DBDE204594CA3D6DBF8D2679647C7.jpg)
次にネームサーバー(DNSサーバー)の設定を行うので、「Setup up Netlify DNS」
![Setup up Netlify DNS](/images/netlify-onamae/2494B9227933DBCE95B2060423842F98.jpg)
ネームサーバーの設定を継続するので「Verify」
![Verify](/images/netlify-onamae/631D08376069271DF30C75652F9C7336.jpg)
あなたがドメインのオーナーで間違いないか?と確認されるので再度スペルミスがないか確認して「Yes, add domain」
![再度確認](/images/netlify-onamae/07A7F064C5C4C7AC29602D15D0797E86.jpg)
ネームサーバー(DNS)設定を継続するので、「Continue」
![Add DNS records](/images/netlify-onamae/2C23C978C1954D3F452422ED977707E8.jpg)
ここで出てくる4つのネームサーバーのリストをメモしたら、「Done」
![ネームサーバーリスト](/images/netlify-onamae/B74B4035DB1DA5FC5315DA4336F3EB76.jpg)
お名前.comでネームサーバーの変更をする
ここからはお名前.comでのサイトにログインしての設定作業になる。 今回取得してまだ利用してないドメイン名なので、ログイン画面からネームサーバー「初期設定」へ。
![ネームサーバー初期設定](/images/netlify-onamae/01D32A37EDBC2C283F326354E9F04585.jpg)
ネームサーバーはNetlify提供のもの(先ほどメモした4つのネームサーバーリスト)へ変更するので、「その他」を選択する。
Netlifyのサイトでメモした4つのネームサーバーを入力していく。
![Netlifyのネームサーバー](/images/netlify-onamae/2333EB3540E0EFA30F72FADEFFDD07D1.jpg)
反映完了までに24時間から72時間かかる場合があるという注意文。自分がテストした時にはそんなに時間がかからず反映されたが、ワーストケースとしてそれくらい時間がかかることがあるようだ。
以上でお名前.com側での設定は完了。
Netlifyで設定が更新されたのを確認する
お名前.comでの設定は終わったので、再度Netlifyに戻って設定反映が更新されているか確認する。
![Netlify DNS](/images/netlify-onamae/D0DD72B17512B70323289F44A3919751.jpg)
ドメイン設定のところが先ほどの設定で更新されてNetlify DNSと表示されていること。 また、Let’s Encryptを利用したHTTPS対応も自動でNetlifyがやってくれるので、それが反映されていることを確認。
![Let's Encrypt](/images/netlify-onamae/5B377A425E17CC8954343FFB9F4E9B50.jpg)
これらが確認できればOK。HTTPSの反映はちょっと時間がかかるようだ。自分の場合、1時間くらいしたら、すでに対応が環境されてステータスが更新されていた。
サイトにアクセスして確認する
あとはサイトのページへ実際に自分で取得したドメイン名のURLでアクセスして、アクセスできるようになっていることが確認できればいい。
http://[domain名]
https://[domain名]
のどちらでもアクセスは可能。HTTPでアクセスすると自動的にHTTPSへ繋いでくれる。
また、ドメイン名にwww
を付け足した
http://www.[domain名]
https://www.[domain名]
でも自動的にNetlifyがリダイレクトしてくれるので、アクセスが可能になる。