preface

Let’s talk about why there is a need. Because our code is mirror-packaged, the image only contains the compiled code! To ensure code consistency, we outline the build as follows: development environment can be built, test environment can be built. Formal environments do not allow builds. Test line stable code mirror, will only copy mirror to the formal environment directly used! Do not build in a formal environment, avoid uncontrollable!

The problem

background

Because the entire technical architecture is micro service plus micro front end, so link tracking is necessary, can be quickly located! For example, kibana, a kit with front-end access to ELK Stack, has to install the corresponding proxy module to report information! Official documentation: Vue Integration

specific

Since the report agent is initialized within the project, the general rule can only be confirmed at build time, such as by injecting environment variables from different build commands! But as we said from the beginning, we need to ensure code consistency! The multiple build command approach doesn’t work here, so what’s the way around it?

Landing posture

Gateway layer processing

Since js can execute on request correctly, we can send a js containing the configuration in our security domain to inject a value into the global object (window)! How to distribute a JS file, with Lua can do it!

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

The advantage of this is that different environment gateways can distribute state, decoupling the environment from the front-end project! The advantage of this is that different environment gateways can distribute state, decoupling the environment from the front-end project! If the project is not codomain, CORS must also be configured!! The main part of the header must be open!

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,tra ceparent';
# kibana 7.x relies on the traceparent field
Copy the code

Entry page

Vue CLI initialization project entry page supports handlbars syntax implementation. Because the file cannot be found in development mode, a file exception will be thrown. So either the agent is not initialized in development mode, or the development environment’s is initialized by default. We are using the default development environment and do not introduce the gateway to deliver JS (because the local root path is not)!

<! DOCTYPEhtml>
<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>The < %} % ><title>Micro front-end deployment aggregation</title>
</head>
</html>

Copy the code
// router.js
import VueRouter from 'vue-router';
import pkgJson from '.. /.. /package.json';
import { ApmVuePlugin } from '@elastic/apm-rum-vue';
Vue.use(ApmVuePlugin, {
  router,
  config: {
    // Set the desired service name (allowed characters: A-z, A-z, 0-9, -, _, and Spaces)
    serviceName: pkgJson.name,
    serviceVersion: pkgJson.version,
    // Set the custom APM Server URL (default: http://localhost:8200)
    serverUrl: window && window._H3_APM_SERVER_URL_ ? window._H3_APM_SERVER_URL_ : 'http://xxxxxxx.net',}});Copy the code

rendering

local

The server

conclusion

If there is something wrong, please leave a message and correct it in time. Thank you for reading!