Vue kibana接入及在不同环境下初始上报域(曲线救国)

CRPER

发布于 2022-03-08 14:35:20

9450

发布于 2022-03-08 14:35:20

前言

先说说为什么会有这个需求. 因为我们代码是镜像打包, 镜像只包含编译后的代码! 为了保证代码的一致性, 我们概要构建方式是: 开发环境可以构建, 测试环境可以构建. 正式环境不允许构建. 测试线稳定的代码镜像, 只会单纯的拷贝镜像到正式环境直接用! 不在正式环境构建,避免不可控!

问题

背景

因为整个技术架构是微服务加微前端, 所以链路追踪是必要的,可以快速定位! 像前端要接入ELK Stack的套件kibana, 上报信息就得安装对应的代理模块! 官方文档: Vue integration

具体

因为上报代理是在项目内初始化,常规只能在构建时确认, 比如通过不同的构建命令行注入环境变量区分! 但是如最开始所言,我们需要保证代码一致性! 也就是多构建命令的方式并不适合我们这里, 那有什么法子可以绕过呢?

落地姿势

网关层处理

因为js可以在正确请求后自执行, 那么在我们安全域内下发一个包含配置的js, 达到往全局对象(window)注入一个值的效果! 如何下发一个js文件,用lua就可以做到了!

  location /apmServerUrl.js {
    default_type "text/javascript;charset=UTF-8";   
    content_by_lua_block {
      ngx.say("window._H3_APM_SERVER_URL_ = 'xxx');
    }
  }

这样做的好处就是不同环境网关派发状态即可,把环境和前端项目解耦了! 这样做的好处就是不同环境网关派发状态即可, 把环境和前端项目解耦了! 若是项目非同域的,还必须配置CORS!!! 主要是部分header必须开放!

add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Methods 'GET, POST, PUT,DELETE,OPTIONS';
add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization,traceparent';
# kibana 7.x 依赖traceparent这个字段

入口网页

Vue CLI初始化项目入口页支持handlbars的判断语法实现, 为什么要判断?因为开发模式下肯定找不到那个文件,会抛出文件异常. 所以开发模式下要么不初始化代理,要么就默认初始化开发环境的. 我们这边是采用默认开发环境的及不引入网关下发js(因为本地根路径无)!

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <% if (process.env.NODE_ENV !== 'development') { %>
    <script src="/apmServerUrl.js"></script>
  <% } %>
  <title>微前端部署聚合</title>
</head>
</html>

// router.js
import VueRouter from 'vue-router';
import pkgJson from '../../package.json';
import { ApmVuePlugin } from '@elastic/apm-rum-vue';
Vue.use(ApmVuePlugin, {
  router,
  config: {
    // 设置所需的服务名称（允许使用的字符：a-z、A-Z、0-9、-、_ 和空格）
    serviceName: pkgJson.name,
    serviceVersion: pkgJson.version,
    // 设置定制 APM Server URL（默认值：http://localhost:8200）
    serverUrl: window && window._H3_APM_SERVER_URL_ ? window._H3_APM_SERVER_URL_ : 'http://xxxxxxx.net',
  },
});