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

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

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