秒针HTML5监测SDK部署指南
<h3>说明</h3>
<ul>
<li>
<p>本文仅用于秒针系统HTML5监测SDK的部署指引,旨在帮助并指引客户落地HTML5监测SDK;</p>
</li>
<li>本文声明之内容及其修改权、更新权和最终解释权均属秒针系统。未经许可,禁止任何形式地对外披露、公布或泄露本文信息。</li>
</ul>
<hr />
<h3>HTML5监测SDK</h3>
<pre><code>1. HTML5监测SDK是一款对移动端HTML5应用专业分析统计工具,支持普通的html页、微信内打开HTML5页等;
2. 监测并上报用户在PC端网页或HTML5活动中事件数据,为数据效果监控、自定义事件统计分析、渠道转化分析等提供数据采集支持。</code></pre>
<hr />
<h3>系统配置需求</h3>
<h4>硬件环境(实例规格)</h4>
<table>
<thead>
<tr>
<th>规格</th>
<th style="text-align: left;">配置</th>
</tr>
</thead>
<tbody>
<tr>
<td>操作系统</td>
<td style="text-align: left;">Linux</td>
</tr>
<tr>
<td>CPU</td>
<td style="text-align: left;">8核 +</td>
</tr>
<tr>
<td>内存</td>
<td style="text-align: left;">32GB +</td>
</tr>
<tr>
<td>数量</td>
<td style="text-align: left;">1台</td>
</tr>
</tbody>
</table>
<h4>软件环境</h4>
<table>
<thead>
<tr>
<th>名称</th>
<th style="text-align: left;">版本号</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>Node</td>
<td style="text-align: left;">v8.11.1+</td>
<td>JavaScript 运行环境</td>
</tr>
<tr>
<td>gulp</td>
<td style="text-align: left;">3.9.1</td>
<td>自动构建工具,通过Node安装</td>
</tr>
<tr>
<td>pm2</td>
<td style="text-align: left;">3.2.3</td>
<td>node进程管理工具,通过Node安装</td>
</tr>
<tr>
<td>Git</td>
<td style="text-align: left;">1.7.1+</td>
<td>版本控制工具</td>
</tr>
<tr>
<td>Nginx</td>
<td style="text-align: left;">1.10.2 +</td>
<td>反向代理,配置SDK域名</td>
</tr>
</tbody>
</table>
<ul>
<li>若没有版本控制工具,需要手动copy项目到服务器指定目录</li>
</ul>
<hr />
<h3>项目结构</h3>
<table>
<thead>
<tr>
<th>文件名</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>controllers</td>
<td>控制层</td>
</tr>
<tr>
<td>config</td>
<td>配置文件</td>
</tr>
<tr>
<td>dist</td>
<td>编译后存储目录</td>
</tr>
<tr>
<td>src/js</td>
<td>主文件目录</td>
</tr>
<tr>
<td>wxTracker.js</td>
<td>主文件</td>
</tr>
<tr>
<td>package.json</td>
<td>node依赖配置文件</td>
</tr>
<tr>
<td>ReadMe.md</td>
<td>说明文件</td>
</tr>
</tbody>
</table>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/5c7b6458eacf9da680c6e718c6ff2367?showdoc=.jpg" alt="" /></p>
<hr />
<h3>前期准备</h3>
<pre><code class="language-java">// 准备SDK服务域名
http(s)://ww.cn.miaozhen.com
// 准备好上报/收数服务域名
http(s)://withwinds.cn.miaozhen.com/e.gif</code></pre>
<h3>项目部署</h3>
<ul>
<li>
<p>Step 1</p>
<pre><code class="language-java">1.修改wxTracker.js文件,配置收数服务上报地址;(跟上述收数服务接收一致)
eg: http(s)://withwinds.cn.miaozhen.com/e.gif</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/8aa9655ee5bcecc5c6d98850a7d1d9b9?showdoc=.jpg" alt="" /></p>
<pre><code class="language-java">2.修改config.js文件,修改SDK服务端口,当前端口为8052。</code></pre>
</li>
<li>
<p>Step 2</p>
<pre><code class="language-java">修改后的代码托管到Git管理
若没有版本控制工具,则本步骤忽略</code></pre>
</li>
<li>
<p>Step 3</p>
<pre><code class="language-java">登录目标服务器,首次git clone项目到服务器指定目录,后续更新项目git pull。(若没有版本控制工具,需要手动copy项目到服务器指定目录)。
项目名称h5-tracking-code,若服务器指定目录地址为/data/service/,则项目目录为/data/service/h5-tracking-code/</code></pre>
</li>
<li>
<p>Step 4</p>
<pre><code class="language-java">// 首次需安装构建工具gulp和node进程管理工具pm2
npm install -g gulp@3.9.1
npm install -g pm2</code></pre>
</li>
<li>
<p>Step 5</p>
<pre><code class="language-java">// 进入项目目录,gulp构建项目
$ cd /data/service/h5-tracking-code/
$ gulp // gulp编译项目
// 编译后pm2管理项目启动
$ pm2 start app.js --name=tracking-code
// 查看进程
$ pm2 list
// 重启进程
$ pm2 restart 0 // 0为项目id
// 关闭进程
$ pm2 stop 0 // 0为项目id</code></pre>
</li>
<li>
<p>Step 6</p>
<pre><code class="language-java">查看项目运行状态/status,确保服务落地。
online 进程启动
stoped 进程关闭</code></pre>
<p><img src="https://www.showdoc.cc/server/api/common/visitfile/sign/c29b52011597b181b0420f915e9172d1?showdoc=.jpg" alt="" /></p>
</li>
<li>Step 7
<pre><code class="language-java">1.SDK服务部署成功后,服务访问地址 http://xxxx.xx.xxx:8052/wxTracker.js
2.配置Nginx,映射为SDK服务地址 http(s)://ww.cn.miaozhen.com/sdk/wxTracker.js,供H5活动接入SDK时调用</code></pre></li>
</ul>