Mac上部署Draw.io网页版无坑保姆教程

Mac上部署Draw.io网页版无坑保姆教程

1. 下载源码

Github仓库连接

总共有三种选择：Web端、桌面 && Docker。本教程是 Web 端教程

首先在终端通过以下指令获取 Draw.io Web 端的源码到本地：

git clone https://github.com/jgraph/drawio.git

git pull

2. 环境配置

2.1 ant

我总共尝试过两种方法，一种是用brew install ant ，但是报错了，报错图如下，尝试几次未能解决就放弃了用 brew

第二种方法可能稍有曲折，但最终成功解决。首先是去 ant 的官网下载所需版本的二进制zip包。本篇教程用的是1.9.16。不同版本对应的 Java 环境自己看好，按需下载。

解压后根据自己需要放到特定目录

然后在终端进入 ant 解压后的目录，输入 pwd 命令获得该目录路径，如下图所示(知道完整路径的话这步可以省略)：

接着回到用户主目录：cd ～

编辑 ._bash_profile文件：vim ._bash_profile

内容如下：

export ANT_HOME=上面获取的路径

export PATH=$PATH:.:${ANT_HOME}/bin

⚠️：添加PATH时，如PATH已存在，在已存在的内容后面添加 ${ANT_HOME}/bin 即可，添加完成后的PATH可能是这样的：PATH=$JAVA_HOME/bin:$PATH:.:$JMETER_HOME/bin:${ANT_HOME}/bin

保存退出，终端输入 source .bash_profile （可能每次重启终端都要重复输入一次）

⚠️ 如果有下图所示报错：

进入刚刚的._bash_profile文件 ，删除 source .bashrc，再一次保存退出。类似错误自己灵活应对

完成后输入 ant -version 出现下图说明 ant 成功安装

参考链接

2.2 Java

先在官网下载jdk，获得到.dmg文件，按照提示正常安装即可，无坑。完成后进入终端，输入 java -version 出现下图说明成功安装：

参考链接：由于过于简单，就不添加参考链接了，遇到问题针对性可以搜一下～

2.3 Tomcat

如果不需要用这个软件部署的话此步骤可以忽略

首先在官网下载一个所需版本的 Tomcat 的 zip包，本篇教程用的是10.0.16。

解压后根据自己需要放到特定目录

然后终端进入 Tomcat 解压后的bin目录，使用 ./startup.sh 命令启动

如出现 Permission denied 提示，先使用 chmod u+x *.sh 命令进行权限配置

然后使用 ./startup.sh 命令启动再次启动

验证方式：可以在浏览器输入 http://localhost:8080/ 能打开 Tomcat 首页，说明配置成功，如果打不开，尝试使用命令：sudo sh ./startup.sh（我没试过因为我直接成功了）

成功后先用关闭命令 ./stutdown.sh 关闭 。 ⚠️启动和关闭都是在bin目录下执行

参考链接

3. 源码编译

好了好了 配了那么久环境 回归正题 还记得刚刚下的 darw.io 的源码搁哪儿了吗？

终端cd进入源码根目录，然后通过 cd etc/build && ant war 命令生成 war 包

然后找到在 drawio-dev/build 目录下的draw.war，拷贝到 apache-tomcat-10.0.16/webapps 目录中（你的目录可能跟我不同）

完成后查一下本机的ip地址，方法是系统偏好设置 -〉网络 -〉高级 -〉TCP/IP，IPv4地址就是了（知道的同学忽略此步）

现在用刚刚 2.3 种的方法启动一下 Tomcat，然后浏览器访问：http://你本机的ip地址:8080/draw/ ，即可打开本地部署的drawio网站

4. Successful，Sweet！