修改源码定制SkyWalking-UI访问路径

SkyWalking简介

Apache SkyWalking是一款开源的观测性能平台，专为分布式系统设计，提供了全面的应用性能监控（APM）、服务网格观测、以及分布式追踪等功能。它帮助开发者和运维人员深入洞察应用的性能状况，快速定位问题根源，从而提升系统的稳定性和效率。SkyWalking的核心组件包括OAP服务器（Observability Analysis Platform）和UI界面，两者协同工作，为用户提供强大的可视化监控能力。

SkyWalking-UI简介

SkyWalking-UI是SkyWalking的可视化界面，它负责展示从OAP服务器收集来的监控数据，包括服务拓扑图、追踪详情、性能指标、告警信息等。通过SkyWalking-UI，用户可以直观地了解系统的健康状况，进行性能分析，以及配置监控规则。UI的设计旨在易于使用，同时支持高度定制化，以满足不同场景下的监控需求。

定制UI访问路径并重新编译

在某些场景下，用户可能需要将SkyWalking-UI的访问路径固定为特定的URL前缀，例如/skywalking-ui，以便更好地融入现有系统架构或便于管理。要实现这一需求，需要对SkyWalking-UI源码进行适当修改并编译。以下是一个简化的编译与配置步骤指南，适用于具有Java和Maven环境的用户。

准备工作

首先你得有JDK、Maven，版本要求参考官网。

拉取代码

git clone --recurse-submodules https://github.com/apache/skywalking.git
cd skywalking/
git checkout v9.7.0 # 根据你的需求切换版本

修改SkyWalking-UI源码

需要修改3处源码：

• skywalking-ui/src/graphql/fetch.ts

  async function query(param: { queryStr: string; conditions: { [key: string]: unknown } }) {
    const res: AxiosResponse = await axios.post(
      "/graphql", // 改为 /skywalking-ui/graphql

• skywalking-ui/src/graphql/index.ts

      return axios
        .post(
          "/graphql", // 改为 /skywalking-ui/graphql

• skywalking-ui/vite.config.ts

  export default ({ mode }: ConfigEnv): UserConfig => {
    const { VITE_SW_PROXY_TARGET } = loadEnv(mode, process.cwd());
    return {
      base: "/skywalking-ui", // 加这一行

编译

参考官方链接。

./mvnw clean package -Dmaven.test.skip

编译完成后，会在dist生成一个压缩包。

制作skywalking-ui镜像

Dockerfile在docker/ui，适当改一下：

FROM eclipse-temurin:17-jre
ENV JAVA_OPTS=" -Xms256M " \
    SW_OAP_ADDRESS="http://127.0.0.1:12800" \
    SW_ZIPKIN_ADDRESS="http://127.0.0.1:9412"
WORKDIR skywalking
ARG DIST
COPY dist .
COPY docker-entrypoint.sh .
COPY log4j2.xml webapp/
EXPOSE 8080
ENTRYPOINT ["bash", "docker-entrypoint.sh"]

解压压缩包到docker/ui/dist，删除bin, config, oap-libs, agent，目录结构如下：

├── Dockerfile
├── dist
│   ├── LICENSE
│   ├── LICENSE.tpl
│   ├── NOTICE
│   ├── README.txt
│   ├── config-examples
│   ├── licenses
│   ├── tools
│   ├── webapp
│   └── zipkin-LICENSE
├── docker-entrypoint.sh
└── log4j2.xml

制作镜像：

docker build . -t haxicc/skywalking-ui:9.7.0

反向代理配置

为了使SkyWalking-UI通过/skywalking-ui作为访问路径，假设你使用Nginx作为反向代理，需要调整Nginx配置如下：

server {
    listen 80;
    server_name your.domain;
    location /skywalking-ui/ {
        proxy_pass http://skywalking-ui:8080/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}