Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

© 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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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