Runtime asset 배포

MonitorDog Web SDK는 브라우저 런타임에 필요한 암호화 모델 파일과 ONNX Runtime wasm 파일을 npm package 안에 포함합니다.

환경별 처리 방식

연동 환경	기본 처리	추가 작업
Vite	npm install 후 일반 vite build	없음
Webpack 5	SDK import 후 일반 production build	없음
Rspack	SDK import 후 일반 production build	없음
Next.js client bundle	클라이언트 컴포넌트에서 SDK import 후 일반 build	없음
JSP/WAR + 번들러 frontend	frontend build output을 WAR에 포함	별도 copy 없음
JSP/WAR static, script tag, manual deploy	번들러가 package asset을 처리하지 않음	monitordog-copy-assets 실행
CDN, custom static path, legacy bundler	직접 노출 경로를 정해야 함	CLI copy + runtimeAssetBaseUrl

일반 번들러 앱

Vite, Webpack 5, Rspack 같은 ESM asset-aware 번들러를 쓰는 앱은 별도 plugin이나 copy script가 필요하지 않습니다.

npm install @monitordog/detector
npm run build

SDK 코드가 아래 파일을 정적으로 참조하므로 앱 번들러가 build output에 포함합니다.

• detector-320.onnx.enc
• detector-416.onnx.enc
• detector-640.onnx.enc
• ort-wasm-simd-threaded.mjs
• ort-wasm-simd-threaded.wasm

이 기본 흐름에서는 MonitorDogDetector.init()에 runtimeAssetBaseUrl을 넣지 않습니다.

Static 또는 WAR 수동 배포

번들러 없이 package 파일을 직접 배치하거나, WAR packaging 전에 static 경로를 직접 구성해야 하는 경우에는 SDK CLI를 사용합니다.

npx monitordog-copy-assets src/main/webapp/assets/dist/assets

monitordog-copy-assets <target-dir>에서 <target-dir>은 브라우저에 노출되는 sdk/, ort/의 상위 디렉터리입니다. CLI는 target root를 지우지 않고 <target-dir>/sdk, <target-dir>/ort만 교체합니다.

서버에서 직접 제공할 때는 MIME mapping을 지정합니다.

• .mjs: application/javascript
• .wasm: application/wasm
• .enc: application/octet-stream

Custom static path

CDN이나 legacy bundler fallback처럼 asset을 /monitordog-sdk/ 같은 별도 경로에서 제공한다면 CLI로 복사한 뒤 runtimeAssetBaseUrl을 지정합니다.

await MonitorDogDetector.init({
  apiBaseUrl: "https://api.monitor.dog/v1",
  runtimeAssetBaseUrl: "/monitordog-sdk",
  sessionTokenProvider,
  onDetect,
});

이 옵션은 모델 선택이나 토큰/키 API 계약을 바꾸지 않습니다. 브라우저가 SDK runtime byte를 fetch하는 위치만 바꿉니다.