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

最新推荐文章于 2023-10-07 09:55:05 发布

crper

最新推荐文章于 2023-10-07 09:55:05 发布

阅读量827

点赞数

分类专栏： Vue折腾记文章标签： kibana vue

本文链接：https://blog.csdn.net/crper/article/details/108007216

版权

本文介绍了在保持代码一致性的情况下，如何在Vue项目中实现Kibana的接入，并通过网关层处理在不同环境下动态上报域。通过网关下发配置JS，实现了前端项目与环境的解耦，确保在本地和服务器上都能正确运行。

摘要由CSDN通过智能技术生成

前言

先说说为什么会有这个需求.
因为我们代码是镜像打包,
镜像只包含编译后的代码!

为了保证代码的一致性,
我们概要构建方式是:
开发环境可以构建,
测试环境可以构建.
正式环境不允许构建.

测试线稳定的代码镜像,
只会单纯的拷贝镜像到正式环境直接用!
不在正式环境构建,避免不可控!

问题

背景

因为整个技术架构是微服务加微前端,
所以链路追踪是必要的,可以快速定位!
像前端要接入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这个字段