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` を押して、移行対象のドメインをエイリアスとして追加する。

<img width="944" alt="Add domain aliasを押して、移行対象のドメインを設定する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205976/6b334244-f5dd-2ab9-eb2c-f8b03105254a.png">

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

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

`slack-remind-command-generator.shinshin86.com`


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

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

https://docs.netlify.com/routing/redirects/#syntax-for-the-redirects-file

実際の `_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` というところ)

<img width="940" alt="移行対象のドメインをprimaryドメインとして設定する" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205976/eca41158-0722-80f8-558b-66b0f12ebdf1.png">

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

<img width="916" alt="ドメインの移行設定が一通り済んだあとのドメイン設定画面キャプチャ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205976/3f2a134f-006c-b4c1-1e5d-60a2860e83d4.png">

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

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

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

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

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

https://slack-remind-command-generator.shinshin86.com

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

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