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

アプリケーションのデプロイを高速化するためにnode_modulesに手を出した話 / A story about peeking inside node_modules to speed up the deployment of applications.

アプリケーションのデプロイを高速化するためにnode_modulesに手を出した話 / A story about peeking inside node_modules to speed up the deployment of applications.

PHP Conference Japan 2021の大LT大会で発表した登壇資料です。

プロポーザル: https://fortee.jp/phpcon-2021/proposal/18b7e5b9-7198-4c9e-a0bf-5a3d0c25b49c

がっちゃんのTwitter: https://twitter.com/gatchan0807
BASEの求人情報: https://binc.jp/jobs
BASEのテックブログ: https://devblog.thebase.in/

関連URL:

[20枚目] https://circleci.com/docs/ja/2.0/caching/
[26枚目] https://github.com/yarnpkg/yarn/blob/3119382885ea373d3c13d6a846de743eca8c914b/src/package-linker.js#L74

Bf04d1ee6fa2216133b23af8f609c70a?s=128

がっちゃん

October 03, 2021
Tweet

Transcript

  1. © 2012-2021 BASE, Inc. 1 #phpcon2021 @gatchan0807 アプリケーションのデプロイを 高速化するためにnode_modulesに 手を出した話

    in PHP Conference Japan 2021 大LT大会 がっちゃん / 古賀 友輝(@gatchan0807)
  2. © 2012-2021 BASE, Inc. 2 #phpcon2021 @gatchan0807 BASEからの刺客最後の5人目です

  3. © 2012-2021 BASE, Inc. 3 #phpcon2021 @gatchan0807 所属: BASE株式会社 2021年1月入社

    Product Dev Division / Owners Experience Frontend Team (フロントエンドからオーナーさんの体験を改善していくチーム) deploy-kaizenプロジェクト / 新ショップSNS設定プロジェクト 等 自己紹介 がっちゃん(古賀 友輝) :@gatchan0807
  4. © 2012-2021 BASE, Inc. 4 © 2012-2021 BASE, Inc. 4

    今日お伝えしたいこと
  5. © 2012-2021 BASE, Inc. 5 #phpcon2021 @gatchan0807 デプロイを高速化して たくさんの機能をユーザーさんに 届けやすくしよう!

  6. © 2012-2021 BASE, Inc. 6 © 2012-2021 BASE, Inc. 6

    早速ですが
  7. © 2012-2021 BASE, Inc. 7 #phpcon2021 @gatchan0807 30分〜40分

  8. © 2012-2021 BASE, Inc. 8 #phpcon2021 @gatchan0807 1回のリリースにかかる時間(CI・確認込み) 30分〜40分

  9. © 2012-2021 BASE, Inc. 9 #phpcon2021 @gatchan0807 東海道新幹線(こだま) 東京駅〜小田原駅 33分

  10. © 2012-2021 BASE, Inc. 10 #phpcon2021 @gatchan0807 SNSシェア版のみのスライド 東京メトロ日比谷線 中目黒駅〜秋葉原駅

    32分
  11. © 2012-2021 BASE, Inc. 11 #phpcon2021 @gatchan0807 SNSシェア版のみのスライド JR東海道・山陽本線 快速

    網干行 大阪駅〜神戸駅 32分 ※NOT 新快速
  12. © 2012-2021 BASE, Inc. 12 © 2012-2021 BASE, Inc. 12

    BASEでのリリースに 関する課題感
  13. © 2012-2021 BASE, Inc. 13 #phpcon2021 @gatchan0807 ショップオーナーさんが持つコミュニティが もっと盛り上がるように! 出したい機能はたくさん

    \ショップオーナーさんの作業効率化のために!/ もっとたくさんのショップオーナーさんに 使ってもらうために! 使いやすいショップで 楽しくお買い物してもらうために!
  14. © 2012-2021 BASE, Inc. 14 #phpcon2021 @gatchan0807 数ヶ月のプロジェクトで 色んなところに影響起きるから 他と同時に出すの厳しいかも…

    だからこそお見合いもしばしば これもし不具合発生したら 切り戻しが大変だなぁ… サクッとこの文言修正だけ 出したいけど… 参考: とある週のリリースカレンダー (大きめのリリースの場合に登録する)
  15. © 2012-2021 BASE, Inc. 15 © 2012-2021 BASE, Inc. 15

    そうだ、1回のデプロイ速度を もっと早くしよう!
  16. © 2012-2021 BASE, Inc. 16 #phpcon2021 @gatchan0807 BASEでのデプロイ速度改善の 取り組み(フロントエンド編)

  17. © 2012-2021 BASE, Inc. 17 1 2 3 #phpcon2021 @gatchan0807

    フロントエンド(Vue側)の 変更がない場合は再ビルドしない フロントエンドを monorepo 化し、 1つ1つのビルドを小さくして 並列化できるようにする node_modulesをキャッシュして、 変更がない場合は再利用する 例えば…
  18. © 2012-2021 BASE, Inc. 18 1 2 3 #phpcon2021 @gatchan0807

    フロントエンド(Vue側)の 変更がない場合は再ビルドしない フロントエンドを monorepo 化し、 1つ1つのビルドを小さくして 並列化できるようにする node_modulesをキャッシュして、 変更がない場合は再利用する 例えば…
  19. © 2012-2021 BASE, Inc. 19 #phpcon2021 @gatchan0807 BASEでのデプロイ速度改善の 取り組み(フロントエンド編) SNSシェア版のみのスライド

    node_modulesのキャッシュ によって、ここがまるっと なくなる見込み!
  20. © 2012-2021 BASE, Inc. 20 #phpcon2021 @gatchan0807 yarn.lockファイルを元にチェックサム 作って変更が無いかをチェックして、 node_modulesをZIPファイル化!

    (CIとかでよくあるアレ) 引用元: https://circleci.com/docs/ja/2.0/caching/
  21. © 2012-2021 BASE, Inc. 21 © 2012-2021 BASE, Inc. 21

    ハマりどころ
  22. © 2012-2021 BASE, Inc. 22 1 2 3 #phpcon2021 @gatchan0807

    キャッシュスクリプトのローカルデバッグ 大変(1回の実行で1分ほどかかってた) ハマったポイント 思ったよりZIPでのキャッシュ作成・リストア 処理重い(高速化になってない!) ZIP時にシンボリックリンク設定が 吹っ飛んでパッケージが見つからん
  23. © 2012-2021 BASE, Inc. 23 1 2 3 #phpcon2021 @gatchan0807

    ハマったポイント 思ったよりZIPでのキャッシュ作成・リストア 処理重い(高速化になってない!) => 特に重くて使わないのをキャッシュ対象から外す ZIP時にシンボリックリンク設定が 吹っ飛んでパッケージが見つからん => ちゃんとコマンドオプション設定しましょう キャッシュスクリプトのローカルデバッグ 大変(1回の実行で1分ほどかかってた) => 一旦小さいプロジェクト作ってやりましょう
  24. © 2012-2021 BASE, Inc. 24 #phpcon2021 @gatchan0807 ファイル自体を圧縮せずに1つのファイルにまとめるだけの 設定でも重い(node_modules配下のファイル数の暴力) 思ったよりZIPでのキャッシュ作成・

    リストア処理重い(高速化になってない!) Storybook、Jest、Lint関連の ビルドに直接関係ない ライブラリを対象から外す (特にStorybookのプラグインを色々使っている場合、この子とても重い)
  25. © 2012-2021 BASE, Inc. 25 #phpcon2021 @gatchan0807 思ったよりZIPでのキャッシュ作成・ リストア処理重い(高速化になってない!) キャッシュ対象外のパッケージはこんな感じで

    別のテキストファイルに分けてリストアップし、 スクリプト側から呼び出してZIPコマンドのオプションに指定 SNSシェア版のみのスライド
  26. © 2012-2021 BASE, Inc. 26 #phpcon2021 @gatchan0807 node_modules 内部に.binディレクトリがあり、 そこにパッケージ内の

    各JavaScript / バイナリファイルへのシンボリックリンク設定が詰まっている ⇒tscコマンド等が実行される際にはここを参照されるので、対象のJavaScript ファイルが存在しないエラーが発生する ZIP時にシンボリックリンク設定が 吹っ飛んでパッケージが見つからん SNSシェア版のみのスライド frontend/node_modules/.bin/tsc internal/modules/cjs/loader.js:796 throw err; ^ Error: Cannot find module '../lib/tsc.js' Require stack: /** ~~~ 省略 ~~~ **/ 参考: yarnの該当の実装はこの辺 ⇒ https://github.com/yarnpkg/yarn/blob/3119382885ea373d3c13d6a846de743eca8c914b/src/package-linker.js#L74
  27. © 2012-2021 BASE, Inc. 27 © 2012-2021 BASE, Inc. 27

    皆さんのPHPアプリケーションの デプロイ高速化の 一助になれば幸いです!!
  28. © 2012-2021 BASE, Inc. 28 #phpcon2021 @gatchan0807 ご清聴ありがとう ございました! もしBASEのこういった活動に興味あれば一緒にやりましょう!

    Twitter等でご連絡ください! > @gatchan0807