目录

  • 前言
    • 0,背景
    • 1,关于前端项目
    • 2,安装sass组件
    • 3,总结

前言


本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/108971807
fly-iot飞凡物联专栏:
https://blog.csdn.net/freewebsys/category_12219758.html

未经博主允许不得转载。
博主CSDN地址是:https://blog.csdn.net/freewebsys
博主掘金地址是:https://juejin.cn/user/585379920479288
博主知乎地址是:https://www.zhihu.com/people/freewebsystem

0,背景


github项目地址:
https://github.com/actorcloud/ActorCloud

gitbook 文档地址:https://wivwiv.gitbooks.io/emq-actorcloud-doc/content/introduction/introduction.html

ActorCloud 使用手册 ActorCloud 是一个面向低功耗IoT网络,为企业提供一站式平台服务的物联网平台。ActorCloud 在安全可靠的基础上,为设备提供多种协议接入的通信能力,设备数据与消息流管理功能。

平台提供基础设备管理功能以连接、管理海量设备,实现设备的消息通信与数据采集持久化;集成规则引擎与数据可视化管理,灵活开放多种权限级别的管理、控制 API,通过 API 可快速开发上层应用,实现多端接入、设备远程控制。

IoT Hub:为终端上云建立可靠双向连接通道,进行认证鉴权、协议解析与消息路由; 设备管理:终端注册开通与生命周期管理,提供状态、故障、流量的不间断监控; 数据引擎:对获取的终端消息高速持久化、实时解析、规则事务处理与可视化展示; 应用使能:提供终端SDK、APP SDK,开放丰富的 REST API 接口,集成消息推送接口。

1,关于前端项目


前端ui: vue+elementUI 。
这里使用docker 进行镜像的构建和编译。
因为非常方便的切换 node 环境。可以快速的解决兼容的问题。
实验了几个node 容器版本,发现 node18 noe16 都不可以,因为项目是几年前的。所以切换到 node14 测试。

首先下载 前端项目:

git clone https://github.com/actorcloud/ActorCloud.git
cd ActorCloud/ui# 然后使用docker 镜像启动容器:docker run -itd --name node16 -p 9999:9999 -v `pwd`:/data node:16-bullseye-slim
docker exec -it node16 bash
# 进入容器使用 # 然后使用yarn 进行安装:yarn  install --registry=https://registry.npmmirror.com

发现sass 的问题,参考这个文章:
https://juejin.cn/post/7047378050270363662

修改package.json 的配置文件。
发现需要安装sass,依赖python3

    "node-sass": "^8.0.0","sass-loader": "^10.4.1",

2,安装sass组件


和其他组件不一样,这个需要g++和 python2的环境。

# 设置阿里云源:
echo "deb http://mirrors.aliyun.com/debian/ bullseye main non-free contrib" > /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye main non-free contrib" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian-security/ bullseye-security main" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian-security/ bullseye-security main" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye-updates main non-free contrib" >> /etc/apt/sources.list
echo "deb http://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib" >> /etc/apt/sources.list
echo "deb-src http://mirrors.aliyun.com/debian/ bullseye-backports main non-free contrib" >> /etc/apt/sources.listapt update && apt install -y make g++ python3

然后在执行 yarn install

yarn install --registry=https://registry.npmmirror.comyarn install v1.22.19
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/4] Resolving packages...
warning Lockfile has incorrect entry for "webpack@^4.0.0". Ignoring it.
warning @vue/cli-plugin-babel > webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: The v1 package contains DANGEROUS / INSECURE binaries. Upgrade to safe fsevents v2
[2/4] Fetching packages...
warning vue-amap@0.5.10: The engine "core-js" appears to be invalid.
[3/4] Linking dependencies...
warning "vue-grid-layout > @interactjs/actions@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/actions@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/auto-scroll@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/auto-start@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/auto-start@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers@1.10.2" has unmet peer dependency "@interactjs/core@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "vue-grid-layout > @interactjs/modifiers > @interactjs/snappers@1.10.2" has unmet peer dependency "@interactjs/utils@1.10.2".
warning "@vue/cli-plugin-unit-mocha > mocha-webpack@2.0.0-beta.0" has incorrect peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 202.98s.

经过几分钟的编译,执行成功,然后启动:

