Netlifyで別のカスタムドメインに移行するための手順

この記事の概要

Netlify上でカスタムドメインで運用しているサイトがあり、そのサイトを別のカスタムドメインに移行した祭に行った手順を書き残していく。

ちなみにこの記事内にも出てくるが一応先に書いておくと

• slack-remind-command-generator-at.work が移行前のドメイン
• slack-remind-command-generator.shinshin86.com が移行後のドメイン

となる

具体的な移行手順

1. 変更したい対象のドメインをエイリアスとして追加する
2. エイリアスとして設定したドメインの、ドメイン取得元での設定
3. _redirects ファイルを作成・記述する
4. _redirects はデプロイ時にルート直下に配置されるように設定する
5. canonicalの設定やサイト内のリンクURLの変更を実施
6. 移行対象のドメイン(さきほどエイリアスで設定したドメイン)をprimaryドメインとして設定する
7. Google analyticsやgoogle search consoleの設定を修正
8. 余談・宣伝: Slackのリマインドコマンドを簡単に生成するためのWebツールを作った

1.変更したい対象のドメインをエイリアスとして追加する

まずはNetlify上のダッシュボードで操作を行っていく。

対象サイトのドメイン設定画面上(Domaina management -> Custom domains)で
Add domain alias を押して、移行対象のドメインをエイリアスとして追加する。

2. エイリアスとして設定したドメインの、ドメイン取得元での設定

自身の場合、移行後のドメインはお名前ドットコムで取得していたので、お名前ドットコムでドメインの設定を行った。
これは別に特別な作業ではなく、今回の作業に限らず行う類のものである。

今回、移行対象ドメインは下記のようなサブドメインだったため、CNAMEの設定を行ったりした。

slack-remind-command-generator.shinshin86.com

3. _redirects ファイルを作成・記述する

下記のドキュメントを参考にしながら、Netlify上でリダイレクトの設定を行うための _redirects というファイルを作成する。
ファイルはプロジェクトルートに格納。

実際の _redirects ファイルの内容は下記のようなものになった。
これで移行前のドメインへのアクセスは新しいドメインにリダイレクトされるようになる。

ちなみに移行前のドメインが slack-remind-command-generator-at.work で、
移行後のドメインが slack-remind-command-generator.shinshin86.com である。
(www.slack-remind-command-generator-at.work も設定されているため、こちらも同じようにリダイレクトされるようにしている)

http://slack-remind-command-generator-at.work/*  http://slack-remind-command-generator.shinshin86.com/:splat 301!
https://slack-remind-command-generator-at.work/*  https://slack-remind-command-generator.shinshin86.com/:splat 301!
http://www.slack-remind-command-generator-at.work/* http://slack-remind-command-generator.shinshin86.com/:splat 301!
https://www.slack-remind-command-generator-at.work/* https://slack-remind-command-generator.shinshin86.com/:splat 301!

4. _redirects はデプロイ時にルート直下に配置されるように設定する

自身のサイトの場合、Next.jsで実装していたため、 deploy コマンド時に、_redirects を out にコピーする処理を追加した。
(これについては愚直なやり方のような気がしているが、他に良いやり方が思い浮かばなかったのでこうしている)

"deploy": "npm run build && npm run export && cp ./_redirects out/",

5. canonicalの設定やサイト内のリンクURLの変更を実施

これはNetlifyに限ったことではないが、 canonical やサイト内のリンクURLの内容を移行後のものに変更。

6. 移行対象のドメイン(さきほどエイリアスで設定したドメイン)をprimaryドメインとして設定する

ここまで設定し終えたタイミングで、移行対象のドメインをprimaryドメインとして設定する。
こちらの設定はキャプチャの通りで、Netlifyのダッシュボード上から行う。
(Domain management にある　Custom domains というところ)

最終的に下記のような状態になっていれば良いかと思う。

7. Google AnalyticsやGoogle Search Consoleの設定を修正

これもNetlifyに限ったことではない。

Google AnaliticsやGoogle Search Consoleの設定などを修正。
他にも設定を修正する箇所がないか確認して移行は完了となる。

8.余談・宣伝: Slackのリマインドコマンドを簡単に生成するためのWebツールを作った

このポスト内で実際に書いていた下記のサイトだが、最後に宣伝をさせてもらうと、Slackのリマインドコマンドを簡単に生成するためのWebツールである。

Slackのリマインドコマンドは個人的に分かりにくく、ちょっとしたリマインドを設定したいだけなのに、そのたびにSlackのドキュメントを見に行っていたので、そういうことをしなくてもリマインドを設定できるようにと思い、作成した。

5分後のリマインドから、曜日・日付指定のリマインドまで、様々なシチュエーションに応じたリマインドがサクッと設定できるので、よろしければ使ってみてください。
(使いにくい箇所などはまだまだあるかと思います。改善箇所ありましたらコメントいただけると幸いです)