背景

部署Landoop kafka-connect-ui最简单的办法还是通过docker来部署，我们之前的kafka-connect-ui就是通过docker部署的，但是，最近发现个问题：当使用docker部署且防火墙使用的是firewalld的情况下，就会出现端口冲突。
部署完kafka-connect-ui后，它是没有访问控制的，这样就会有安全问题，当我准备去通过nginx在前面加上基础验证时，我发现当我取消掉kafka-connect-ui端口的开放后它仍然可以被访问到。这样就无法只通过nginx访问kafka-connect-ui了。于是，本着改动最小的原则：直接通过原码构建安装kafka-connect-ui。

项目原地址
项目镜像地址

一、准备

如果在有外网的服务器上部署的话会方便很多，这里就主要以纯离线的方式部署。以及Landoop kafka-connect-ui也是一个比较老的项目了，安装过程中需要有一些注意的地方，写下这篇文章以作记录。

我们准备一台有外网的服务器以及需要部署kafka-connect-ui的应用服务器，为了后续表述方便有外网的服务器称为001服务器，应用服务器称为002服务器（可以通过虚拟机创建一个测试环境作为001服务器）。这里001服务器主要是用于下载资源，打包依赖。

二、安装

以下操作默认root权限操作，bower install 这里需要在项目目录中执行或者使用对应用户权限以免影响全局依赖

1、下载所需安装包

下载nodejs（只能下载14.x版本，其它版本启动kafka-connect-ui会有适配报错问题）

weget https://nodejs.org/dist/v14.21.3/node-v14.21.3-linux-x64.tar.xz

下载bower

weget https://registry.npmjs.org/bower/-/bower-1.8.12.tgz

安装git（bower 下载依赖项也需要用到git）

yum install -y git

下载源码

git clone https://github.com/Landoop/kafka-connect-ui.git
# 或
git clone https://gitcode.com/gh_mirrors/ka/kafka-connect-ui.git

将nodejs、bower安装包发送到002上

2、安装nodejs

在两台服务器上都安装nodejs
解压

tar -xvf node-v14.21.3-linux-x64 -C /usr/local/nodejs

配置环境变量

export NODE_HOME=/usr/local/nodejs
export PATH=$PATH:$NODE_HOME/bin
# 使生效
source /etc/profile

检查是否安装完成

node -v
npm -v

在001上设置npm镜像

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

3、安装bower

在两台服务器上都安装bower

# 全局安装
npm install -g bower-1.8.12.tgz
# 检查是否安装完成
bower -v

4、安装http-server

bower也可以通过此种方式进行离线安装

在001上执行

# 全局安装
npm install -g http-server
# 检查是否安装成功
http-server -v

将http-server打包发送到002并安装

cd /usr/local/nodejs/lib/node_modules
# 压缩
tar -zcvf http-server.tar.gz ./http-server

将http-server.tar.gz上传到002

# 解压
tar -zxvf http-server.tar.gz -C /usr/local/nodejs/lib/node_modules/
# 创建软链接
ln -s /usr/local/nodejs/lib/node_modules/http-server/bin/http-server /usr/local/bin/http-server
# 检查是否安装成功
http-server -v

5、安装kafka-connect-ui依赖

在001上执行

cd kafka-connect-ui
npm install
bower install
# 安装完成后返回到上一层目录进行压缩
cd ../
tar -zcvf kafka-connect-ui.tar.gz ./kafka-connect-ui

6、配置并启动

将kafka-connect-ui.tar.gz传到002

# 解压到指定目录 如：
tar -zxvf kafka-connect-ui.tar.gz -C /app/path/

配置kafka-connect地址

cd /app/path/kafka-connect-ui
vim ./env.js

配置完成后通过http-server启动

# 指定端口启动
http-server -p 8000 .

7、解决跨域问题

我这里kafka-connect-ui和kafka-connect是在同一台机器，但端口不一样，启动kafka-connect-ui后，发现kafka-connect-ui访问不了kafka-connect，这是因为发生了跨域。由于我这里最后还需要通过nginx在kafka-connect-ui前加入基础验证，这里也通过nginx去解决跨域问题，以下是nginx和env.js部分配置的参考

nginx配置

location /kafka-connect-ui/ {
           add_header Access-Control-Allow-Origin $http_origin;
           add_header Access-Control-Allow-Credentials true;
           add_header Access-Control-Allow-Methods *;
           add_header Access-Control-Allow-Headers 'loginToken,nonce,randomStr,timeStamp,Content-Type,Authorization,User-Agent,Accept,Referer';
           add_header Access-Control-Expose-Headers 'loginToken';

		   auth_basic "请输入用户名密码";  # 提示框中的标题
           auth_basic_user_file /usr/local/nginx/kafka_pwd/.htpasswd;  # 指向密码文件

           if ($request_method = 'OPTIONS') {
               return 204;
           }

           proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Cookie $http_cookie;
           proxy_pass http://002ip:8000/;
       }

        location /kafka-connect/ {
           add_header Access-Control-Allow-Origin $http_origin;
           add_header Access-Control-Allow-Credentials true;
           add_header Access-Control-Allow-Methods *;
           add_header Access-Control-Allow-Headers 'loginToken,nonce,randomStr,timeStamp,Content-Type,Authorization,User-Agent,Accept,Referer';
           add_header Access-Control-Expose-Headers 'loginToken';

           if ($request_method = 'OPTIONS') {
               return 204;
           }

           proxy_set_header Host $http_host;
           proxy_set_header X-Real-IP $remote_addr;
           proxy_set_header X-Forwarded-Proto $scheme;
           proxy_set_header X-Forwarded-Port $server_port;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header Cookie $http_cookie;
           proxy_pass http://002ip:8083/;
       }

env.js

//Change the URLs of the endpoints here
var clusters = [
   {
     NAME:"prod",
     KAFKA_CONNECT: "http://192.168.5.135/kafka-connect/",
     KAFKA_TOPICS_UI: "http://kafka-topics-ui.url",
     KAFKA_TOPICS_UI_ENABLED: false ,
     COLOR: "#141414"
   }
]

配置完成后再重启下kafka-connect-ui即可