TinyEngine 低代码引擎区块局域网部署方案全新上线！

本文由体验技术团队 TinyEngine 项目组成员创作~

在 TinyEngine 开源后，对私有化部署存在诉求的用户越来越多，而当前 TinyEngine 多项内容都依托在公网中，当前官网提供的区块发布方案，为公网环境下的发布，不能完全满足部分用户的需求。因此需要提供用户能够在内网环境下，也能够正常使用 TinyEngine 的全部功能的方案。

现在提出区块发布私有化的两种解决方案给用户自行选择：

  • 将区块发布到 npm 私仓中，搭建内部的 unpkg 和私仓环境
  • 将区块发布到数据库中，从库中直接读取区块产物。

推荐使用第一种方式，因为采用私仓的方式能尽可能保留我们当前的模式，以及能够使用区块版本浮动功能，并且在我们基础物料组件库中，我们也能将组件库上传到私仓里，达到基础物料的私有化。

注：

  • 搭建 unpkg：基于开源 unpkg（https://github.com/mjackson/unpkg）， 在公司内部搭建 npm 的 cdn 环境
  • 私仓环境：在公司内部搭建一个私有的 npm registry，提供发布和拉取能力。

方案一

将区块发布到npm私仓中

在这里插入图片描述

一、安装 verdaccio

当前业界内存在很多搭建 npm 私仓的方案，如: verdaccio, neuxs, cnpmjs 等，大家可以自行选择。在此以使用 verdaccio 为例，可以查看 verdaccio 官网文档或者相关学习文档来安装使用 verdaccio ，在这里只做简单介绍。

1.1 verdaccio 安装

本地直接通过 npm下载

npm install verdaccio

本地启动

verdaccio

或者使用 pm2 启动

# 启动 verdaccio
pm2 start ./verdaccio
# 查看进程
pm2 log verdaccio

虚拟机可以通过 docker 拉取镜像

docker pull verdaccio/verdaccio

启动

docker run -it  -p 4873:4873 verdaccio/verdaccio

（线上使用请配置数据持久保存，以免数据丢失。）

1.2 注册用户
npm login --registry=http://localhost:4873/
1.3 创建 token，此 token 替换原 npm 上申请的 token，用于发包
npm token create --registry=http://localhost:4873/

token 生成完后，需要配置到环境变量NPM_AUTH_TOKEN中，后续 webService 会使用；本地运行时的配置：

vi ~/.bashrc

export NPM_AUTH_TOKEN=xxxx  # 填入刚生成的token

设置完后，重新打开命令行或在当前命令行执行以下命令，让设置的环境变量生效。(git bash 中设置的环境变量无法适用于 powershell 和 cmd )

source ~/.bashrc

1.4 安装后验证

在安装并完成测试后， 访问 http://localhost:4873/ ，在 verdaccio 的管理界面能看到发布上去的 npm 包表示安装成功。

建议发布的测试包名称格式：@公司码/组件名，以便于后续搭建 unpkg 时测试使用。以下是测试用的 package.json 供参考：

在这里插入图片描述
在这里插入图片描述

发布完成后， 访问 http://localhost:4873/ ，在 verdaccio 的管理界面能看到发布上去的 npm 包表示安装成功。

在这里插入图片描述

二、安装 unpkg

在 verdaccio 安装好后，TinyEngine 的包已经能够正常发布在私仓上，如果想要在 TinyEngine 的页面上去获取到私仓里的包，正确的显示区块，这里还需要借助 unpkg 去获取到包的数据，而由于公网的 unpkg 无法直接读取 npm 私仓里的包，因此还需要搭建自己的 unpkg 服务器，结合私有的 unpkg，才能在 TinyEngine 的页面上显示你所建的区块。

unpkg的搭建，大家可以自行在网上参考相关文档，将官方的 unpkg 源码下载下来，进行改造，也可以参考别人的成功案例。改造成功后，访问 http://localhost:8080/ 能看到 unpkg 服务启动成功。

在这里插入图片描述

然后访问之前发布的测试包： http://localhost:8080/@公司码/组件名 ，如能显示 js 文件内容, 则表示 unpkg 安装成功。

在这里插入图片描述

三、修改 tiny-engine-webservice

3.1 修改 app/service/material-center/blockBuilder.ts 的 代码

public unpkgBaseUrl = 'http://localhost:8080'; // 修改为unpkg服务的ip端口

