Linux系统部署部署excalidraw-cn白板工具

news2025/5/21 5:27:01

Linux系统部署部署excalidraw-cn白板工具

  • 一、excalidraw-cn介绍
  • 二、本地环境介绍
    • 2.1 本地环境规划
    • 2.2 本次实践介绍
    • 2.3 Yarn介绍
  • 三、检查本地环境
    • 3.1 检查本地操作系统版本
    • 3.2 检查系统内核版本
    • 3.3 检查系统是否安装yarn
  • 四、部署Node.js 环境
    • 4.1 下载Node.js安装包
    • 4.2 解压Node.js安装包
    • 4.3 复制二进制文件
    • 4.4 配置环境变量
    • 4.5 查看node版本
  • 五、安装yarn工具
    • 5.1 安装yarn
    • 5.2 检查yarn版本
  • 六、部署excalidraw-cn白板工具
    • 6.1 下载软件包
    • 6.2 启动服务
  • 七、访问excalidraw-cn

一、excalidraw-cn介绍

  • Excalidraw-CN 是支持中文手写和多画布的 Excalidraw 白板工具,也叫做handraw。

二、本地环境介绍

2.1 本地环境规划

本次实践为个人测试环境,操作系统版本为centos7.6。

hostname本地P地址操作系统版本内核版本python版本
jeven192.168.3.166centos 7.63.10.0-957.el7.x86_64 v16.17.03.6.8

2.2 本次实践介绍

1.本次实践部署环境为个人测试环境;
2.在centos7.6环境下安装homer静态主页。

2.3 Yarn介绍

  • Yarn是一个JavaScript包管理工具,由Facebook开发,旨在提高包的下载速度和稳定性。它可以替代NPM进行包的安装、更新、卸载等操作。

三、检查本地环境

3.1 检查本地操作系统版本

检查本地操作系统版本

[root@jeven ~]# cat /etc/redhat-release
CentOS Linux release 7.6.1810 (Core)

3.2 检查系统内核版本

检查系统内核版本

[root@jeven ~]# uname -r
3.10.0-957.el7.x86_64

3.3 检查系统是否安装yarn

检查系统是否安装yarn

[root@jeven ~]# yarn -v
bash: yarn: command not found...

四、部署Node.js 环境

4.1 下载Node.js安装包

下载Node.js安装包

wget https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz

4.2 解压Node.js安装包

解压Node.js安装包

tar -xvJf node-v16.17.0-linux-x64.tar.xz

在这里插入图片描述

4.3 复制二进制文件

将 /root/node-v16.17.0-linux-x64/bin/下的二进制文件复制到/usr/local/bin下

cp -a /root/node-v16.17.0-linux-x64/bin/node /usr/local/bin/node
cp -a /root/node-v16.17.0-linux-x64/bin/npm /usr/local/bin/npm

4.4 配置环境变量

  • 在/etc/profile文件中,新增以下两行:
export NODE_HOME=/root/node-v16.17.0-linux-x64/bin/
export PATH=$PATH:$NODE_HOME:/usr/local/bin/

  • 使变量生效
source /etc/profile

4.5 查看node版本

查看node版本

[root@ecs-52b7 ~]# npm -v
8.15.0
[root@ecs-52b7 ~]# node -v
v16.17.0

五、安装yarn工具

5.1 安装yarn

  • 使用npm全局安装yarn。
 npm install -g yarn

在这里插入图片描述

5.2 检查yarn版本

检查yarn版本

[root@jeven ~]# yarn --version
1.22.19

六、部署excalidraw-cn白板工具

6.1 下载软件包

下载xcalidraw-cn软件包

 git clone https://github.com/korbinzhao/excalidraw-cn.git

6.2 启动服务

  • 进入源码目录
cd excalidraw-cn/
  • 安装相关依赖
yarn

在这里插入图片描述

  • 启动服务器
yarn start

在这里插入图片描述

七、访问excalidraw-cn

访问地址:http://192.168.3.166:3000/
将IP地址替换为自己服务器IP地址

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Docker技术--Docker中的网络问题

1.docker中的网络通信 如果想要弄清楚docker中的网络通信问题,其实需要弄清楚这几个问题就可以:容器与容器之间的通信、容器与外部网络之间的通信、外部网络与容器之间的通信。 -a:容器与容器之间的通信,如下所示: 在默认情况下,docker使用网桥(Bridge模式)与NAT通信。这…

Java监听mysql的binlog 报错解决办法

报错:com.github.shyiko.mysql.binlog.network.AuthenticationException: Client does not support authentication protocol requested by server; consider upgrading MySQL client 解决方案:在mysql中执行以下命令 alter user rootlocalhost identi…

JS将对象转为字符串

