$30 off During Our Annual Pro Sale. View Details »

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. Node.js
    のアップグレードで気をつけた
    こと
    2022.05.17 UV Study :
    フロントエンドLT
    会#6

    @takfjp

    View Slide

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

    View Slide

  3. View Slide

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

    View Slide

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

    View Slide

  6. v12 -> v14
    へのアップグレード
    破壊的な変更が特になかったため、Dockerfile
    と、package.json

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

    View Slide

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

    View Slide

  8. 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
    を実行。

    View Slide

  9. その後、
    ❯ 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
    で切り替わってるか確認。

    View Slide

  10. 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.

    View Slide

  11. 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.


    View Slide

  12. 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",

    View Slide

  13. 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
    │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    View Slide

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

    View Slide

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

    View Slide

  16. We're Hiring!
    カジュアル面談やってます!

    https://connehito.com/recruit/

    View Slide

  17. Thank you!

    View Slide

  18. View Slide