generatePackageJson(blockInfo, version) {
        let { label, id } = blockInfo
        label = label.replace(/\W|_/g, '').toLocaleLowerCase() || 'default'
        const name = `@opentiny-assets/tinyengine-block-${label}-${id}` // 修改点：发包的名称根据自己情况更改, @opentiny-assets改成 @用户的公司码
        this.pkgName = name
        return {
        name,
        version,
        description: '',
        main: `js/web-component.es.js`,  // 修改点：main 必须是 js/web-component.es.js , 否则 unpkg 无法读取到 js 文件
        keywords: [],
        author: '',
        license: 'ISC'
        }
    }

3.2 修改 config.default.ts 的代码

替换 registry 为自己的私仓地址

config.registry = 'http://127.0.0.1:4873/'; // 修改点：替换为自己的私仓地址

在这里插入图片描述

注意： 在1.3小节里，已经生成了 npm token，写入到了NPM_AUTH_TOKEN环境变量。因此本文件中authToken的赋值就不用再修改了，若是没有更换的话，记得参考1.3小节，去替换你的环境变量。

3.3 修改 app/service/cnpm.ts 的代码

去掉 --access=public

  async publishCnpm(packagePath) {
    const commands = ['npm publish']; // 修改点：去掉原先的--access=public
    return this.ctx.helper.execCommandWithCatch(commands, { cwd: packagePath }, 'publish cnpm');
  }

四、在 TinyEngine 中发布区块

以上步骤完成后，可以启动 tiny-engine 进行区块发布测试。验证过程中可以通过查看 tiny-engine-webservice 的发布过程排查问题，TinyEngine 会生成组件包:

在这里插入图片描述

然后发布到私仓:

在这里插入图片描述

发布完成之后，可以打开 http://localhost:4873/ 验证是否发布成功

在这里插入图片描述

并且查看本地启动的 unpkg，是否能够正常访问刚才发布的区块。

在这里插入图片描述

验证完成后，可以在物料中把刚才发布的区块进行添加，添加完毕后就可以正常的使用区块功能。

五、服务部署

当前步骤都是在电脑本地环境下运行调试的，在本地验证正确后，可以自行部署到服务器中。实际生产部署模式以企业、组织内部具体情况具体分析，具体安装以及启动操作流程都跟本地一致，可能会有安装目录位置的差异。

方案二

将区块发布到数据库

一、方案目的

原有的区块托管于 npm，通过 cdn 获取已发布区块内的文件，如果没有公网环境，且不使用私仓的情况下，为区块的托管提供数据库托管方案，使得区块的使用不在依赖于公网环境和 cdn

二、设计思路

  • 将原有的区块发布修改成把区块构建产物转成二进制数据存储到数据库
  • 后端生成构建产物链接，替换原有区块发布后托管在 unpkg 的连接，格式为：http://localhost:7011/material-center/api/block/read/@opentiny-assets/tinyengine-dev-block-testceshi11-2328@1.0.17/js/web-components.umd.js
  • 提供链接访问获取文件的后端方法

三、简单demo，仅供参考

1. 新增存储数据库的表，字段如下：

idint(10)自增id
file_namevarchar(255)文件名
package_namevarchar(255)包名
file_contentlongtext文件内容
versionvarchar(255)版本
created_attimestamp创建时间
updated_attimestamp更新时间

strapi 生成表可以在管理面板创建，也可以在 tiny-engine-data-center 服务根目录 api 文件夹下自己编辑代码，无需手动在 mysql 创建表

  {
  "kind": "collectionType",
  "collectionName": "block_file_store",
  "info": {
    "name": "block-file-store",
    "description": ""
  },
  "options": {
    "increments": true,
    "timestamps": true
  },
  "attributes": {
    "package_name": {
      "type": "string",
      "required": true
    },
    "file_name": {
      "type": "string",
      "required": true
    },
    "version": {
      "type": "string",
      "required": true
    },
    "file_content": {
      "type": "text",
      "required": true
    }
  }
}

2. 修改发布方法

config.default.ts 文件中新增配置

config.dataBaseUrl = 'http://localhost:7011/material-center/api/block/read';

发布接口在文件夹路径/tiny-engine-webservice/app/service/material-center/blockBuilder.ts下，实现如下：

private async publish(folder, blockInfo, version): Promise<any> {
    let { label, id } = blockInfo;
    label = (label as String).replace(/\W|_/g, '').toLocaleLowerCase() || 'default';
    const env = 'alpha'; // 视具体情况而定，可以从RUN_MODE环境变量取，也可以不使用
    const name = `@opentiny-assets/tinyengine-${env}-block-${label}-${id}`;
    this.pkgName = name;
    
    const prefix = `${this.config.dataBaseUrl}/${this.pkgName}@${version}`;
    const files = await globPromise(`**/*.*`, {
      cwd: folder
    });
    for(const file of files){
      const fileContent = await fs.readFile( path.join(folder, file));
      // 文件转二进制
      const base64Data = fileContent.toString('base64');
      const filename = file.substring(file.lastIndexOf('/') + 1);
      // 存储数据库
      await this.service.material.blockFilesStore.create({
        package_name: name,
        file_name: filename,
        version: version,
        file_content: base64Data
       });
     }
    return this.filterFiles(files, prefix);
  }

