Thingsboard源码安装并更换logo

1. 源码拉取

本教程按照3.4发行版本行进

git clone https://github.com/thingsboard/thingsboard.git
git checkout release-3.4

2. 导入项目

打开IEDA（Jetbrains系列产品），以打开pom文件的方式导入项目

在拉取的项目中有若干pom文件，选择项目源码根目录下的pom.xml进行导入

设置maven

根据读者本地环境设置maven环境，建议换用国内源，否则包下载较慢。

笔者主要配置如下：

配置文件路径E:\maven-java\apache-maven-3.6.0-bin\apache-maven-3.6.0\conf

<localRepository>D:\maven-java\maven_repository</localRepository>

 <mirrors>
    <mirror>  
   		<id>nexus-aliyun</id>  
   		<mirrorOf>central</mirrorOf>    
   		<name>Nexus aliyun</name>  
   		<url>https://maven.aliyun.com/repository/public</url>  
   	</mirror> 
 </mirrors>

3. 项目编译

前置条件，项目需要本机有node和postgresql的环境。

postgresql安装过程参考：

windows下postgreSQL安装与启动 - 三月老泉 - 博客园 (cnblogs.com)

node安装笔者使用的较新的v18.15.0，但是笔者建议使用v16.15，对于thingsboard的适配会更好。

thingsboard的包管理方式变成了yarn，需要安装yarn，笔者版本为1.22.4

npm install -g yarn

安装后记得将pom文件中的插件版本对应修改，模块分别有

修改内容均为（请读者按自己的环境定参）

项目编译

为了节省时间，将licsen检查的插件注释，跳过

在IDEA中使用终端打开到根目录，使用如下两个命令

# node 最新版本的ssl是严格检查的，容易在下包的过程中出现超时问题
set NODE_OPTIONS=--openssl-legacy-provider
# 使用maven编译安装
mvn clean install -DskipTests

报错集合

common.msg.gen.*

缺少common.msg.gen.*，意味着下载的包不完整

查看maven的报错是SSL验证超时

报错信息简抽

ui-ngx: Failed to run task: 'yarn install' failed. org.apache.commons.exec.ExecuteException: Process exited with a

使用yarn config list查看，发现的新版的yarn是严格检查ssl的

# 严格检查SSL关闭设置
yarn config set strict-ssl false

设置完仍然会出现安装的超时报错，考虑外网问题，报错的包地址为https://github.com/MichaelZinsmaier/CurvedLines.git

全局搜索定位到了其package.json

使用代理的方式修改github地址，即项目地址前拼接https://ghproxy.com/

yarn.lock也修改一下（路径在thingsboard/ui-ngx/yarn.lock）

digital envelop routines::unspported

原因

出现这个错误是因为 node.js V17版本+最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制，可能会对生态系统造成一些影响.

参考 Vue 报错error:0308010C:digital envelope routines::unsupported_柠檬果子青的博客-CSDN博客

推荐使用方法三，否则会一直修改临时配置

set NODE_OPTIONS=--openssl-legacy-provider

Not found in remote cache

pkg打包原理性文章参考一处打包，到处运行，用pkg打包nodejs应用！ - 亚楠老猎人 - 博客园 (cnblogs.com)

原因：本地缺少fetched-v16.15.0-win-x64这个文件

下载链接

Releases · vercel/pkg-fetch (github.com)

找v3.4，v3.5没有16.15对应的文件

将缺少文件复制到User目录下的.pkg-cache中

重命名为fetched-v16.15.0-win-x64

最终编译成功

4. 项目启动

修改必要配置文件

项目根目录下的thingsboard/application/src/main/resources下有个thingsboard.yml

项目运行，启动E:\gitCloneZone\thingsboard\application\src\main\java\org\thingsboard\server\ThingsboardServerApplication.java的spring启动类ThingsboardServerApplication

启动成功

访问本机localhost:8080登录默认系统账户sysadmin@thingsboard.org（密码为sysadmin）即可使用

5. 修改logo

首先要定位logo在源码中的位置

与logo有关的源码位置

路径分别为

thingsboard/ui-ngx/src/environments
thingsboard/ui-ngx/src/app/modules/home
thingsboard/ui-ngx/src/app/shared/compoents

文件已经在上图中列出

environment.prod.ts

记得编码格式也对应修改，appTitle为标题

environments.ts

logo操作的图片是svg矢量图，我们需要将自定义的logo转换成矢量图，这种教程很多，请读者自行调查。

需要操作的logo图在ui-ngx模块下。其中，在浏览器页签上显示的为thingsboard.ico，其为ico图标，网上也有很多转换为ico图标的工具。在登录页面和thingsboard后台的左上角的logo即为svg矢量图，存放在ui-ngx的src下的assets下，命名为logo_title_white.svg，打开该图像

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-neHsZeVW-

可以看到，其为分辨率1543$\times$320，那么我们制作的svg矢量图也应该是这个分辨率的图片。

实测分辨率替换为相同分辨率图片的时候，然后会出现logo显示不规整的情况。所以，我们替换图片之后仍然需要去控制台手动调样式以适应我们自己的感官。

后台亦是如此

可以看到，logo的样式均为tb-logo-title，当我们调好合适的参数之后可以修改样式

登录页的logo样式：logo.component.scss（将参数修改为自己矢量图合适的样式参数）

:host-context(.login-logo) {
  img.tb-logo-title {
    width: 280px;
    height: 60px;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transform: none;

    &:focus {
      outline: 0;
    }
  }
}

后台导航栏的logo样式：home.component.scss

& > div {
          height: 64px;
          .tb-logo-title {
            width: auto;
            max-width: 100%;
            height: 36px;
            max-height: 100%;
            margin: auto;
          }
        }

其中我们的logo点击会跳转官网首页，这一部分在ts文件中修改

logo.compoent.ts（修改https://thingsboard.io为自己指定的地址）

export class LogoComponent {

  logo = 'assets/logo_title_white.svg';

  gotoThingsboard(): void {
    window.open('https://thingsboard.io', '_blank');
  }

}

ico图标文件替换之后即生效

改动文件汇总：

6. 部署（rpm deb方式）

本章的前提是数据库等已存在并非一个空白服务器，空白服务器请参照笔者的前两篇博客进行基础环境的部署。

请参考《ThingsBoard开源物联网平台智慧农业实例快速部署教程（Ubuntu、CentOS适用）》

《Thingsboard开源物联网平台智慧农业实例快速部署教程（二）【手把手部署UI与动态数据】

编译成功之后在application模块下会产生target目录，该目录下会留存生成的包。

我们将rpm包或者deb包送入对应的服务中，按照如下操作流程进行。

redhat及分支如redhat，centos，Fedora等

# 停掉原本的thingsboard服务
systemctl stop thingsboard.service
# 卸载原有thingsboard
rpm -e thingsboard
# 安装新导入的包
sudo rpm -Uvh thingsboard.rpm
# 修改配置文件
sudo vim /etc/thingsboard/conf/thingsboard.conf
# 重启服务
systemctl daemon-reload
systemctl restart thingsboard.service

debian及分支如debian，ubuntu等

# 停掉原本的thingsboard服务
sudo systemctl stop thingsboard.service
# 卸载原有thingsboard
sudo dpkg -r thingsboard
# 安装新导入的包
sudo dpkg -i thingsboard.deb
# 修改配置文件
sudo vim /etc/thingsboard/conf/thingsboard.conf
# 重启服务
sudo systemctl daemon-reload
sudo systemctl restart thingsboard.service