こんにちは、れいじです。
数年前から保守しているサイトをcreate-react-appで作成したのですが、Node v18がLTS版になったことによってOpenSSL証明書の互換エラーに引っかかってしまうようになりました。
startコマンドやbuildコマンドに古いアルゴリズムを使用するように環境変数のフラグを付け加えることで応急処置ができるものの、元々このサイトがNode v14で動いていたこともあり脆弱性の観点からもNode v18に対応することにしました。
react-scriptsのアップデート
正確には上記のOpenSSL証明書の互換エラーはNode.jsのバージョンとWebpackのバージョンの不一致によって起こるものです。
そしてこのWebpackに依存しているのは、react-scriptsというパッケージです。
つまりこのraect-scriptsを最新版にアップデートすれば良さそうです。
古いcreate-react-appではreact-scriptsのv3が入っています。これがバージョンが固定されており、yarn upgredeなどで自動的に更新することができません。
なので、以下のようにバージョン指定をしてupgradeを行います。今回latestバージョンをいきなりブチ込みましたが、多分v4にあげてからv5にあげるのが正解だと思います。
$yarn upgrade react-scripts@latest
reactとreact-domのバージョンを上げる
react-scripsに合わせて、reactとreact-domのバージョンを上げます。こちらはpackage.jsonを直接弄って最新版に対応します。
"react": "^17.0.2", "react-dom": "^17.0.2",
この後yarnでパッケージをアップデートします。
yarn startコマンドで動作確認をする
比較的プレーンなプロジェクトであれば、この3つのパッケージをアップデートすることでNode v18に対応でき、OpenSSLエラーも解消することができました。
実際に動作確認を実施して、ページが問題なく動作することを確認してください。
$yarn start
【Netlify対応】.nvmrcにNodeのバージョン情報を書き込んでリポジトリにpushする
このサイトはNetlifyで保守していて、Nodeはv18まで対応しています。
しかしcreate-react-appで作成したappが古いせいなのか、それとも脆弱性対応のため各種パッケージをアップデートしたタイミングが悪かったのか、デフォルトのNode v18で動くはずなのにNode v12を指定してビルドしようとしていたので.nvmrcファイルで改めてNode.jsのバージョンを固定してあげる必要がありました。
node -v > .nvmrc
プロジェクトのルートディレクトリに、Node.jsのバージョンが記録されたファイルが一つできました。これはmasterブランチで管理される必要があります。
まとめ
このままフラグを付けてNode v18LTS対応を回避し続けるのもありと言えばありなんですが、アップデートされているに越したことはないので早めに対応できてよかったです。
↓create-react-appを使ってReactAppの作り方などを解説した本を書いています↓