3. 新增后端获取区块产物 api 接口：

3.1 接口
MethodURIDescription
GETmaterial-center/api/block/read/根据区块链接信息读取文件
3.1.1 请求 request
NameMandatoryTypepositionDescription
file_nameMstringbody文件名
versionMstringbody版本
package_nameMstringbody包名
3.1.2 响应 Response
NameMandatoryTypeDescription
dataOobject响应数据实体

在 router/materialCenter/base.ts 新增路由：

// 路由获取文件链接读取文件
subRouter.get('/block/read/*', controller.materialCenter.block.readFileContentLink);

4、接口实现：

async readFileContentLink(){
    const params = this.ctx.params;
    const paramTemp = params[0];
    const filename = paramTemp.substring(paramTemp.lastIndexOf('/') + 1);
    const versionRegex = /@([\d.]+)/;
    const version = paramTemp.match(versionRegex)? paramTemp.match(versionRegex)[1]:null;
    const package_name = '@' + paramTemp.split('@')[1];
    const paramTemps =
    {
      file_name: filename,
      version: version,
      package_name: package_name

    }
    const res = await this.service.materialCenter.blockFileStore.find(paramTemps);
    this.ctx.type = 'text/javascript';
    this.ctx.body = Buffer.from(res.data[0]?.file_content, 'base64').toString('utf8');
  }

在 data-center 里 block-file-store/controller 下 block-file-store.js 新增根据文件名和包名查询最新一条的最高版本的文件信息的方法：

module.exports = {
    async find(ctx) {
        const { fileName, packageName} = ctx.request.query;
        return strapi.services['block-file-store'].find({
            file_name: fileName,
            package_name: packageName,
            _sort: 'version:DESC',
            _limit: 1
        });
      }
};

5、效果展示

a.后端用 postman 调用访问文件链接效果如下：

在这里插入图片描述

b.在环境上部署后，新建区块，对区块进行发布后，将区块加入在物料中，在画布里使用区块时，会成功返回web-compnents.umd.js文件，并且与刚才发布的区块版本、包名一致，能够正确显示区块内容。

总结

当前介绍了两种方案的具体实现方式

  • 使用方案一可以最大的提高区块发布的灵活性，并且也可以使用版本浮动功能，但是代价就是需要搭建局域网内的私仓服务和 unpkg 服务；
  • 使用方案二数据库存托管的方式看似更加方便，但是可能会造成数据库存储的内容过于庞大。

