
## CentOS7 に node18 を入れようとすると…

ローカルでは Gatsby4 から 5 への移行が出来たので、サーバー側でも上手くいくか試してみる。

Gatsby5 は node18 を推奨とのことだったので、サーバー（CentOS7）に node18 をインストールして、使おうとすると…

```shell
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
```

上記の様なエラーが出た。

対処する方法もあるみたいだけど、CentOS7 のサポートも来年で切れるみたいなので、これを機に他の OS に移行してみる事に…

## OS の再インストールをしてみる

CentOS7 からの移行には、[ELevate](https://almalinux.org/elevate)みたいな移行ツールもあるみたいですが、忘れているであろう Linux の設定等の復習も兼ねて、移行ツールは使わずに OS の再インストールをしてみました。

どの OS にしようかと思ったんですが、何となくで RockyLinux を使ってみることに。

- [Rocky Linux ガイド](https://docs.rockylinux.org/ja/guides/)

上記のガイドなどを参考にしながら、基本的な設定を行いました。

## Nginx や Let's Encrypt をインストール

RockyLinux の標準リポジトリにある Nginx は古いみたいなので、以下の記事を参考に Nginx をインストール。

- [Rocky Linux に Nginx を公式リポジトリからインストールする](https://sig9.org/archives/4116)

Let's Encrypt のインストールは前回もやったはずなんだけど、すっかり手順を忘れていたので、以下の記事を参考にさせて頂きました。

- [Generating SSL Keys - Let's Encrypt](https://docs.rockylinux.org/ja/guides/security/generating_ssl_keys_lets_encrypt/)
- [Certbot 公式に従って Nginx を常時 SSL 化](https://zenn.dev/hitoshiro/articles/b8170ec36d1f01)

今回は記事内にもある様に、以下のコマンドを使ってインストールしました。

```shell
certbot --nginx
```

Nginx 側の設定を、いい感じにやってくれます。

## yarn install してみたら…

あとは node18 をインストールして、Gatsby5 のプロジェクトを Github から pull してきて、yarn install を実行。

```shell
There appears to be trouble with your network connection. Retrying...
```

上記のエラーが表示され、強制終了。

何度やっても強制終了してしまうので、yarn ではなく npm でインストールしてみても、強制終了してしまう。

- [Yarn でパッケージをインストールする際に info There appears to be trouble with your network connection. Retrying… が出て失敗してしまう](https://labor.ewigleere.net/2021/01/08/yarn_error_there_appears_to_be_trouble_with_your_network/)
- [yarn を行うと「info There appears to be trouble with your network connection. Retrying...」が出てくる](https://blog.sa2taka.com/post/resolve-yarn-info-there-appears-to-be-trouble-with-your-network-connection-retrying/)

ググってみたら、タイムアウト時間を設定してあげると良いとのことだったので、試してみても再び強制終了。

## 一旦、4 に戻してみる

Gatsby のバージョンを 5 にしたのが原因なのかな？　とか思ったので、一旦 バージョンを 4 に戻してみる。

node も 17 にして、再度 yarn install してみました。

```shell
There appears to be trouble with your network connection. Retrying...
```

結果は変わらず。

タイムアウト時間を設定しても、駄目。

CentOS7 の時はタイムアウト時間を設定しなくても、yarn install ですんなりインストール出来たのになぁ…

OS を変更したことだったり、あとはサーバーのスペックの問題とかなの？

契約しているサーバーの更新がもうすぐだったこともあり、試しにサーバーのスペックを一つ上のものへと変更してみました。

で、再び yarn install してみると…

タイムアウト時間を設定しなくても、あっさりインストールが完了。

その後 gatsby build を行なっても、エラーは出ず。

## 5 に戻してみる

Gatsby 4 が動くことが分かったので、次に 5 もちゃんと動くか試してみる。

node の 18 に切り替えて、再び yarn install してみると…

```shell
<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
```

タイムアウトのエラーにはならなかったものの、今度は上記の様なエラーが表示されました。

- [[エラー][Angular] JavaScript heap out of memory(ヒープメモリ不足 )](https://zenn.dev/yusuke_docha/articles/f8c3cd88302d16)
- [JavaScript heap out of memory が発生したときに試したこと](https://www.gaji.jp/blog/2019/12/17/1860/)
- [Next.js でビルド時に「heap out of memory」でエラーになる場合の対処方法](https://choppydays.com/next-js%E3%81%A7%E3%83%93%E3%83%AB%E3%83%89%E6%99%82%E3%81%AB%E3%80%8Cheap-out-of-memory%E3%80%8D%E3%81%A7%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AB%E3%81%AA%E3%82%8B%E5%A0%B4%E5%90%88%E3%81%AE%E5%AF%BE/)

上記の記事を参考にさせて頂き、yarn install 時に max-old-space-size を設定してあげることで、無事インストールが完了。

インストールが終わったので、gatsby build をしてみたら、新たなエラーが…


CentOSからRockyLinuxへ移行してみた


## warn Browserslist が…

いつからか、以下の様なものが表示される様になっていました。

```shell
warn Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
```

とりあえず、ググってみる。

- [[React] アプリのビルド時に Browserslist の更新を要求されるので対処してみる](https://dev.classmethod.jp/articles/asked-to-update-the-browserslist-when-building-react-app/)

ターミナル上に記載されていた github へのリンクや上記記事を読んだ後、Please run に書かれているコマンドを走らせてみると、先の warn は表示されなくなりました。

## 4 の最新版にアップデートしてみたら…

- [Migrating from v4 to v5](https://www.gatsbyjs.com/docs/reference/release-notes/migrating-from-v4-to-v5/)

GatsbyJS が 5 になっているみたいなので、アップデートしようかな？　と。

> Before upgrading to v5 we highly recommend upgrading gatsby (and all plugins) to the latest v4 version.

まずは 4 の最新版（プラグインとかも）にアップデートしてからにしてね的なことが書かれていたので、その通りにやってみる。

4 の最新版（4.25.0）にしてから gatsby develop すると、今度は以下の warn が出る様になりました。

```shell
warn gatsby-plugin-react-helmet: Gatsby now has built-in support for modifying the document head. Learn more at https://gatsby.dev/gatsby-head
```

- [Gatsby Head API](https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/)

リンク先を見てみると、4.19.0 から react-helmet ではなく、Gatsby Head API が使われる様になったと。

- [非推奨になる react-helmet から Gatsby Head API に書き換える方法](https://bel-itigo.com/how-to-use-gatsby-head-api/)
- [Tutorial: Learn how Gatsby works](https://www.gatsbyjs.com/docs/tutorial/)

上記記事などを参考にし、react-helmet を Gatsby Head API に置き換えました。（Gatsby の Tutorial も、Gatsby Head API を使ったものに更新されていますね！）

## 5 にアップデートしてみる。

4 の最新版にアップデート出来たので、次に 5 にアップデートしてみる。

> For most users we expect a smooth upgrade path as only a couple of changes will be required: Updating to Node 18, switching to React 18, and changing GraphQL queries using a codemod.

5 を動かすには、React も node も v18 以降にし、プラグインも最新バージョンに置き換えました。

```shell
npx gatsby-codemods@latest sort-and-aggr-graphql .
```

GraphQL の書き方が変更になっているみたいなので、マニュアルにもある様に上記のコマンドを叩いて変換してから、gatsby develop をしてみたら…

色々とエラーが出た！

## 4 の時は、slug を取得出来ていた…

pages/index.js ファイルに、以下の様なエラーが出ていました。

```shell
ERROR #85923  GRAPHQL.VALIDATION

There was an error in your GraphQL query:

Cannot query field "slug" on type "Mdx".
```

Gatsby4 の時は、以下の様な記述で slug （ブログ記事のフォルダ名）を取得し、それを個別記事へのパスとして使っていました。

```graphql
query MyQuery {
  allMdx {
    edges {
      node {
        frontmatter {
          title
          tags
        }
        slug
      }
    }
  }
}
```

これを GraphiQL で実行すると、

```json
{
  "data": {
    "allMdx": {
      "edges": [
        {
          "node": {
            "frontmatter": {
              "title": "TailWindCSSのlast、@apply、last-of-typeを使ってみる",
              "tags": ["TailWindCSS"]
            },
            "slug": "tailwindcss-apply-last-type-of/"
          }
        },
        {
          "node": {
            "frontmatter": {
              "title": "Gatsbyの記事に目次を作成してみる",
              "tags": ["GatsbyJS"]
            },
            "slug": "table-of-contents/"
          }
        }
      ]
    }
  },
  "extensions": {}
}
```

こんな感じで、slug を取得出来ていましたが、（GraphiQL を見てみると）5 からは、slug の項目がなくなっている…

最新（v5）のチュートリアルにもある様に、mdx ファイル側で slug を設定してあげて、

```markdown
---
title: "TailWindCSSのlast、@apply、last-of-typeを使ってみる"
tags: ["TailWindCSS"]
slug: "tailwindcss-apply-last-type-of"
---
```

それを graphql で取得する様に変更しました。（4 の時からこの手法を取っていた方は、修正しなくても大丈夫かと）

```graphql
export const query = graphql`
  {
    allMdx(sort: { frontmatter: { date: DESC } }) {
      nodes {
        frontmatter {
          title
          tags
          slug
        }
      }
    }
  }
`
```

## templates のファイルにも…

templates フォルダ内に作成したファイルにも、先と同様のエラーが出ていたので、そちらも修正。

加えて propTypes も修正する。以前はこんな感じ。

```graphql
Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMdx: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
            }),
            slug: PropTypes.string.isRequired,
          }),
        }).isRequired
      ),
    }),
  }),
}
```

slug の記述箇所を、修正しました。

```graphql
Tags.propTypes = {
  pageContext: PropTypes.shape({
    tag: PropTypes.string.isRequired,
  }),
  data: PropTypes.shape({
    allMdx: PropTypes.shape({
      totalCount: PropTypes.number.isRequired,
      edges: PropTypes.arrayOf(
        PropTypes.shape({
          node: PropTypes.shape({
            frontmatter: PropTypes.shape({
              title: PropTypes.string.isRequired,
              slug: PropTypes.string.isRequired,
            }),
          }),
        }).isRequired
      ),
    }),
  }),
}
```

## 動的に作成する個別記事ページも…

記事一覧ページから個別記事ページに遷移しようとしたら、動的にページが作成されずにエラーとなる現象も出ました。

### ファイル名を変更

バージョン 4 の時は\{mdx.slug}.js だったファイル名を、チュートリアルにもある様に、\{mdx.frontmatter\_\_slug}.js に変更。

### データ取得の記述も修正

4 の時は以下の様な記述でデータを取得していました。（v4 のチュートリアルも、この方法だった様な気がする）

```jsx
import { MDXRenderer } from "gatsby-plugin-mdx"

（略）

<MDXRenderer>{data.mdx.body}</MDXRenderer>
```

う〜ん、何が問題なのかなぁ…　そういえば v5 のチュートリアルで MDXRenderer って出てきたっけ？

- [Render post contents in the blog post page template](https://www.gatsbyjs.com/docs/tutorial/part-6/#render-post-contents-in-the-blog-post-page-template)

MDXRenderer は、使ってない！

- [updating-page-templates](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#updating-page-templates)

page-templates の変更点みたいな記事もあったので、そちらを見ても MDXRenderer は使わず、children を使っていました。

```jsx
const BlogPost = ({ data, children }) => {
（略）
<article>
        <h1>{data.mdx.frontmatter.title}</h1>
        （略）
        {children}
</article>
```

この様にコードを修正するとエラーにならず、個別記事のページに遷移出来る様になりました。


#Linuxの記事、2件あります

CentOSからRockyLinuxへ移行してみた

GatsbyJS を4から5にアップデートしてみる