1 error found.
1 error potentially fixable with the `--fix` option.Module Warning (from ./node_modules/@vue/cli-plugin-eslint/node_modules/eslint-loader/index.js):
error: `@/components/EmqSearchSelect` import should occur before import of `../components/TopicForm` (import/order) at src/apps/rules/views/BusinessRuleDetails.vue:163:1:161 | import CodeEditor from '@/components/CodeEditor'162 | import TopicForm from '../components/TopicForm'
> 163 | import EmqSearchSelect from '@/components/EmqSearchSelect'| ^164 |165 | export default {166 |   name: 'business-rule-details-view',1 error found.
1 error potentially fixable with the `--fix` option.You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.App running at:- Local:   http://localhost:9999/ - Network: unavailable

虽然报错了几个语法问题,但是问题不大,终于可以启动成功了。端口9999

服务器错误,正常,因为后端的代码还没有研究呢,已经非常不错了。

看node报错:

Proxy error: Could not proxy request /api/v1/backend_static?fileType=image&filename=sign.png from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).Proxy error: Could not proxy request /api/v1/backend_static?fileType=image&filename=favicon.ico from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).Proxy error: Could not proxy request /api/v1/login from localhost:9999 to http://localhost:8000.
See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).

3,总结


项目的前端使用node16 可以成功的跑起来。
其中项目使用sass 组件,这个依赖python3和c++,这个项目还是特别的赞的。后端是python写的。
继续进行研究。
以下是package.json 代码,记得删除之前的lock文件:

{"name": "actorcloud","version": "1.0.0","license": "Apache-2.0","scripts": {"dev-localhost": "export VUE_APP_SERVER=http://127.0.0.1:7000 && yarn dev","dev": "yarn get-apps && vue-cli-service serve","build": "yarn get-apps && vue-cli-service build","lint": "vue-cli-service lint","test:unit": "vue-cli-service test:unit","get-apps": "node apps.config.js"},"dependencies": {"async-validator": "^1.11.5","axios": "^1.3.4","codemirror": "^5.36.0","css-element-queries": "^1.1.1","dateformat": "^3.0.3","echarts": "^3.8.5","element-ui": "^2.15.13","jsonlint": "^1.6.2","jszip": "^3.1.5","lottie-web": "^5.4.1","material-design-icons": "^3.0.1","mqtt": "^3.0.0","node-sass": "^8.0.0","sass-loader": "^10.4.1","screenfull": "^4.0.0","script-loader": "^0.7.2","socket.io-client": "^2.1.1","vue": "^2.6.6","vue-amap": "^0.5.4","vue-grid-layout": "^2.1.13","vue-i18n": "^7.8.1","vue-router": "^3.0.1","vuex": "^3.0.1","vuex-router-sync": "^5.0.0","vuex-shared-mutations": "^0.0.4","webpack": "^5.83.1"},"devDependencies": {"@commitlint/cli": "^7.6.1","@commitlint/config-conventional": "^7.6.0","@vue/cli-plugin-babel": "^3.4.0","@vue/cli-plugin-eslint": "^3.4.0","@vue/cli-plugin-unit-mocha": "^3.2.0","@vue/cli-service": "^3.9.0","@vue/eslint-config-airbnb": "^4.0.0","@vue/test-utils": "^1.0.0-beta.20","babel-eslint": "^10.0.1","babel-plugin-component": "^1.1.1","chai": "^4.1.2","countup.js": "^1.9.3","crypto-js": "^3.1.9-1","eslint": "^5.13.0","eslint-plugin-vue": "^5.1.0","husky": "^2.3.0","vue-template-compiler": "^2.6.6"},"husky": {"hooks": {"commit-msg": "commitlint -e $HUSKY_GIT_PARAMS"}}
}

本文的原文连接是:
https://blog.csdn.net/freewebsys/article/details/108971807

