アプリケーションのデプロイを高速化するために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

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