Harbor系列-05-前端修改tips

概述

为什么会有这样的需求呢，主要还是作为平台的提供方，免不了要做一些组件的升级、维护之类的操作，那么怎么去通知用户呢？最好的办法就是在 Harbor 的前端页面上增加一个提示，甚至是一个内部 Harbor 使用的文档入口，这对本身对 Harbor 不熟悉，或者对公司内部 Harbor 的特殊规则不熟悉的用户来说，提供了极大的便利。

Harbor前端

作为一个后端，即使没搞过前端，起码会懂 Nginx 吧。实际上 harbor-portal 里就包含了 Nginx 服务。

部署

查看 harbor-portal 的部署。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# k get deploy harbor-portal -o yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: harbor-portal
  namespace: harbor
spec:
  replicas: 1
  template:
    spec:
      containers:
      - image: goharbor/harbor-portal:v2.6.0
        name: portal
        ports:
        - containerPort: 8080
          protocol: TCP
        volumeMounts:
        - mountPath: /etc/nginx/nginx.conf
          name: portal-config
          subPath: nginx.conf
      volumes:
      - configMap:
          defaultMode: 420
          name: harbor-portal
        name: portal-config

修改目标

当我们设置 Harbor 只读的时候，会出现这样一个提醒信息，因此其他类型的提示也希望是这页面的上方加入一个用户手册的指引的模块，类似下图，并且能够覆盖所有类型的语言。

查看 Harbor 的代码得知，上述的提醒，会根据语言切换，比如中文的提示会在 /usr/share/nginx/html/i18n/lang/zh-cn-lang.json 这个文件，正常来说，只要修改这个文件的提示语句，就可以让 Harbor 前端在切换成中文的时候将上面那个提示信息改变成我们需要的样子。

主要是希望在 Navigator 导航栏上面显示的话，可以按照下面的方式修改，格式的话，可以随意一点，毕竟只是一个文档的入口。

效果

下面就是修改的效果，当文档在导航栏上，无论是登入还是登出，都非常显眼，用户自然就会看到使用的文档了。

编译和维护

Harbor 的完整编译依赖 Makefile，相对来说比较慢，也比较麻烦，如果只是想重新编译 portal 这个组件的镜像，那是很简单的，可以直接在 Harbor 项目的根目录执行下面的命令。

1

docker build -t runzhliu/portal:v2.4.2-test -f src/portal/docker-build/Dockerfile .

根据 Dockerfile 可知，构建镜像的过程主要涉及到很多 npm 资源的安装以及前端代码的编译，时间主要是耗在这里了。因为我们大概率是不会改一些前端的代码，更多的只是修改一些配置的问题，所以我们可以不去了解前端的构建的细节。

当然修改完后的代码，可以推送到内部的 Git 仓库，按照普通的项目这样维护起来。

参考资料

1. Harbor权威指南

💡赞赏支持

微信打赏 支付宝打赏