mogulla3.tech

2023-09-23

ブログのホスティングサービスを Gatsby Cloud から Netlify へ移行した

目次

本ブログはもともと Gatsby Cloud でホスティングしていたが、Netlify による Gatsby の買収に伴い Gatsby Cloud は終了することになった。

Gatsby Cloud にはこれといった不満もなく快適便利に使わせてもらっていたが、そのような背景もあって Netlify に移行した。この記事では移行にあたっての作業記録的なものを簡単に残す。

移行の全体観

Netlify が公式で Gatsby Cloud からの移行ガイド を提供してくれていたので、基本的にこれを参考にした(が、若干手順どおりとはならなかったところもあった)。

ざっくりとした移行手順は以下の通り。

  1. プラグインの変更
  2. Netlify 上にブログを publish
  3. DNS の設定変更 (Netlify DNS の利用)
  4. (Gatsby Cloud からサイトを削除)

プラグインの変更

npm パッケージの変更

  • 追加: gatsby-adapter-netlify
  • 削除: gatsby-plugin-gatsby-cloud

移行ガイドを見ると gatsby-plugin-netlify をインストールすると書かれているが、これを使うと Build のログに以下のような警告が出る. gatsby-plugin-netlify を無効化して gatsby-adapter-netlify をインストールしている。

10:19:44 PM: info Using gatsby-adapter-netlify adapter
10:19:44 PM: warning Disabling plugin gatsby-plugin-netlify:
10:19:44 PM:  - Not compatible with the gatsby-adapter-netlify adapter. Please remove it from your gatsby-config.

このあたりの詳細はちゃんと把握していないが、使っている Gatsby のバージョンが 5.12.0 以上の場合は adapter の方を使えば良さそう。

なお、Build ステップにおいて gatsby-adapter-netlify を自動でインストールしてくれるようなので、package.json に記載しなくてもデプロイは可能。しかし、明示することで Build の速度は速くなるようなので package.json に追加してインストールすることにした。

Netlify 上にブログを publish

ほとんど移行ガイドのままだったので省略。

ブログのソースは GitHub に置いているので、GitHub と連携し、かんたんな Build の設定を施し Deploy をしただけで終わった。

Build settings
Build settings

この時点で、自動で割り当てられたドメインで、Netlify上に publish されたブログをインターネットから閲覧できる状態になった。

DNS の設定変更

ここが一番面倒だった。また、移行ガイドは慎重な手順で書かれているように見受けられたが、個人のブログなので多少のダウンタイムも気にしていないのであんまり参考にしていない。

mogulla3.tech というドメインはムームードメインで取得・管理しているので、ムームードメイン側での設定変更と Netlify DNS というサービスの設定を行う必要があった。

ムームードメインで取得したドメインを Netlify DNS と連携するには以下のドキュメントが参考になった。
https://docs.netlify.com/domains-https/netlify-dns/delegate-to-netlify/

ムームードメイン側の設定

  • ムームードメインのコントロールパネルへログイン
  • サイドメニューより "ネームサーバ設定変更" へ
  • 「取得したドメインで使用する」のラジオボタンをクリック
  • Netlify の UI の Domains ページ上に表示される4つのネームサーバ名を入力して保存する

ムームードメイン側の設定
ムームードメイン側の設定

Netlify DNS 側の設定

Netlify UI 上の Domains メニューを選択し、「DNS records」から新規レコードを追加する。

前述のムームードメイン側のステップが完了し、Netlify 管理下のドメインとなった場合 NETLIFY という独自のレコードとして表示されるようだ。

Netlify の DNS records の設定
Netlify の DNS records の設定

ここの手順については以下のドキュメントが参考になった。
https://docs.netlify.com/domains-https/netlify-dns/dns-records/

移行完了

細かいところはすっ飛ばしているが大体このような作業で Gatsby Cloud から Netlify への移行が完了した。

念のため数日後に、Gatsby Cloud からサイトを消し、移行作業は完全に終了。Gatsby Cloud、これまでお世話になりました && ありがとうございました。