Slide 1

Slide 1 text

TypeScriptで 負荷テストを書こう 〜k6のシングルバイナリの秘密〜 どら (@dora1998) 2024/8/24 フロントエンドカンファレンス北海道2024

Slide 2

Slide 2 text

どら / 竹内 実 •2021年 新卒入社 •WINTICKET Web テックリードマネージャー •最近はstorycap-testrunを導入して 快適なVRT生活が送れるようになりました GitHub: @dora1998 X: @d0ra1998

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

WINTICKET Webの技術スタック •React, styled-components, TanStack Query, Redux •Fastify, Cloud Run, Fastly 最近の取り組み🔽

Slide 5

Slide 5 text

WINTICKET Webの技術スタック 8/27(火) 19:00- @ オンライン&オフライン(渋谷) Rei Kato @cut0 マイグレーションコード自作して File-Based Routing に自動移行!! 〜250 ページの歴史的経緯を添えて〜

Slide 6

Slide 6 text

k6とは •負荷試験ツール •Grafana LabsがOSSとして開発している Grafana Cloud k6というSaaSでも提供されている •テストシナリオがJavaScriptで記述できる https://k6.io/

Slide 7

Slide 7 text

k6でシナリオを書いてみる https://k6.io/docs/get-started/running-k6/#using-options

Slide 8

Slide 8 text

JS単体でも実行できる?

Slide 9

Slide 9 text

JS単体でも実行できる? k6パッケージ内が 参照できない…?

Slide 10

Slide 10 text

パッケージを見ると… https://www.npmjs.com/package/k6?activeTab=code ダミーと 書いてある!

Slide 11

Slide 11 text

よくよく見てみると… モジュールのimport方法を見てみる

Slide 12

Slide 12 text

よくよく見てみると… k6 is not NodeJS, nor is it a browser. Packages that rely on APIs provided by NodeJS, for instance the os and fs modules, will not work in k6. The same goes for browser-specific APIs like the window object. https://k6.io/docs/using-k6/modules/#bundling-node-modules (筆者訳) k6はNodeJSでもブラウザでもありません。NodeJSが提供するAPIに依存するパッケー ジはk6では動きません。例えば、これにはosやfsモジュールなどが含まれます。window オブジェクトのようなブラウザ固有のAPIについても同様です。 シナリオ実行環境はNode.jsでもブラウザでもない

Slide 13

Slide 13 text

k6のエンジン・ランタイム環境 • JSエンジンには grafana/sobek が使われている dop251/goja のフォーク • k6/http などのモジュールはk6のランタイム環境のみで提供されている k6内にGoで実装されているので、当然npmパッケージに実装はない https://github.com/grafana/k6/blob/master/js/modules/k6/http/http.go 参考)JavaScriptエンジンから見るランタイム https://speakerdeck.com/shqld/2024-04-25 参考)ランタイムとは何か https://speakerdeck.com/yosuke_furukawa/javascript-runtime-tohana nika

Slide 14

Slide 14 text

TypeScriptサポート • 今年6月リリースの v0.52.0 で TypeScript が直接実行できる機能が追加された • 内部的には esbuild でトランスパイルされる

Slide 15

Slide 15 text

TypeScriptサポート • 記述する際は、Node.jsで実行するプログラムと同様に配置した k6パッケージの型定義は @types/k6 で入手できる

Slide 16

Slide 16 text

ハマったところ • ローカルファイルのimport時は .ts 拡張子をつける必要がある esbuildの呼び出し箇所で拡張子がTSの時だけTS Loaderが使われる模様 • JSLibをimportする際に型をつける方法がわからない Denoのプログラムとして書いて、 @ts-self-types とかで提供できるのかも?(未検証)

Slide 17

Slide 17 text

よかったところ • TypeScriptで自由に書けるので、 HTTPクライアントラッパーなどの便利関数が用意できる 開発環境で必要なBasic認証などのヘッダー追加する処理とか… • k6がシングルバイナリで動く 何もない負荷試験用のインスタンスにバイナリとTypeScriptのシナリオだけ放り込めば動く

Slide 18

Slide 18 text

ありがとうございました! We’re hiring! @d0ra1998