【Helm三部曲】安装 chartmuseum 可视化界面 chartmuseumUi 【官方推荐安装方法】

缺乏、安全感 2023-10-05 23:39 54阅读 0赞

## 引 ##

本文紧接 [【Helm三部曲】 Helm 简介及安装][Helm_ Helm] 、[【Helm三部曲】 Helm 包管理器 chartmuseum 简介及安装][Helm_ Helm _ chartmuseum]

前面了解到 helm 的服务端是 chartmuseum 。客户端有两种，第一种即 helm 命令行工具。第二种是web 可视化页面。

helm 的 web 可视化界面有

*  [monocular][]（已废弃）
 *  [chartmuseum/ui][chartmuseum_ui]
 *  [kubeapps][]等多款。

它们都基于 Chartmuseum 提供的 API 而构建，如果愿意，我们可以根据这些API构建自己特有的ChartMuseum 客户端。

本文介绍如何搭建 `chartmuseum/ui`

## 安装 ##

`chartmuseum/ui` 官方 https://github.com/chartmuseum/ui 推荐安装方式如下

### 1、拉取仓库代码 ###

git clone https://github.com/chartmuseum/ui.git

拉取的代码目录如下  
![在这里插入图片描述][58e48ddf92394c49b2674ea54c2d0907.png]

### 2、编辑 docker-compose.yaml ###

拉取的项目 `chartmuseum/ui` 中有 `docker-compose.yaml` 文件，文件内容如下：

version: '2.0'
    services:
      ui:
        build: ./
        #image: idobry/chartmuseumui:latest
        environment:
          CHART_MUSEUM_URL: http://chartmuseum:8080
        ports:
          - 3000:8080
      chartmuseum:
        image: chartmuseum/chartmuseum:v0.7.1
        ports:
        - 8080:8080
        volumes:
        - ./charts:/charts
        environment:
          PORT: 8080
          DEBUG: 1
          STORAGE: local
          STORAGE_LOCAL_ROOTDIR: /charts

**根据需要修改** docker-compose.yml 文件

*  为了方便文件管理 ，修改 `chartmuseum` 服务的 volumes 为本地绝对目录地址 \`\`
 *  ui 及 chartmuseum 端口暂时不改

编辑后的文件内容如下：

version: '2.0'
    services:
      ui:
        build: ./
        #image: idobry/chartmuseumui:latest
        environment:
          CHART_MUSEUM_URL: http://chartmuseum:8080
        ports:
          - 3000:8080
      chartmuseum:
        image: chartmuseum/chartmuseum:v0.7.1
        ports:
        - 8080:8080
        volumes:
        - D:\apps-data\docker\chartmuseum-ui\charts:/charts
        environment:
          PORT: 8080
          DEBUG: 1
          STORAGE: local
          STORAGE_LOCAL_ROOTDIR: /charts

该配置文件主要信息如下：

*  构建了两个服务：ui 和 chartmuseum
 *  ui 使用 `build ./` 构建（`docker build ./`），即通过当前目录下的 Dockerfile 构建
 *  ui 配置的后端接口路径是 `http://chartmuseum:8080`,其中 chartmuseum 是后台服务名，可以用IP代替
 *  ui 启动在 3000 端口
 *  chartmuseum 使用了 `chartmuseum/chartmuseum:v0.7.1` 版本
 *  chartmuseum 暴露在 8080 端口
 *  chartmuseum 将 chart 保存在本地 D:\\apps-data\\docker\\chartmuseum-ui\\charts 下。
 *  chartmuseum 采用本地存储(local)，存储路径是 /charts

### 启动 ###

根据Docker 官方编排工具 docker-compose ，在 docker-compose.yaml 运行如下命令即可

docker-compose up

编译Ui时遇到的错误及解决方案见本文： 遇到的错误 章节  
![在这里插入图片描述][42bef285f6ea41f78ccfcc9101ce9735.png]

### 使用 ###

如上图完成启动，根据 docker-compose.yaml 配置，访问 `http://localhost:3000/` 即可访问 chartmuseum-ui web 客户端。

#### 访问首页 ####

