アプリケーションのデプロイを高速化するためにnode_modulesに手を出した話

#phpcon2021 @gatchan0807 アプリケーションのデプロイを 高速化するためにnode_modulesに 手を出した話 in PHP Conference Japan 2021 大LT大会 がっちゃん / 古賀 友輝（@gatchan0807） © 2012-2021 BASE, Inc. 1

BASEからの刺客最後の5人目です © 2012-2021 BASE, Inc. #phpcon2021 @gatchan0807 2

#phpcon2021 @gatchan0807 自己紹介 がっちゃん（古賀 友輝） ：@gatchan0807 所属: BASE株式会社 2021年1月入社 Product Dev Division / Owners Experience Frontend Team （フロントエンドからオーナーさんの体験を改善していくチーム） deploy-kaizenプロジェクト / 新ショップSNS設定プロジェクト 等 © 2012-2021 BASE, Inc. 3

• https://twitter.com/gatchan0807

今日お伝えしたいこと © 2012-2021 BASE, Inc. 4

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

早速ですが © 2012-2021 BASE, Inc. 6

#phpcon2021 @gatchan0807 30分〜40分 © 2012-2021 BASE, Inc. 7

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

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

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

#phpcon2021 @gatchan0807 ※NOT 新快速 JR東海道・山陽本線 快速 網干行 大阪駅〜神戸駅 32分 SNSシェア版のみのスライド © 2012-2021 BASE, Inc. 11

BASEでのリリースに 関する課題感 © 2012-2021 BASE, Inc. 12

#phpcon2021 @gatchan0807 出したい機能はたくさん ＼ショップオーナーさんの作業効率化のために！／ ショップオーナーさんが持つコミュニティが もっと盛り上がるように！ もっとたくさんのショップオーナーさんに 使ってもらうために！ 使いやすいショップで 楽しくお買い物してもらうために！ © 2012-2021 BASE, Inc. 13

だからこそお見合いもしばしば #phpcon2021 @gatchan0807 参考: とある週のリリースカレンダー （大きめのリリースの場合に登録する） これもし不具合発生したら 切り戻しが大変だなぁ… サクッとこの文言修正だけ 出したいけど… 数ヶ月のプロジェクトで 色んなところに影響起きるから 他と同時に出すの厳しいかも… © 2012-2021 BASE, Inc. 14

そうだ、1回のデプロイ速度を もっと早くしよう！ © 2012-2021 BASE, Inc. 15

#phpcon2021 @gatchan0807 BASEでのデプロイ速度改善の 取り組み（フロントエンド編） © 2012-2021 BASE, Inc. 16

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

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

#phpcon2021 @gatchan0807 BASEでのデプロイ速度改善の 取り組み（フロントエンド編） node_modulesのキャッシュ によって、ここがまるっと なくなる見込み！ SNSシェア版のみのスライド © 2012-2021 BASE, Inc. 19

#phpcon2021 @gatchan0807 yarn.lockファイルを元にチェックサム 作って変更が無いかをチェックして、 node_modulesをZIPファイル化！ （CIとかでよくあるアレ） © 2012-2021 BASE, Inc. 引用元: https://circleci.com/docs/ja/2.0/caching/ 20

• https://circleci.com/docs/ja/2.0/caching/

ハマりどころ © 2012-2021 BASE, Inc. 21

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

#phpcon2021 @gatchan0807 ハマったポイント 1 思ったよりZIPでのキャッシュ作成・リストア 処理重い（高速化になってない！） => 特に重くて使わないのをキャッシュ対象から外す 2 ZIP時にシンボリックリンク設定が 吹っ飛んでパッケージが見つからん => ちゃんとコマンドオプション設定しましょう 3 キャッシュスクリプトのローカルデバッグ 大変（1回の実行で1分ほどかかってた） => 一旦小さいプロジェクト作ってやりましょう © 2012-2021 BASE, Inc. 23

思ったよりZIPでのキャッシュ作成・ リストア処理重い（高速化になってない！） #phpcon2021 @gatchan0807 ファイル自体を圧縮せずに1つのファイルにまとめるだけの 設定でも重い（node_modules配下のファイル数の暴力） Storybook、Jest、Lint関連の ビルドに直接関係ない ライブラリを対象から外す （特にStorybookのプラグインを色々使っている場合、この子とても重い） © 2012-2021 BASE, Inc. 24

思ったよりZIPでのキャッシュ作成・ リストア処理重い（高速化になってない！） #phpcon2021 @gatchan0807 キャッシュ対象外のパッケージはこんな感じで 別のテキストファイルに分けてリストアップし、 スクリプト側から呼び出してZIPコマンドのオプションに指定 SNSシェア版のみのスライド © 2012-2021 BASE, Inc. 25

ZIP時にシンボリックリンク設定が 吹っ飛んでパッケージが見つからん node_modules 内部に.binディレクトリがあり、 #phpcon2021 @gatchan0807 そこにパッケージ内の 各JavaScript / バイナリファイルへのシンボリックリンク設定が詰まっている ⇒tscコマンド等が実行される際にはここを参照されるので、対象のJavaScript ファイルが存在しないエラーが発生する 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 SNSシェア版のみのスライド © 2012-2021 BASE, Inc. 26

• https://github.com/yarnpkg/yarn/blob/3119382885ea373d3c13d6a846de743eca8c914b/src/package-linker.js#L74

皆さんのPHPアプリケーションの デプロイ高速化の 一助になれば幸いです！！ © 2012-2021 BASE, Inc. 27

#phpcon2021 @gatchan0807 ご清聴ありがとう ございました！ もしBASEのこういった活動に興味あれば一緒にやりましょう！ Twitter等でご連絡ください！ > @gatchan0807 © 2012-2021 BASE, Inc. 28