Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Node.jsのアップグレードで気をつけたこと

takf
May 18, 2022

 Node.jsのアップグレードで気をつけたこと

UV Study : フロントエンドLT会#6

takf

May 18, 2022
Tweet

More Decks by takf

Other Decks in Programming

Transcript

  1. アップグレードの経緯 nodenv で Node.js のバージョン切り替えができる環境が前提 作業着手時点で, 対象リポジトリの Node.js は12 系だった。

    いきなり16 系にアップグレードするのではなく、12 -> 14 へのアッ プグレードを経てから最終的に16 系(作業時のLTS )にアップグレ ードする手段をとった。 ちなみに、Node.js は奇数バージョンは開発者向けの experimental なバージョンとして提供されており、プロダクト内 部で使う場合は stable な偶数バージョンを指定するのが通例
  2. v12 -> v14 へのアップグレード 破壊的な変更が特になかったため、Dockerfile と、package.json の node-sass のインストールバージョンの変更のみ。 Dockerfile

    を書き換え、 docker-compose build --no-cache を行なっ たあとは忘れずに nodenv local 等でディレクトリ内の Node.js のバ ージョンを切り替えること。 local とプロダクト内部のバージョンが違うとうまく動かない 確認 yarn run build && yarn run start が通る ユニットテストが通過している 画面の動作確認
  3. 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 を実行。
  4. その後、 ❯ 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 で切り替わってるか確認。
  5. 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.
  6. 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. “ “
  7. 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",
  8. 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 │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^