Node.js のアップグレードで気をつけた こと 2022.05.17 UV Study : フロントエンドLT 会#6 @takfjp

自己紹介 Takeru Furuichi (@takfjp) コネヒト株式会社 所属 「ママリ」という出産・育児領域のサービスを開発・運営してい ます フロント: React, TypeScript, jest + testing-library バックエンド: CakePHP

No content

Node.js アップグレード大変ですよね Breaking Changes の確認 Dependencies の確認 動作確認

アップグレードの経緯 nodenv で Node.js のバージョン切り替えができる環境が前提 作業着手時点で, 対象リポジトリの Node.js は12 系だった。 いきなり16 系にアップグレードするのではなく、12 -> 14 へのアッ プグレードを経てから最終的に16 系（作業時のLTS ）にアップグレ ードする手段をとった。 ちなみに、Node.js は奇数バージョンは開発者向けの experimental なバージョンとして提供されており、プロダクト内 部で使う場合は stable な偶数バージョンを指定するのが通例

v12 -> v14 へのアップグレード 破壊的な変更が特になかったため、Dockerfile と、package.json の node-sass のインストールバージョンの変更のみ。 Dockerfile を書き換え、 docker-compose build --no-cache を行なっ たあとは忘れずに nodenv local 等でディレクトリ内の Node.js のバ ージョンを切り替えること。 local とプロダクト内部のバージョンが違うとうまく動かない 確認 yarn run build && yarn run start が通る ユニットテストが通過している 画面の動作確認

v14 -> v16 へのアップグレード 1. Node.js 公式サイトでLTS のバージョンを確認し、ローカルにインス トールする。 2. nodenv install --list でインストール可能か確認

3. 手元の環境では If the version you need is missing, try upgrading node-build: git -C /Users/myname/.nodenv/plugins/node-build pull とメッセージが出たため、 git -C /Users/myname/.nodenv/plugins/node-build pull を実行。

その後、 ❯ nodenv install 16.13.1 Downloading node-v16.13.1-darwin-x64.tar.gz... -> https://nodejs.org/dist/v16.13.1/node-v16.13.1-darwin-x64.tar.gz Installing node-v16.13.1-darwin-x64... Installed node-v16.13.1-darwin-x64 to /Users/myname/.nodenv/versions/16.13.1 でインストールを確認。 nodenv local 16.13.1 でディレクトリ内のバージョン切り替え。 node -v で切り替わってるか確認。

Dockerfile 書き換え - curl --silent --location https://rpm.nodesource.com/setup_14.x | bash - && \ + curl --silent --location https://rpm.nodesource.com/setup_16.x | bash - && \ docker-compose build --no-cache を実行したところ以下のメッセー ジが出てビルド失敗。 error /var/www/html/node_modules/node-sass: Command failed.

node-sass は Node.js v16 では非推奨となった。 https://qiita.com/n0bisuke/items/123a69ba5940f11404aa https://www.npmjs.com/package/node-sass Warning: LibSass and Node Sass are deprecated. While they will continue to receive maintenance releases indefinitely, there are no plans to add additional features or compatibility with any new CSS or Sass features. Projects that still use it should move onto Dart Sass. “ “

Sass (Dart Sass) を導入 package.json で node-sass を削除し、 sass を導入。 これだけだとビルドエラーになるため、sass-loader のバージョン を ^7.2.0 という現行の sass に対応したものに変更。 - "node-sass": "^4.14.1", - "sass-loader": "^6.0.7", + "sass": "1.32.5", + "sass-loader": "^7.2.0",

Sass (Dart Sass) を導入 nodenv で local に新しいバージョンをインストールしたらホスト側 でも node install -g yarn をしておく この時点で再度ビルドしたところ、WARNING が表示された。 WARNING on line 404, column 1 of repository/style/style.sass: This selector doesn't have any properties and won't be rendered. │ 404 │ .hoge-content .fuga-content │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

仕上げ 該当するScss を参照したところ、WARNING が表示された箇所は何 もプロパティが追加されていなかったため、セレクタを削除。 ここまでの作業を行なったところビルドが成功したので、以下の通 り確認を行なってPR を提出。 docker-compose up -d yarn install yarn run build yarn run start ユニットテストが通過している 画面の動作確認

雑感 Node.js のバージョンはビハインドしないようになるべく早めにキ ャッチアップ！ 特に依存ライブラリの廃止などがあると確認作業や工数が膨らむ ので余裕をもってやる 作業中はリアルタイムにSlack でスレッドを立てて実況しながらや るとGood チームメンバーとかがヘルプを出してくれたりする 吐き出されたエラーログなどもそのまま貼り付けておく 作業が一通り終わったら、GitHub Issue や Notion などにスタック 情報としてまとめよう

We're Hiring! カジュアル面談やってます！ https://connehito.com/recruit/

Thank you!

No content