Skip to main content

Runtime asset 배포

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

환경별 처리 방식​

연동 환경기본 처리추가 작업
Vitenpm install 후 일반 vite build없음
Webpack 5SDK import 후 일반 production build없음
RspackSDK import 후 일반 production build없음
Next.js client bundle클라이언트 컴포넌트에서 SDK import 후 일반 build없음
JSP/WAR + 번들러 frontendfrontend 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하는 위치만 바꿉니다.

Table of Contents

Share This Contents