访问 `http://localhost:3000/`  
![在这里插入图片描述][234015e8975f47e4afdca14a21537dcb.png]

#### 添加应用 ####

**创建安装包**

# 进入 D:\tmp , 打开 cmd 
    # 创建 charts 文件夹，用于存放创建的 chart  
    PS D:\tmp> mkdir charts
    # 进入 charts
    PS D:\tmp> cd .\charts\
    # 创建应用 app01
    PS D:\tmp\charts> helm create app01
    Creating app01
    # 打包，默认版本是 0.1.0
    PS D:\tmp\charts> helm package .\app01\
    Successfully packaged chart and saved it to: D:\tmp\charts\app01-0.1.0.tgz
    # 打包，指定版本为: 0.1.1
    PS D:\tmp\charts> helm package .\app01\ --version 0.1.1
    Successfully packaged chart and saved it to: D:\tmp\charts\app01-0.1.1.tgz
    # 打包，指定版本为: 0.2.0
    PS D:\tmp\charts> helm package .\app01\ --version 0.2.0
    Successfully packaged chart and saved it to: D:\tmp\charts\app01-0.2.0.tgz
    # 查看结果
    PS D:\tmp\charts> ls
    
    
        目录: D:\tmp\charts
    
    
    Mode                 LastWriteTime         Length Name
    ----                 -------------         ------ ----
    d-----         2022/9/28     14:07                app01
    -a----         2022/9/28     14:08           3751 app01-0.1.0.tgz
    -a----         2022/9/28     14:08           3752 app01-0.1.1.tgz
    -a----         2022/9/28     14:08           3753 app01-0.2.0.tgz
    
    
    PS D:\tmp\charts>

![在这里插入图片描述][a4cb9c86d3a942eda0338994babbf99a.png]  
**上传应用**  
可以通过命令行上传或API接口上传应用，此处展示使用 chartmuseumUi 上传。  
点击首页 Add Chart > 选择 应用文件并确认  
![在这里插入图片描述][8e7f18dae80643fe98c4e88b6625d2e7.png]  
同理，创建 app02 并上传。

#### 页面展示 ####

刷新浏览器：  
![在这里插入图片描述][e56bbad667604dfeb1203cadc5f04c9c.png]  
app01 详情：  
![在这里插入图片描述][677f43b9e8cc41b5921b26ba47c00110.png]  
点击Version 查看 app01 所有版本  
![在这里插入图片描述][ecd4659aebd5493cab81a2d1ed57d1b6.png]

### 遇到的错误 ###

1.  ui 编译失败

**问题**

![在这里插入图片描述][414b2f93127d445f8ed53e14c663d2b4.png]

[builder 2/6] RUN go get github.com/tools/godep:
    #8 68.13 go: go.mod file not found in current directory or any parent directory.
    #8 68.13        'go get' is no longer supported outside a module.
    #8 68.13        To build and install a command, use 'go install' with a version,
    #8 68.13        like 'go install example.com/cmd@latest'
    #8 68.13        For more information, see https://golang.org/doc/go-get-install-deprecation
    #8 68.13        or run 'go help get' or 'go help install'.

**解决方案**  
分析错误日志，go.mod 没有找到，导致 go get 命令不能运行。其实是没有启用 go mod 。因此需要 在 Dockerfile 添加如下命令：

# set Go env 
    RUN go env -w GO111MODULE=auto

修改后的Dockerfile文件如下：

#
    # Stage 1
    #
    FROM library/golang:1 as builder
    
    # set Go env 
    RUN go env -w GO111MODULE=auto
    
    # Godep for vendoring
    RUN go get github.com/tools/godep
    
    # Recompile the standard library without CGO
    RUN CGO_ENABLED=0 go install -a std
    
    ENV APP_DIR $GOPATH/src/github.com/chartmuseum/ui
    RUN mkdir -p $APP_DIR
    ADD . $APP_DIR
    
    # Compile the binary and statically link
    RUN cd $APP_DIR && \
        GO111MODULE=auto CGO_ENABLED=0 godep go build -ldflags '-w -s' -o /chartmuseum-ui && \
        cp -r views/ /views && \
        cp -r static/ /static
    
    #
    # Stage 2
    #
    FROM alpine:3.8
    RUN apk add --no-cache curl cifs-utils ca-certificates \
        && adduser -D -u 1000 chartmuseum
    COPY --from=builder /chartmuseum-ui /chartmuseum-ui
    COPY --from=builder /views /views
    COPY --from=builder /static /static
    USER 1000
    ENTRYPOINT ["/chartmuseum-ui"]

