폐쇄망(air-gapped) 설치
인터넷이 차단된 폐쇄망 환경에서 Sophonz Browser SDK를 설치하는 네 가지 방법을 안내합니다.
폐쇄망(인터넷이 차단된 환경)에서 Sophonz Browser SDK를 설치하는 방법입니다. Web 앱과 WebView에서 모두 적용 가능하며, 아래 설치 방법 중 하나를 선택하여 진행합니다.
NOTE — 적용 범위
Web 앱과 WebView에서 모두 적용 가능하며, 아래 설치 방법 중 하나를 선택하여 진행합니다.
TIP — 서비스 키 발급
Sophonz 콘솔 로그인 → 글로벌 관리 > 서비스 관리에서 서비스 등록 후 키 발급. 모든 설치 완료 후 계측은 자동으로 수행되며, 커스텀 데이터 수집 등 추가 사용법은 Sophonz Browser SDK API 문서를 참고하세요.
Option 1: 파일 직접 다운로드 후 스크립트 추가
-
폐쇄망에서는 CDN을 통해 직접 실행할 수 없으므로 인터넷이 연결된 환경에서 미리 번들링된 자바스크립트 파일을 다운로드합니다.
다운로드 URL:
https://cdn.sophonz.com/release/npm/@browser-sdk/latest/index.js -
다운로드된
index.js파일을 적절한 이름sophonz-agent.js로 변경하여 프로젝트 내부에 포함시킵니다. 아래 예시는 프로젝트 내public폴더 내에 위치하고 있다고 가정합니다. -
아래 코드와 같이
<head>태그 안에 추가합니다.
<script src="./public/sophonz-agent.js">
</script>
<script>
window.SophonzSDK.init({
collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
appName: '{{NAME_OF_YOUR_SERVICE}}',
appVersion: '{{VERSION_OF_YOUR_SERVICE}}',
appKey: '{{KEY_OF_YOUR_SERVICE}}',
project: '{{SERVICE_NAMESPACE}}',
deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
});
</script>CAUTION — 패키지 이름 설정
appName은 서비스 등록 시 입력한 패키지명과 동일해야 하며 패키지 이름에는 a-z, A-Z, 0-9, -, _, .만 입력할 수 있습니다.
-
collectorUrl,appName,appVersion,appKey값은 필수값입니다.collectorUrl주소는 내부망 또는 외부망 접근 환경에 맞추어 설정해야 합니다. IP 주소로 적용할 경우http://xxx.xxx.xxx.xxx:4318형태로 입력합니다.appName앱 이름 (서비스 등록할 때의 패키지명)appVersion앱 버전appKey앱 키project프로젝트deploymentEnvironment배포 환경
-
모든 준비가 완료되었습니다. 이후 모든 계측은 자동으로 수행됩니다. 커스텀 데이터 수집이 필요한 경우 Sophonz Browser SDK API 문서를 참조하세요.
Option 2: npm 또는 yarn으로 설치 후 초기화
- Web App 프로젝트에
@sophonz/browser-sdk패키지를 설치합니다.
npm
npm install @sophonz/browser-sdkyarn
yarn add @sophonz/browser-sdk- Web App 프로젝트 entry point에
@sophonz/browser-sdk를 import하고,init으로 SDK를 초기화합니다. 아래는 React와 Vue.js 2의 예시입니다.
- React
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./my-app";
import SophonzSDK from "@sophonz/browser-sdk";
SophonzSDK.init({
collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
appName: '{{NAME_OF_YOUR_SERVICE}}',
appVersion: '{{VERSION_OF_YOUR_SERVICE}}',
appKey: '{{KEY_OF_YOUR_SERVICE}}',
project: '{{SERVICE_NAMESPACE}}',
deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
});
createRoot(document.getElementById("root")!).render(
<StrictMode>
<App />
</StrictMode>
);- Vue.js 2
import Vue from "vue";
import App from "./app.vue";
import router from "./router";
import store from "./store";
import SophonzSDK from "@sophonz/browser-sdk";
SophonzSDK.init({
collectorUrl: '{{SOPHONZ_TRACES_COLLECTOR_URL}}',
appName: '{{NAME_OF_YOUR_SERVICE}}',
appVersion: '{{VERSION_OF_YOUR_SERVICE}}',
appKey: '{{KEY_OF_YOUR_SERVICE}}',
project: '{{SERVICE_NAMESPACE}}',
deploymentEnvironment: '{{DEPLOYMENT_ENVIRONMENT}}',
});
const app = new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");CAUTION — 패키지 이름 설정
appName은 서비스 등록 시 입력한 패키지명과 동일해야 하며 패키지 이름에는 a-z, A-Z, 0-9, -, _, .만 입력할 수 있습니다.
-
collectorUrl,appName,appVersion,appKey값은 필수값입니다.collectorUrl주소는 내부망 또는 외부망 접근 환경에 맞추어 설정해야 합니다. IP 주소로 적용할 경우http://xxx.xxx.xxx.xxx:4318형태로 입력합니다.appName앱 이름 (서비스 등록할 때의 패키지명)appVersion앱 버전appKey앱 키project프로젝트deploymentEnvironment배포 환경
-
모든 준비가 완료되었습니다. 이후 모든 계측은 자동으로 수행됩니다. 커스텀 데이터 수집이 필요한 경우 Sophonz Browser SDK API 문서를 참조하세요.
Option 3: package.json에 직접 의존성 추가
-
sophonz-browser-sdk-latest.tgz파일 다운로드https://cdn.sophonz.com/release/npm/@browser-sdk/latest/sophonz-browser-sdk-latest.tgz -
프로젝트 내부 적절한 경로에 배치 후 설치합니다.
npm install /path/to/sophonz-browser-sdk-latest.tgz예를 들어 프로젝트 구조가 아래와 같이 되어 있다면:
.
├── README.md
├── index.html
├── package-lock.json
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.vue
│ ├── assets
│ │ └── vue.svg
│ ├── components
│ │ └── HelloWorld.vue
│ ├── main.ts
│ ├── style.css
│ └── vite-env.d.ts
├── third-party-packages
│ └── sophonz
│ └── sophonz-browser-sdk-latest.tgz
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
└── vite.config.ts아래와 같이 설치합니다.
npm install ./third-party-packages/sophonz/sophonz-browser-sdk-latest.tgz이후 Option 2와 같이 설정 진행하면 됩니다.
Option 4: npm install을 사용할 수 없는 경우
-
sophonz-browser-sdk-latest.tgz파일 다운로드 후 압축 해제https://cdn.sophonz.com/release/npm/@browser-sdk/latest/sophonz-browser-sdk-latest.tgz -
프로젝트
node_modules/@sophonz/browser-sdk폴더에 압축 해제된package내의 파일들을 복사합니다.
node_modules/@sophonz/browser-sdk
├── CHANGELOG.md
├── README.md
├── build
│ ├── index.d.ts
│ ├── index.js
│ └── sri-hash.txt
└── package.json- 프로젝트의
package.json을 열고dependencies에"@sophonz/browser-sdk": "latest"를 추가합니다. - 이후 Option 2와 같이 설정 진행하면 됩니다.