跳至主要內容

启动前端

BladeX大约 7 分钟quickstartcode

一、LinksUI前端运行

  1. 导入git私服的 BladeX-Links-UI 工程
  2. 前往根目录执行pnpm install 或 npm install 或 yarn install命令
  3. 前往根目录下的vite.config.mjs修改反向代理地址与端口
  4. blade-server默认为80端口，如果不是80端口，请修改vite.config.mjs中的proxy配置
    export default ({
  mode,
  command
}) => {
  const env = loadEnv(mode, process.cwd())
  const {
    VITE_APP_BASE
  } = env
  return defineConfig({
    base: VITE_APP_BASE,
    server: {
      port: 2888,
      proxy: {
        '/api': {
          target: 'http://localhost',// 修改这里的地址和端口号进行开发模式的反向代理
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    },
  })
}
  5. 前往/src/config目录下的website.js，修改publicKey与后端保持一致
    export default {
  title: "IOT",
  logo: "X",
  key: 'iot',//配置主键,目前用于存储
  indexTitle: 'BladeX 物联网平台',
  clientId: 'iot', // 客户端id
  clientSecret: 'iot_secret', // 客户端密钥
  auth: {
    // 使用后端工程 @org.springblade.test.Sm2KeyGenerator 获取
    publicKey: '041cb889cccf335fcde7******************************3f5ac2b3542bbb903d84c07636550e8fe599aae4aef53a91cb77cbb1'
  }
}
  6. 命令行输入pnpm run dev，控制台打印如下日志则说明启动成功
    ⋊> ~/W/p/BladeX-Links-UI on dev ⨯ pnpm run dev 

> bladex-iot-admin@1.0.0 dev /Users/bladex/Workspaces/product/BladeX-Links-UI
> vite --host

VITE v5.2.12  ready in 244 ms
➜  Local:   http://localhost:2888/
➜  Network: http://172.20.10.13:2888/
➜  press h + enter to show help
  7. 启动成功后，打开浏览器访问http://localhost:2888即可看到登录页面，账号密码为默认的admin/admin系统界面1系统界面2

二、Node-Red运行

介绍说明

Node-RED 是一个基于流的开发工具，用于可视化地连接硬件设备、API 和在线服务，作为物联网组件不可或缺的一部分。

  • 可视化编程：Node-RED 提供了一个基于浏览器的流式编辑器，支持将节点拖放到画布上，连接各种设备、服务和API。
  • 丰富的节点库：社区贡献了大量的节点, 可在线直接下载安装,也可轻松地自定义扩展功能。
  • 轻松集成：支持多种通信协议，如 HTTP, WebSocket, MQTT, TCP, MODBUS, PLC 等，方便与其他系统集成。
  • 运用广泛：商业化的硬件边缘网关大部分已内置Node-Red服务，安全可靠，值得信赖。

1、Docker模式启动

提示

1. 关于docker目录的说明

  • 挂载命令-v /docker/node_red_pro_data:/data表示将容器内的/data目录映射到宿主机的/docker/node_red_pro_data目录，这样可以保证容器内的数据不会丢失。
  • 在进行目录挂载时，需要先提前创建/docker/node_red_pro_data目录，并且执行chmod 777 /docker/node_red_pro_data赋予权限，否则将会映射失败。

2. 关于docker网络的说明

  • 由于docker容器内部无法直接访问宿主机的网络，所以需要添加--add-host="host.docker.internal:host-gateway"参数，这样Node-Red才能访问到宿主机。
  • 在Node-Red服务进行设计节点时，若需要访问到宿主机的服务，原本的localhost均需要修改为host.docker.internal，否则将无法与宿主机进行通信。
  1. docker镜像主页：点击访问，docker命令如下：
    docker run -it -d \
  --add-host="host.docker.internal:host-gateway" \
  -p 1880:1880 \
  -v /docker/node_red_pro_data:/data \
  --name nodered \
  -e TZ=Asia/Shanghai \
  -e MYSQL_HOST=host.docker.internal \
  -e MYSQL_PORT=3306 \
  -e MYSQL_USER=root \
  -e MYSQL_PASSWORD=root \
  -e MYSQL_DATABASE=bladex_iot \
  bladex/node-red-pro
  2. 运行日志如下
    ⋊> ~ docker run -it -d \                                                                                                                                               01:04:38
           --add-host="host.docker.internal:host-gateway" \
           -p 1880:1880 \
           -v ~/docker/node_red_pro_data:/data \
           --name nodered \
           -e TZ=Asia/Shanghai \
           -e MYSQL_HOST=host.docker.internal \
           -e MYSQL_PORT=3306 \
           -e MYSQL_USER=root \
           -e MYSQL_PASSWORD=root \
           -e MYSQL_DATABASE=bladex_iot \
           bladex/node-red-pro

Unable to find image 'bladex/node-red-pro:latest' locally
latest: Pulling from bladex/node-red-pro
a258b2a6b59a: Already exists 
6499a07b7301: Already exists 
ef51b21b47ac: Already exists 
5155adf0195a: Already exists 
ea412430f6a5: Already exists 
734893de2c4f: Already exists 
c6f8fcef94c1: Already exists 
4157e1ccf512: Pull complete 
e64c68f1b9bd: Pull complete 
f6ad82dc7344: Pull complete 
7238aaead0a0: Pull complete 
9d0b5fe0417a: Pull complete 
398db383b4c0: Pull complete 
840ecdd15c75: Pull complete 
51b3b01d96af: Pull complete 
6da565fd1fe5: Pull complete 
da901c108fc6: Pull complete 
98a1976ca4c7: Pull complete 
24926a364f39: Pull complete 
1344cfb23f98: Pull complete 
f54a4cfc1d48: Pull complete 
89592c6c44b5: Pull complete 
8a576b482980: Pull complete 
60ec24689ccb: Pull complete 
Digest: sha256:c1c2ffd2dc3ba9dd049e08065bf9bcc1441ec978252bc36140b9a3ab6596a973
Status: Downloaded newer image for bladex/node-red-pro:latest
4c1a899ef00190b490a55961aa38bfca9d460414b34a09d7cfd999b3727501f8


⋊> ~ docker logs -f nodered                                                                                                                                            01:06:15
5 Aug 01:06:16 - [info] 

欢迎使用Node-RED
===================

5 Aug 01:06:16 - [info] Node-RED 版本： v4.0.2
5 Aug 01:06:16 - [info] Node.js  版本： v22.4.1
5 Aug 01:06:16 - [info] Linux 6.6.16-linuxkit arm64 LE
(node:6) [DEP0059] DeprecationWarning: The `util.log API is deprecated. Please use console.log() with a custom formatter or a third-party logger instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
5 Aug 01:06:16 - [info] 加载控制板节点
(node:6) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
5 Aug 01:06:16 - [info] 设置文件  : /data/settings.js
5 Aug 01:06:16 - [info] 上下文储存: 'default' [module=memory]
5 Aug 01:06:16 - [info] 服务器现在在http://127.0.0.1:1880/上运行
5 Aug 01:06:16 - [info] 安装模块：request，版本：latest
5 Aug 01:06:28 - [info] 已安装的模块：request
5 Aug 01:06:28 - [info] 安装模块：moment，版本：latest
5 Aug 01:06:33 - [info] 已安装的模块：moment
5 Aug 01:06:33 - [info] 安装模块：iconv-lite，版本：latest
5 Aug 01:06:37 - [info] 已安装的模块：iconv-lite
5 Aug 01:06:37 - [info] 启动流程
5 Aug 01:06:39 - [info] 流程已启动

2、源码模式启动

  1. 导入git私服的 node-red-pro 工程
  2. 工程目录说明
    node-red
└── packages                         // 核心代码包
    └── node_modules                 // 包含所有模块
       ├── @node-red                 // Node-RED 源码的模块化封装
           ├── editor-api            // 一个Express应用程序，用于为Node-RED提供服务编辑器功能。
           ├── editor-client         // 包含Node-RED编辑器的所有客户端资源。
           ├── nodes                 // 包含内置流程节点
           ├── registry              // 节点注册表，负责节点的发现和管理。
           ├── runtime               // 核心流引擎，Node-RED的主要运行时入口点。
           ├── util                  // 包含通用工具集
       └── node-red                  // 程序的主入口点
  3. 前往根目录执行pnpm install 或 npm install 或 yarn install命令
  4. 前往 /node-red-pro/packages/node_modules/node-red/settings.js，修改mysql数据库连接信息
    module.exports = {
    /**
     * flow default storage module
    */
    storageModule: "mysql",

    /**
     * flow mysql setting
    */
    mysqlSettings: {
       readonly: process.env.FLOW_READ_ONLY || false,
       host: process.env.MYSQL_HOST || 'localhost',
       port: process.env.MYSQL_PORT || 3306,
       user: process.env.MYSQL_USER || 'root',
       password: process.env.MYSQL_PASSWORD || 'root',
       database: process.env.MYSQL_DATABASE || 'bladex_iot'
    },
}
  5. 前往根目录执行pnpm run build命令，编译项目，生成配置文件，可以看到如下的日志
    ⋊> ~/W/p/node-red-pro on dev  pnpm run build   

> node-red@4.0.2 build /Users/bladex/Workspaces/product/node-red-pro
> grunt build

Running "clean:build" (clean) task
>> 5 paths cleaned.

Running "jsonlint:messages" (jsonlint) task
>> 50 files lint free.

Running "jsonlint:keymaps" (jsonlint) task
>> 1 file lint free.

Running "concat:build" (concat) task

Running "concat:vendor" (concat) task

Running "copy:build" (copy) task
Created 21 directories, copied 306 files

Running "uglify:build" (uglify) task
>> 4 files created 2.52 MB → 952 kB

Running "sass:build" (sass) task

Running "attachCopyright:js" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/red.min.js
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/main.min.js

Running "attachCopyright:css" (attachCopyright) task
Attached copyright to packages/node_modules/@node-red/editor-client/public/red/style.min.css

Done.
  6. 前往根目录执行pnpm run start命令，看到如下日志，则说明启动成功
    ⋊> ~/W/p/node-red-pro on dev  pnpm run start 

> node-red@4.0.2 start /Users/bladex/Workspaces/product/node-red-pro
> node packages/node_modules/node-red/red.js

30 Jul 21:33:19 - [info] 

欢迎使用Node-RED
===================

30 Jul 21:33:19 - [info] Node-RED 版本： v4.0.2
30 Jul 21:33:19 - [info] Node.js  版本： v18.19.0
30 Jul 21:33:19 - [info] Darwin 23.3.0 arm64 LE
30 Jul 21:33:19 - [info] 加载控制板节点
30 Jul 21:33:19 - [info] 设置文件  : /Users/bladex/.node-red/settings.js
30 Jul 21:33:19 - [info] 上下文储存: 'default' [module=memory]
30 Jul 21:33:19 - [info] 服务器现在在http://127.0.0.1:1880/上运行
30 Jul 21:33:19 - [info] 启动流程
30 Jul 21:33:19 - [info] [tcp out:ec0bc4aa.b3c828] 正在连接到 localhost:1885
30 Jul 21:33:20 - [info] 流程已启动
30 Jul 21:33:20 - [info] [tcp in:511f8208.c4c20c] 监听端口 1885
30 Jul 21:33:20 - [info] [tcp out:ec0bc4aa.b3c828] 已连接到 localhost:1885
30 Jul 21:33:20 - [info] [mqtt-broker:本机] 已连接到服务端: mqtt://127.0.0.1:1883
  7. 注意看其中的一段日志，这是执行了pnpm run build命令后自动生成的配置文件，如果后续针对工程有修改配置，需要找到对应目录的.node-red文件夹，删掉后再次执行pnpm run build命令，然后再执行pnpm run start命令才能正确加载最新的配置从而运行。
    30 Jul 21:33:19 - [info] 设置文件  : /Users/bladex/.node-red/settings.js

3、前端对接

  1. 打开LinksUI工程的website.js，修改edgeUrl为Node-Red的服务地址
    /**
 * 全局配置文件
 */
export default {
  title: "IOT",
  logo: "X",
  // 规则设计引擎地址
  edgeUrl: 'http://localhost:1880',
}
  2. 现在打开LinksUI项目，打开边缘计算->边缘网关菜单，打开看到如下界面 系统界面3
  3. 点击标题文字或者配置按钮，将会自动直接打开对应配置好的Node-Red界面 系统界面4
  4. 点击触发节点，测试功能，可以看到功能运行正常，日志打印成功 系统界面5
  5. 打开数据库iot_edge_log表，可以看到刚刚采集的气象数据已经成功存储 系统界面6

注意

  • 如果启动报错[MySQLdatabase:bladexiot] Error: Access denied for user 'root'@'localhost' (using password: YES)
  • 首先请检查/node-red-pro/packages/node_modules/node-red/settings.js中的mysql连接信息是否正确
  • 如果信息无误，则需要修改气象采集节点，双击BladeX物联网平台数据库节点，修改数据库连接信息，修改为正确可连接的信息，然后点击右上角部署就可以正常运行
上次编辑于:
贡献者: smallchill