## 总结 ##

本文介绍了 Chartmuseum Web 客户端软件 Chartmuseum/Ui 及其安装。其中安装方式采用了docker-compose。且 ui 是使用 Dockerfile 编译的最新版本，chartmuseum 采用的是 `chartmuseum/chartmuseum:v0.7.1` 。

实际使用时，我们可以将 ui 和 chartmuseum 分别部署，且选用不同的可兼容版本。

假如我们临时编译一个 `charmuseum-ui` ,并采用 `ghcr.io/helm/chartmuseum` 最新版本搭建一个环境，可以通过如下命令完成：

# 编译 chartmuseum-ui(修改后的Dockferfile所在目录执行)
    docker build .
    # 启动 chartmuseum 后端 
    docker run --name chartmuseum -d -p 8080:8080  ghcr.io/helm/chartmuseum
    # 启动前端 chartmuseum-ui
    docker run --name chartmuseum-ui -d -p 3000:8080 -e CHART_MUSEUM_URL=http://localhost:8080 chartmuseum-ui

最终本地的相关镜像有（docker desptop 界面查看）：  
![在这里插入图片描述][ec2d6d90bf754eafacce8c559feae77b.png]  
更多基础请移步 [【Helm三部曲】 Helm 简介及安装][Helm_ Helm] 、[【Helm三部曲】 Helm 包管理器 chartmuseum 简介及安装][Helm_ Helm _ chartmuseum]

注： **docker-compose** 请翻阅 docker 官方文档

[Helm_ Helm]: https://blog.csdn.net/m0_47406832/article/details/127007662
[Helm_ Helm _ chartmuseum]: https://blog.csdn.net/m0_47406832/article/details/127007708
[monocular]: https://github.com/helm/monocular
[chartmuseum_ui]: https://github.com/chartmuseum/ui
[kubeapps]: https://github.com/vmware-tanzu/kubeapps
[58e48ddf92394c49b2674ea54c2d0907.png]: https://img-blog.csdnimg.cn/58e48ddf92394c49b2674ea54c2d0907.png
[42bef285f6ea41f78ccfcc9101ce9735.png]: https://img-blog.csdnimg.cn/42bef285f6ea41f78ccfcc9101ce9735.png
[234015e8975f47e4afdca14a21537dcb.png]: https://img-blog.csdnimg.cn/234015e8975f47e4afdca14a21537dcb.png
[a4cb9c86d3a942eda0338994babbf99a.png]: https://img-blog.csdnimg.cn/a4cb9c86d3a942eda0338994babbf99a.png
[8e7f18dae80643fe98c4e88b6625d2e7.png]: https://img-blog.csdnimg.cn/8e7f18dae80643fe98c4e88b6625d2e7.png
[e56bbad667604dfeb1203cadc5f04c9c.png]: https://img-blog.csdnimg.cn/e56bbad667604dfeb1203cadc5f04c9c.png
[677f43b9e8cc41b5921b26ba47c00110.png]: https://img-blog.csdnimg.cn/677f43b9e8cc41b5921b26ba47c00110.png
[ecd4659aebd5493cab81a2d1ed57d1b6.png]: https://img-blog.csdnimg.cn/ecd4659aebd5493cab81a2d1ed57d1b6.png
[414b2f93127d445f8ed53e14c663d2b4.png]: https://img-blog.csdnimg.cn/414b2f93127d445f8ed53e14c663d2b4.png
[ec2d6d90bf754eafacce8c559feae77b.png]: https://img-blog.csdnimg.cn/ec2d6d90bf754eafacce8c559feae77b.png