大家可以根据实际情况选择最符合自己场景需求的方案，若是您有不同的想法或者建议，也欢迎您一起参与讨论，在这里(https://github.com/opentiny/tiny-engine/discussions)留下您宝贵的思路。

感谢大家对 TinyEngine 低代码引擎的支持，感谢开发者欧阳同学的实战经验，助力 OpenTiny 共同探索更优质的解决方案。也希望后续有更多小伙伴一起加入 OpenTiny 的开源共建，让更多开发者受益~

关于 OpenTiny

在这里插入图片描述

OpenTiny 是一套企业级 Web 前端开发解决方案，提供跨端、跨框架、跨版本的 TinyVue 组件库，包含基于 Angular+TypeScript 的 TinyNG 组件库，拥有灵活扩展的低代码引擎 TinyEngine，具备主题配置系统TinyTheme / 中后台模板 TinyPro/ TinyCLI 命令行等丰富的效率提升工具，可帮助开发者高效开发 Web 应用。

欢迎加入 OpenTiny 开源社区。添加微信小助手：opentiny-official 一起参与交流前端技术～更多视频内容也可关注B站、抖音、小红书、视频号
OpenTiny 也在持续招募贡献者，欢迎一起共建

OpenTiny 官网：https://opentiny.design/
OpenTiny 代码仓库：https://github.com/opentiny/
TinyVue 源码：https://github.com/opentiny/tiny-vue
TinyEngine 源码： https://github.com/opentiny/tiny-engine

欢迎进入代码仓库 Star🌟TinyEngine、TinyVue、TinyNG、TinyCLI~
如果你也想要共建，可以进入代码仓库，找到 good first issue标签，一起参与开源贡献~

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/603854.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

JavaEE技术之MySql高级-ShardingSphere5（SpringBoot版本：3.0.5）

JavaEE技术之MySql高级-ShardingSphere5（SpringBoot版本：3.0.5）

文章目录 1 ShardingSphere-JDBC读写分离1.1 创建SpringBoot程序1.1.1、创建项目1.1.2、添加依赖1.1.3、创建实体类1.1.4、创建Mapper1.1.5、配置 Spring Boot1.1.6、配置shardingsphere 1.2 测试1.2.1 读写分离测试1.2.2 负载均衡测试1.2.3 事务测试常见错误 2 ShardingSphere…
阅读更多...
EMAP的Root工程及其他工具

EMAP的Root工程及其他工具

首先右击项目导航&#xff0c;新建EMAP系统配置 上方辅助工具功能&#xff1a; 1 2 3 4 5 6 7 8 9 10 查看重复数据模型:显示为放大镜标识&#xff0c;可以显示所有应用中相同…
阅读更多...
rabbitmq集群搭建失败解决

rabbitmq集群搭建失败解决

1. 现象 1. 三台机器都已经修改hosts&#xff0c;各个节点ping节点名正常 2. erlang.cookie各节点值一样 执行下面步骤加入失败 rabbitmqctl stop_app # 停止rabbitmq服务 rabbitmqctl reset # 清空节点状态 rabbitmqctl join_cluster rabbitrabbitmq3 rabbitmqctl start_ap…
阅读更多...
STM32 GPIO介绍

STM32 GPIO介绍

每个GPI/O端口有两个32位配置寄存器(GPIOx_CRL&#xff0c; GPIOx_CRH)&#xff0c;两个32位数据寄存器 (GPIOx_IDR和GPIOx_ODR)&#xff0c;一个32位置位/复位寄存器(GPIOx_BSRR)&#xff0c;一个16位复位寄存器(GPIOx_BRR)和一个32位锁定寄存器(GPIOx_LCKR)。 通过软件配置寄…
阅读更多...
Redis-三主三从高可用集群搭建

Redis-三主三从高可用集群搭建

正式搭建之前&#xff0c;注意事项&#xff08;坑&#xff09;提前放到最开始&#xff0c;也可以出问题回来看&#xff0c; &#xff08;1&#xff09;第二步中最好将配置文件中的logfile自定义一个目录&#xff0c;以便于在第五步中启动出错的时候迅速定位错误。 &#xff0…
阅读更多...
【SpringBoot】 什么是springboot(一)？如何搭建springboot项目？

【SpringBoot】 什么是springboot(一)？如何搭建springboot项目？

文章目录 SpringBoot第一章1、什么是springboot1、回顾ssm项目搭建流程2、springboot项目的优点2、搭建springboot项目方式1：方式2：第二章1、基本配置1、热部署2、注解3、端口配置application.properties特点application.yml特点注意4、环境配置springboot中的配置文件要求5、…
阅读更多...
笔记：编写程序，绘制一个展示支付宝月账单报告的饼图

笔记：编写程序，绘制一个展示支付宝月账单报告的饼图

文章目录 前言一、饼图是什么&#xff1f;二、编写代码总结 前言 笔记&#xff1a;编写程序&#xff0c;绘制一个展示支付宝月账单报告的饼图 &#xff08;1&#xff09; 导入 matplotlib.pyplot 模块&#xff1b; &#xff08;2&#xff09; 准备饼图所需的数据&#xff1b; …
阅读更多...
进程状态与优先级

进程状态与优先级

Linux内核源代码&#xff1a; 首先我们需要明确一点&#xff0c;Linux操作系统和操作系统的进程状态是不同的 上图大概标识了各个状态对应在操作系统的状态 普通进程 R运行状态&#xff08;running&#xff09;: 并不意味着进程一定在运行中&#xff0c;它表明进程要么是在…
阅读更多...
【论文笔记 | 异步联邦】FedSA

【论文笔记 | 异步联邦】FedSA

FedSA&#xff1a;一种处理 non-IID 数据 的 过时感知 异步联邦算法 1. 论文信息 FedSA&#xff1a;A staleness-aware asynchronous Federated Learning algorithm with non-IID data&#xff0c;Future Generation Computer Systems&#xff0c;2021.7&#xff0c;ccfc 是…
阅读更多...
「网络流 24 题」太空飞行计划 【最大权值闭合图】

「网络流 24 题」太空飞行计划 【最大权值闭合图】

「网络流 24 题」太空飞行计划 题意 有 n n n 个实验 和 m m m 个器械&#xff0c;每个实验都需要若干个指定的器械才能进行 实验 i i i 的盈利为 p i p_i pi​&#xff0c; 器械 j j j 的花销为 c j c_j cj​ 找出纯利润最大的实验计划 思路 这是非常典型的最大权值…
阅读更多...
STM32 各外设GPIO配置

STM32 各外设GPIO配置

高级定时器TIM1/TIM8 通用定时器TIM2/3/4/5 USART SPI I2S I2C接口 BxCAN SDIO ADC/DAC 其它I/O功能
阅读更多...
如何用Jmeter压测

如何用Jmeter压测

推荐你阅读 互联网大厂万字专题总结 Redis总结 JUC总结 操作系统总结 JVM总结 Mysql总结 微服务总结 互联网大厂常考知识点 什么是系统调用 CPU底层锁指令有哪些 AQS与ReentrantLock原理 旁路策略缓存一致性 Java通配符看这一篇就够 Java自限定泛型 技术分享 如何vscode中刷力扣…
阅读更多...
字节跳动（社招）四面算法原题

字节跳动（社招）四面算法原题

TikTok 进展 又是一期定时汇报 TikTok 进展的推文。 上周&#xff0c;美国总统拜登签署了价值 950 亿美元的一揽子对外援助法案。 该法案涉及强制字节跳动剥离旗下应用 TikTok 美国业务&#xff0c;即 针对 TikTok 非卖即禁的"强抢行为"开始进入九个月&#xff08;27…
阅读更多...
每日一题 非对称之美

每日一题 非对称之美

题目描述 I-非对称之美_牛客小白月赛31 (nowcoder.com) 题目解析 贪心算法的应用 考虑以下情况&#xff1a;当字符串中的字符全部相同时&#xff0c;即使删除任意一个字符&#xff0c;也无法使其成为一个回文串。这种情况下&#xff0c;我们无法直接套用上述的逐步比较方法。…
阅读更多...
树莓派4b红外检测

树莓派4b红外检测

1.红外检测连接图 2.红外检测工作原理 红外传感器的工作原理类似于物体检测传感器。该传感器包括一个红外LED和一个红外光电二极管&#xff0c;因此通过将这两者结合起来&#xff0c;可以形成一个光耦合器。 红外LED是一种发射红外辐射的发射器。该LED看起来与标准LED相似&a…
阅读更多...
一、手写一个uart协议——rs232

一、手写一个uart协议——rs232

先了解一下关于uart和rs232的基础知识 文章目录 一、RS232的回环测试1.1模块整体架构1.2 rx模块设计1.2.1 波形设计1.2.2代码实现与tb1.2.4 仿真 1.3 tx模块设计1.3.1 波形设计1.3.2 代码实现与tb1.3.4 顶层设计1.3.3 仿真 本篇内容&#xff1a; 一、RS232的回环测试 上位机…
阅读更多...
安卓surfaceview的使用方式

安卓surfaceview的使用方式

1. 什么是surfaceview surfaceview内部机制和外部层次结构 在安卓开发中&#xff0c;我们经常会遇到一些需要高性能、高帧率、高画质的应用场景&#xff0c;例如视频播放、游戏开发、相机预览等。这些场景中&#xff0c;我们需要直接操作图像数据&#xff0c;并且实时地显示到…
阅读更多...
大模型微调实战之强化学习 贝尔曼方程及价值函数（五）

大模型微调实战之强化学习 贝尔曼方程及价值函数（五）

大模型微调实战之强化学习 贝尔曼方程及价值函数&#xff08;五&#xff09; 现在&#xff0c; 看一下状态-动作值函数的示意图&#xff1a; 这个图表示假设首先采取一些行动(a)。因此&#xff0c;由于动作&#xff08;a&#xff09;&#xff0c;代理可能会被环境转换到这些状…
阅读更多...
不止于量子！“光与热”两大架构重塑计算前沿

不止于量子！“光与热”两大架构重塑计算前沿

在探索超越传统计算机性能的途径中&#xff0c;量子计算通常被视为一种前沿技术。然而&#xff0c;它并非解决所有计算挑战的唯一方案。事实上&#xff0c;最近有两家公司推出了基于独特物理原理的计算设备&#xff0c;这些设备专门针对特定应用设计&#xff0c;据称在处理特定…
阅读更多...
Python数据分析之绘制相关性热力图的完整教程

Python数据分析之绘制相关性热力图的完整教程

前言 文章将介绍如何使用Python中的Pandas和Seaborn库来读取数据、计算相关系数矩阵&#xff0c;并绘制出直观、易于理解的热力图。我们将逐步介绍代码的编写和执行过程&#xff0c;并提供详细的解释和示例&#xff0c;以便读者能够轻松地跟随和理解。 大家记得需要准备以下条…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站