【fly-iot飞驰物联】(7):经过几天研究,终于把emq的Actorcloud的前端跑起来了,解决了sass的编译依赖问题,使用docker的node16镜像可以成功编译启动,下一步研究后端代码相关推荐

  1. IoT Master 物联大师

    IoT Master 物联大师 https://github.com/zgwit/iot-master 物联大师是真格智能实验室推出的一款通用的数据采集和自动控制系统, 集成了Modbus和一些主流P ...

  2. 【fly-iot 飞驰物联】(6):通过docker镜像使用gitbook启动ActorCloud项目文档,发现是个IOT功能非常丰富的项目,可以继续研究下去。

    目录 前言 1,关于 ActorCloud 使用手册 2,使用docker 构建文档 4,或者使用别人的gitbook镜像 5,总结 前言 本文的原文连接是: https://blog.csdn.ne ...

  3. 一文搞定docker创建私有镜像仓库(配置启动http和https方式私有仓库服务,查询、删除私有仓库镜像)

    docker除了使用公共镜像仓库之外,也可以创建私有镜像仓库.对于内部开发.测试.部署环境来说,是很有必要的.        如何创建私有镜像仓库服务呢?当然是以容器的方式啦! 1.拉取官方regis ...

  4. docker 拉取镜像、创建并启动容器

    获取镜像 默认情况下,使用docker pull命令,会从官方的Docker Hub库中将镜像拉取到本地. 首先介绍这条命令的格式: docker pull [OPTIONS] <仓库名> ...

  5. Arduino--ESP8266物联网WIFI模块(贝壳物联)--数据上传服务器(单数据接口)

    一.简介 随着移动物联网的发展,各场景下对于物联控制.数据上传.远程控制的诉求也越来越多,基于此乐鑫科技推出了便宜好用性价比极高的wifi物联模块--ESP8266,话不多少我们先来看看这个神奇的模块 ...

  6. STM32--ESP8266物联网WIFI模块(贝壳物联)--温湿度数据上传服务器显示

    本文适用于STM32F103C8T6等MCU,其他MCU可以移植,完整资源见文末链接 一.简介 随着移动物联网的发展,各场景下对于物联控制.数据上传.远程控制的诉求也越来越多,基于此乐鑫科技推出了便宜 ...

  7. STM32--ESP8266物联网WIFI模块(贝壳物联)--远程无线控制点灯

    本文适用于STM32F103C8T6等MCU,其他MCU可以移植,完整资源见文末链接 一.简介 随着移动物联网的发展,各场景下对于物联控制.数据上传.远程控制的诉求也越来越多,基于此乐鑫科技推出了便宜 ...

  8. 立宏安全-5G CPE MN1工业物联采集器-物联网关/4G/5G通讯盒子

    5G CPE MN1工业物联采集器 • 采集设备生产数据 • 可直接从PLC采集相关数据 • 采集设备故障报警 • 可IO采集传感器数据 • 可采集安全,环境等数据 • 生产工艺流程采集管理 • 配置 ...

  9. 被物联网卡套路了怎么办,物联卡这几种“套路”要分清了!

    物联卡是近年来比较受"手机用户"欢迎的流量卡,而且相比于普通手机卡,物联卡在价格上的优势还是比较明显. 所谓的"物联网卡",实际上是一种在人.物.网连接过程中负 ...

最新文章

  1. BZOJ5329: [SDOI2018]战略游戏——题解
  2. 恩智浦AI视觉组之逐飞岁末彩蛋
  3. php鼠标经过显示文本,CSS_HTML和CSS做网页实例教程:鼠标滑过文字改变,关于HTML+CSS的实例效果很多, - phpStudy...
  4. SAP and ABAP Memory总结
  5. android 多屏幕 设计翻译,android Supporting multiple screen翻译一
  6. java redisson_Java使用Redisson分布式锁实现原理
  7. matlab aic sic,sic是什么意思_sic的翻译_音标_读音_用法_例句_爱词霸在线词典
  8. Docker快速搭建Bugzilla
  9. java中53个关键字的意义及使用方法
  10. js中typeof与instanceof用法小记
  11. javascrip执行字符串里面的函数
  12. LVM逻辑卷管理学习
  13. 【SQL Server】入门教程-基础篇(完结)
  14. 多列堆积柱形图怎么做_将Excel表格中数据做成多列堆积柱形图的操作步骤
  15. 几种常考的面试题类型
  16. 游戏开发工具引擎/模拟器收集
  17. 发红包的程序代码java_Java实现微信发红包
  18. python微信机器人之小i
  19. rt-thread通过spi连接W25Q32后无法读取ID
  20. 围观网络之一 —— 初步看看应用层:Winsock AFD

热门文章

  1. 吴恩达:AI的下一个发展方向,从大数据转向小数据
  2. 百度自动图像标注工具BML使用教程
  3. 呼吸灯代码linux,ESP32 开发笔记(三)源码示例 3_LEDC_PWM 使用LEDC实现LED呼吸灯
  4. arduino-LED呼吸灯
  5. 常用的画流程图/时序图工具简介
  6. Git合并指定commits到另一个分支
  7. 51单片机智能大棚控制系统降温浇水除湿补光LCD1602 手动自动模式
  8. JS分布式流转基础学习
  9. 云服务器安装 R Spark
  10. Livy简单使用 架构解读