使用JSON.stringify()将对象转换为字符串 var person {name: Jack,age: 27 }console.log("person:"); console.log(person);var result JSON.stringify(person);console.log("result:"); console.log(result); console.log(&qu…

3D模型轻量化引擎HOOPS平台助力3D开发实现大模型轻量化渲染、3D模型格式转换!

一、包含的软件开发工具包 HOOPS Web平台帮助开发人员构建基于Web的工程应用程序,提供高级3D Web可视化、准确快速的CAD数据访问和3D数据发布。 HOOPS Web平台包括三个集成软件开发工具包 (SDK): (1)Web端3D可视化引擎 HOOPSCom…

python的csv库:保存数字仅有15位,精度丢失的解决办法

废话不多说, 如果在字符串后添加制表符‘/t’能够解决问题,那么这确实是一个有效的解决方案。制表符‘/t’在CSV文件中可以被视为分隔符,确保数据不会被自动格式化或截断。 import csvdata [#15位数字["123456789012345"],#16位数…

Java集合体系

Java集合体系 一、概念二、集合分类 - java.util1、单列集合:一条数据只有一列1.1 List集合1.2 Set集合 2、双列集合:一条数据有两列2.1 特点2.2 Map接口的常用方法2.3 Map接口的常用实现类2.3.1 HashMap:key元素无序2.3.2 LinkedHashMap&…

微信开发之一键踢出群聊的技术实现

简要描述: 删除群成员 请求URL: http://域名地址/deleteChatRoomMember 请求方式: POST 请求头Headers: Content-Type:application/jsonAuthorization:login接口返回 参数: 参数名必选…

02 字母异位词分组

字母异位词分组 题解 哈希 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 题解 哈希 class Solution { public:vector<vector<string>> groupAnagram…

计网(第四章)(网络层)(六)

一、路由选择协议&#xff08;动态路由自动获取路由信息&#xff09;概述&#xff1a; 之前有提到过路由条目分为静态和动态两种。相应地&#xff0c;路由选择也就有静态和动态两种。 在第五节&#xff08;计网第四章&#xff08;网络层&#xff09;&#xff08;五&#xff0…

unapp 开发微信小程序 使用wx.createSelectorQuery()时候一直获取不到元素信息。

在自定义组件中&#xff0c;使用wx.createSelectorQuery() 不能用wx. 而是this.createSelectorQuery() 微信文档&#xff1a; 但是在uni的官方文档中并没有关于需要切换this的介绍&#xff0c;是用uni.createSelectorQuery()在自定义组件内部也是无效的。 以下是我在项目中使用…

【前端】常用功能合集

目录 js跳转到新标签打开PDF文件js每十个字符换行 es6用表达式或变量名作为对象的属性名 vuev-for插值、:style、:class父组件加载完后再加载子组件keep-alive缓存跨域请求第三方接口跨域请求之callback&#xff08;不建议&#xff09;读取本地文件浏览器播放提示音audio jquer…

【【萌新的STM32学习-19-蜂鸣器实验】】

萌新的STM32学习-19-蜂鸣器实验 STM32在正点原子的视频中并未讲述关于蜂鸣器的实验&#xff0c;我们自己探究一下作为简单的HAL库入门 蜂鸣器每隔 300ms 响或者停一次。LED0 每隔 300ms 亮或者灭一次。LED0 亮的时候蜂鸣器不叫&#xff0c;而 LED0 熄灭的时候&#xff0c;蜂鸣…

【类与对象】①认识类与对象

文章目录 1.初步认识2.类的定义3.类的访问限定符及封装4. 类的封装5.类的作用域6.类的实例化7.类的对象模型8.this指针 1.初步认识 C与C异同点&#xff1a; C语言是面向过程的&#xff0c;关注的是过程&#xff0c;分析出求解问题的步骤&#xff0c;通过函数调用逐步解决问题…

leetcode189. 轮转数组

题目&#xff1a; 给定一个整数数组 nums&#xff0c;将数组中的元素向右轮转 k 个位置&#xff0c;其中 k 是非负数。 示例&#xff1a; 示例 1: 输入: nums [1,2,3,4,5,6,7], k 3 输出: [5,6,7,1,2,3,4] 解释: 向右轮转 1 步: [7,1,2,3,4,5,6] 向右轮转 2 步: [6,7,1,2…

C语言每日一练-----Day(4)

本专栏为c语言练习专栏&#xff0c;适合刚刚学完c语言的初学者。本专栏每天会不定时更新&#xff0c;通过每天练习&#xff0c;进一步对c语言的重难点知识进行更深入的学习。 今日练习题关键字&#xff1a;记负均正    旋转数组的最小数字    二分查找 &#x1f493;博主…

Android自动化测试中操作技巧合集(建议收藏)

Android自动化测试中短信验证码的操作技巧 一、内容提供器机制简介 Android 系统采用了内容提供器(ContentProvider)机制来管理不同应用的数据访问。内容提供器为不同应用间的数据共享提供了接口&#xff0c;它们像是一个中央数据仓库&#xff0c;各个应用可以通过内容 URI 来存…

比较差值结构的两种排斥作用

( A, B )---3*30*2---( 1, 0 )( 0, 1 ) 让网络的输入只有3个节点&#xff0c;AB训练集各由6张二值化的图片组成&#xff0c;让差值结构中有两个点&#xff0c;一种情况两个点都属于A&#xff0c;一种情况两个点分别来自A和B。排列组合所有可能&#xff0c;统计迭代次数并排序。…

【C++多态】

目录 1.多态的概念2.多态的定义及实现2.1多态的构成条件2.2虚函数的一些细节2.3析构函数可以是虚函数吗&#xff1f;2.4 重载、覆盖(重写)、隐藏(重定义)的对比 3.抽象类4.多态的原理4.1虚函数表4.2虚函数地址的打印4.3多继承的函数虚表 1.多态的概念 什么是多态&#xff1f; …

FLV 封装格式解析

1、FLV 简介 FLV(Flash Video) 是 Adobe 公司推出的一种流媒体格式&#xff0c;由于其封装后的音视频文件体积小、封装简单等特点&#xff0c;非常适合于互联网上使用。目前主流的视频网站基本都支持FLV。采用 FLV 格式封装的文件后缀为.flv。直播场景下拉流比较常见的是 http…

git学习笔记(重实践) | 版本管理 - 分支管理 - 常见场景

文章目录 git学习笔记Git是什么仓库常见的命令commit 备注规范在文件下设置git忽略文件 .gitignore 版本管理git log | git reflog 查看提交日志/历史版本版本穿梭 git resetgit reset HEAD <file> git checkout -- fileName 丢弃工作区的修改git revertGit恢复之前版本的…