Google Domainsで取得したドメインをnetlifyに設定する

こんにちは、@NemotoTatsuroです。
前回Google Domainsで.devドメインを取得したので、今度はこのドメインをnetlifyに設定します。

netlifyのカスタムドメイン設定

まずはnetlify側にカスタムドメインの設定をします。

netlifyにログインしてサイトの管理画面が表示されたら「Domain settings」をクリック。

netlify_domain_setting1

DomainsのCustom domainsから「Add custom domain」をクリック。

netlify_domain_setting2

Add a custom domain to your siteのCustom domainに設定したいドメインを入力し「Verify」をクリック。

netlify_domain_setting3

するとnetlify.comがDefault subdomain、指定したドメインがPrimary domain、指定したドメインのサブドメインwwwがRedirects automatically to primary domainに設定されます。

netlify_domain_setting4

Google DomainsのDNS設定

次にGoogle Domains側でDNSの設定をします。

Google Domainsのマイドメインから設定するドメインの「管理」をクリック。

google_domains_manage

ドメインの管理画面から左サイドメニューの「DNS」をクリック。

カスタム リソース レコードを以下のように設定。

google_domains_dns_setting

設定してしばらくするとDNSの設定が適用されます。
同時にnetlify側で自動的にLet’s EncryptのSSL証明書が設定されてHTTPS化されます。便利!

netlify_ssl_setting

netlifyサブドメインからカスタムドメインへのリダイレクト設定

この状態だとhardworkers.devやwww.hardworkers.devにアクセスした場合はhardworkers.devへリダイレクトされますが、hardworkers-site.netlify.comへアクセスした場合はhardworkers.devへリダイレクトされず、そのまま表示されてしまいます。

hardworkers-site.netlify.comへアクセスした場合にhardworkers.devへリダイレクトされるように、netlifyの_redirectsを設定してデプロイしましょう。

http://hardworkers-site.netlify.com/*  https://hardworkers.dev/:splat  301!
https://hardworkers-site.netlify.com/*  https://hardworkers.dev/:splat  301!
http://hardworkers.dev/*  https://hardworkers.dev/:splat  301!

netlifyのリダイレクト設定については公式ドキュメントをご確認ください。

これでGoogle Domainsで取得したドメインでnetlifyのサイトが表示されるようになりました。

Nemoto Tatsuro
Freelance Frontend/Serverside Engineer

フロントエンドもサーバーサイドもやるフリーランスエンジニア。
大学で分子生物学を専攻後、東日本大震災の直後に中小SIerへ就職。
その後ベンチャーへ転職し、2017年にフリーランスへ転向しました。

技術スキルはHTML/CSS(Sass)/JavaScript(jQuery/Node.js/Vue.js)/PHP(Laravel/WordPress)/C#など。
Webシステム開発やWordPressを使ったサイト制作が得意分野です。