バックエンドエンジニアの豊永です。2023 年がもう少しで終わりそうですね。
今回は、個人ブログのお引っ越しをした時の話しを共有させてください。
やりたいこと
Gatsby Cloud で運営している個人ブログを Netlify へ移行します。
背景
ある日、私が個人で運営しているブログが見れなくなっていることに気がつきました。
Gatsby Cloud から何かメールが来てないか調べてみると、
[FINAL REMINDER] Gatsby Cloud End Of Service Date というタイトルでメールが来ていました。
なぜ、今ごろ気がついたのか。(ブログを書いていないということ... これから、書く頻度を増やしていきたいと思います。)
メールに移行方法のリンクが貼ってありました。Netlify へ移行する方法が載っていました。
Gatsby Cloud Migration Guide_August 2023
何で Netlify なんだろうと疑問でしたが、Netlify が Gatsby を買収したからのようです。いま知りました...
やったこと
メールに載っていた Netlify への移行方法の pdf をベースに書いていきます。
作業する前に確認環境を調べます。
$ gatsby --version
Gatsby CLI version: 4.4.0
Gatsby version: 4.5.2
Gatsby の v5 がリリースされていますが、ここでは Netlify への移行に集中するため、バージョンはそのままにしようと思います。
Release v5.12.0 · gatsbyjs/gatsby
Netlify アカウントの新規作成
私は、すでにアカウントを持っていたのでスキップします。
gatsby-plugin-netlify のインストール
パッケージをインストールします。
$ npm i gatsby-plugin-netlify
gatsby-config.js
const config = {
...
plugins: [
+ `gatsby-plugin-netlify `,
Netlify から Deploy する
リポジトリを指定して、デプロイすると以下のエラーが発生しました。
1:37:46 AM: Failed during stage "Install dependencies": dependency_installation script returned non-zero exit code: 1
1:37:46 AM: npm ERR! code 1
Node のバージョンを指定していないのが原因のようでした。(Netlify 上では Node 18 系でビルドが通らない様子)
私の手元の環境ではビルドが通っていたので同じバージョンにします。
Environment variables に NODE_VERSION に 14.17.6 を指定します。 (node -v を実行して取得したバージョンを指定してください。古いのでバージョンアップしたいですが、別の機会にやることにします。)
Netlify 上のサイトに独自ドメインを割り当てる
Netlify への移行方法の pdf とは手順が異なります。
私の場合、Netlify で 2 つのサイトを運用することになるため、このようになります。
変更前のドメインとホスティング先
- ブログ 1 (
blog.tamesuu.com)- ホスティング先: Netlify
- ドメイン側: Netlify DNS を設定
- ブログ 2 (
tamesuu.com) <- これが新しく設定したいもの- ホスティング先: Gatsby Cloud
- ドメイン側: CNAME や A レコードを設定
変更後のドメインとホスティング先
- ブログ 1 (
blog.tamesuu.com)- ホスティング先: Netlify
- ブログ 2 (
tamesuu.com) <- これが新しく設定したいもの- ホスティング先: Netlify
- ドメイン側: CNAME や A レコードを設定
-
www.tamesuu.comの CNAME に Netlify から自動で割り当てられてるドメインを指定 - A レコードに
75.2.60.5を指定 (※Netlify のドキュメント Configure external DNS for a custom domain | Netlify Docs に記載があったものです)
-
これで Netlify への移行完了です！！！
Discussion