1. 爱玩实验室首页
  2. Docker系列

【好玩儿的Docker项目】一个简单好用，风靡硅谷的白板工具——Excalidraw

Roy • • Docker系列 • 阅读 1514

非常好用的白板工具！

本博客用什么VPS？创作不易，欢迎请咕咕喝杯咖啡☕☕☕

808f93aad1d266a159bf17a9f035a1ee.png

前言

本周和大家介绍一个简单好用的风靡硅谷的白板工具——Excalidraw

用它，你可以画出下面这样的图：

8cf2a304c43fc4871df9184abc53f8ba.png

066bf9819a643d01fef583ffdcb75b40.png

1. 介绍

Excalidraw 是近两年新起的一款画图工具，主要包含白板、流程图的功能，它简单好用，有画图界的 Markdown 之称。

1.1 特点

  • 开源（MIT Lisence）
  • 手绘风格
  • 浏览器直接打开，无需安装，适配移动端
  • 简单的excel数据可以复制直接转换成图表
  • 功能强大，丰富的图形库，进行流程图绘制时，也会自动吸附箭头等，用起来很方便
  • 支持中文
  • 支持docker（一键部署）
  • 文件支持导入导出（本质是json文件）

1.2 小故事（摘自@pubuzhixing)

作者 vjeux 是 facebook 团队成员，项目在开始阶段就是就是以开源的方式推进，当时作者在 Twitter 上发了一些推文介绍了，即刻 Excalidraw 就吸引了很多开发者的关注，大家都感觉这个东西虽然功能简单，但是你只要画时间了解下就会喜欢上它，其中不乏很多大佬（Dan）。

698bc2c341e6d1bb9c469be2ba14ebf6.png

@dan_abramov 6:01 PM · Jan 5, 2020

Only been using Excalidraw for a few hours and it’s obviously still very rough — but it’s already my most favorite graphical editor for sketching, ever.

翻译：只使用了几个小时的 Excalidraw，它显然仍然很粗糙——但它已经是我最喜欢的素描图形编辑器了。

它最初的名字还不叫 Excalidraw，而是叫 Excalibur

Excalibur（传说中的圣剑）

Excalibur是传说中不列颠国王 亚瑟王 从湖之仙女那得到的圣剑。此剑是精灵在 阿瓦隆（Avalon）所打造，剑锷由黄金所铸、剑柄上镶有 宝石，并因其锋刃削铁如泥。

它的 Logo 也是手绘的圣剑（也有说它是钢笔的），可以说跟它的名字和实际意义很统一了。

1.3 相关地址

官网地址：https://plus.excalidraw.com/
GitHub地址：https://github.com/excalidraw/excalidraw （32.4k star）
discord地址：https://discord.gg/UexuTaE
demo：https://excalidraw.com/ （可能被墙了）

2. 项目展示

image-20220903221639726

4ac541dd0c631dc781722566d09fa706.png

3. 搭建环境

  • 服务器：腾讯香港轻量应用服务器24元/月VPS一台本期搭建用的是腾讯轻量购买链接的服务器，（最好是选非大陆（香港）的服务器）如果是小白刚开始玩的话，还可以购买Racknerd的服务器，最低一年不到100块（不过搭建Docker还是建议选择1G内存以上的机器）（Racknerd服务器介绍：点击查看）
  • 系统：Debian 10（DD脚本 非必需DD用原来的系统也OK，之后教程都是用Debian或者Ubuntu搭建～）
  • 安装好Docker、Docker-compose（相关脚本）
  • 【非必需但建议】域名一枚，并做好解析到服务器上（域名购买、域名解析 视频教程）
  • 【非必需】提前安装好宝塔面板海外版本aapanel，并安装好Nginx（安装地址）
  • 【非必需本教程选用】安装好Nginx Proxy Manager（相关教程）

服务器要求：不是非常高，能搭建Docker即可，建议1G以上。

4. 搭建视频

YouTube：https://youtu.be/kZIwBzT0B6Y

哔哩哔哩：http://www.bilibili.com/BV1814y1s79D

5. 搭建方式

安装系统（腾讯云轻量应用服务器）

e59713fba8726d3cb55ae11bca83fe3c.png

腾讯云轻量服务器最大的特点就是“轻量”，相比CVM，更适合小白上手，这边我们之间选择Docker基础镜像，就可以省去后面安装Docker的步骤（如果你非要用国内的服务器，这边装的Docker镜像还会帮你配置好国内镜像源，让你加速访问docker镜像资源）。

登陆（腾讯云轻量应用服务器）

2722040ee311eb4a9ebf2a4945bf38f4.png

c0b5d360053746c4095d592967ee401f.png

e0ba858f021b846ad0abc27acf5008c2.png

5.1 服务器前期配置

服务器初始设置，参考：

新买了一台服务器“必须”要做的6件小事

保护好你的小鸡！保姆级服务器安全教程！

这边由于我们用的是腾讯云轻量应用服务器，系统默认就帮我们创建了名字是lighthouse的用户，系统后台也有防火墙（默认就开了几个常用的端口）

对小白用户来说，可以不用再去管繁琐的服务器安全的配置，大大降低了服务器防护的门槛。

【Docker系列】不用宝塔面板，小白一样可以玩转VPS服务器！

sudo -i # 切换到root用户

apt update -y  # 升级packages

apt install wget curl sudo vim git -y  # Debian系统比较干净，安装常用的软件

注意：VPS的内存如果过小，建议设置一下SWAP，一般为内存的1-1.5倍即可，可以让系统运行更流畅！

设置SWAP可以用脚本:

wget -O box.sh https://raw.githubusercontent.com/BlueSkyXN/SKY-BOX/main/box.sh && chmod +x box.sh && clear && ./box.sh

image-20220528185512488

选择18，然后输入你想要扩容的数值即可。

image-20220528185604586

使用腾讯云轻量应用服务器的小伙伴可以直接跳到5.2.4

5.2 安装Docker（使用腾讯云轻量应用服务器可跳过这一部分）

5.2.1 非大陆服务器Docker安装

wget -qO- get.docker.com | bash
docker -v  #查看docker版本
systemctl enable docker  # 设置开机自动启动

修改Docker配置（可选）（来自烧饼博客）

以下配置会增加一段自定义内网 IPv6 地址，开启容器的 IPv6 功能，以及限制日志文件大小，防止 Docker 日志塞满硬盘（泪的教训）：

cat > /etc/docker/daemon.json <<EOF
{
    "log-driver": "json-file",
    "log-opts": {
        "max-size": "20m",
        "max-file": "3"
    },
    "ipv6": true,
    "fixed-cidr-v6": "fd00:dead:beef:c0::/80",
    "experimental":true,
    "ip6tables":true
}
EOF

然后重启 Docker 服务：

systemctl restart docker

5.2.2 非大陆服务器Docker-compose安装

sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
docker-compose --version  #查看docker-compose版本

5.2.3 国内服务器安装docker

curl -sSL https://get.daocloud.io/docker | sh
docker -v  #查看docker版本
systemctl enable docker  # 设置开机自动启动

修改Docker配置（可选）（来自烧饼博客）

以下配置会增加一段自定义内网 IPv6 地址，开启容器的 IPv6 功能，以及限制日志文件大小，防止 Docker 日志塞满硬盘（泪的教训）：

cat > /etc/docker/daemon.json <<EOF
{
    "log-driver": "json-file",
    "log-opts": {
        "max-size": "20m",
        "max-file": "3"
    },
    "ipv6": true,
    "fixed-cidr-v6": "fd00:dead:beef:c0::/80",
    "experimental":true,
    "ip6tables":true
}
EOF

然后重启 Docker 服务：

systemctl restart docker

5.2.4 国内服务器安装docker-compose

curl -L https://get.daocloud.io/docker/compose/releases/download/v2.1.1/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose

docker-compose --version  #查看docker-compose版本

5.3 安装NginxProxyManager

参考这边的内容：https://blog.laoda.de/archives/nginxproxymanager

5.4 创建安装目录

创建一下安装的目录：

sudo -i

mkdir -p /root/data/docker_data/excalidraw

cd /root/data/docker_data/excalidraw

这边我们有两种搭建方法，一种是用官方的来自己构建，另一种是用群里小伙伴做的镜像直接安装。

用官方的优点是能保证使用的是最新的版本但是对于差一点的机器，构建镜像时间会有点长；

用群里小伙伴的镜像好处是配置文件简单，但是可能不是最新版本的，大家自行取舍。

官方安装：

git clone https://github.com/excalidraw/excalidraw.git

cd excalidraw

vim docker-compose.yml

英文输入法下，按i

version: "3.8"

services:
  excalidraw:
    build:
      context: .
      args:
        - NODE_ENV=development
    container_name: excalidraw
    ports:
      - "8099:80"  # 可以更改8099端口为自己想要的端口
    restart: on-failure
    stdin_open: true
    healthcheck:
      disable: true
    environment:
      - NODE_ENV=development
    volumes:
      - ./:/opt/node_app/app:delegated
      - ./package.json:/opt/node_app/package.json
      - ./yarn.lock:/opt/node_app/yarn.lock
      - notused:/opt/node_app/app/node_modules

volumes:
  notused:

按一下esc，然后:wq 保存退出，之后，

docker-compose up -d

使用群里小伙伴的docker-compose安装：


cd /root/data/docker_data/excalidraw
vim docker-compose.yml

因为官方的是自己build的版本，会比较花时间，这边推荐可以使用这个docker-compose.yml，感谢小伙伴提供@Derek：

version: '3.3'
services:
    excalidraw:
        ports:
            - '8099:80'  # 可以更改8099端口为自己想要的端口
        environment:
            - TZ=Asia/Shanghai
            - PUID=1000
            - PGID=1000
        volumes:
            - './data:/app/web'
        restart: unless-stopped
        image: 'ddsderek/excalidraw:latest'

./data这个可以换成你自己服务器的路径；

冒号左边的8099可以换成主机未被占用的端口;

其他不建议修改。

按一下esc，然后:wq 保存退出，之后，

docker-compose up -d

5.5 打开服务器防火墙并访问网页

打开防火墙的端口8099

腾讯云打开方法如下：

image-20220630215240864
image-20220630220546335

这边我们填8099 确定即可（如果你在dockercompose文件里换了8081，这边就需要填8081，以此类推）

image-20220819145844555

查看端口是否被占用（以8099为例），输入：

lsof -i:8099  #查看8099端口是否被占用，如果被占用，重新自定义一个端口

如果啥也没出现，表示端口未被占用，我们可以继续下面的操作了～

如果出现：

-bash: lsof: command not found

运行：

apt install lsof  #安装lsof

如果端口没有被占用（被占用了就修改一下端口，比如改成8081，注意docker命令行里和防火墙都要改）

耐心等待，等出现：

我们就可以输入http://ip:8099访问了。

注意：

1、不知道服务器IP，可以直接在命令行输入：curl ip.sb，会显示当前服务器的IP。

2、遇到访问不了的情况，请再次检查在宝塔面板的防火墙和服务商的后台防火墙是否打开对应了端口。

因为我们后续想要分享给别人，IP+端口太不优雅了，咕咕建议大家还是搞一个域名，容易记，看起来也更正规一点。这样可以做https，会让网页更安全。（非要IP+端口访问的，可以直接跳到5.6，并且跳过6. 反向代理部分）

而且namesilo上面xyz后缀的域名一年就7块钱，可以年抛。

如果想要长期使用，还是建议买com后缀的域名，更加正规一些，可以输入laodade来获得1美元的优惠（不知道现在还有没有）

namesilo自带隐私保护，咕咕一直在用这家，价格也是这些注册商里面比较低的，关键是他家不像其他家域名注册商，没有七七八八的套路！（就是后台界面有些丑古老 = =）

【域名购买】Namesilo优惠码和域名解析教程（附带服务器购买推荐和注意事项）

我们接着往下看！

5.6 更新

5.6.1 docker-compose部署

cd /root/data/docker_data/excalidraw

docker-compose down 

cp -r /root/data/docker_data/excalidraw /root/data/docker_data/excalidraw.archive  # 万事先备份，以防万一

docker-compose pull

docker-compose up -d 

docker image prune  # prune 命令用来删除不再使用的 docker 对象。删除所有未被 tag 标记和未被容器使用的镜像

提示：

WARNING! This will remove all dangling images.
Are you sure you want to continue? [y/N]

输入y

利用Docker搭建的应用，更新非常容易～

5.7 卸载

docker stop excalidraw

docker rm -f excalidraw  # 停止容器，此时不会删除映射到本地的数据

rm -rf /root/data/docker_data/excalidraw  # 完全删除映射到本地的数据

可以卸载得很干净。

6. 反向代理

6.1 利用Nginx Proxy Manager

在添加反向代理之前，确保你已经完成了域名解析，不会的可以看这个：域名一枚，并做好解析到服务器上（域名购买、域名解析 视频教程）

054215cf70ff4b544dfbf48638da380c.png

之后，登陆Nginx Proxy Manager（不会的看这个：安装Nginx Proxy Manager（相关教程））

注意：

Nginx Proxy Manager（以下简称NPM）会用到80、443端口，所以本机不能占用（比如原来就有Nginx）

直接丢几张图：

image-20220502123517401
041c6dacbfe151437ab1decb101aa154.png

注意填写对应的域名、IP和端口，按文章来的话，应该是8099

IP填写：

如果Nginx Proxy Manager和Memos在同一台服务器上，可以在终端输入：

ip addr show docker0

查看对应的Docker容器内部IP。

否则直接填excalidraw所在的服务器IP就行。

image-20220403104353185

再次打开，勾选这些：

image-20220728212042482

然后就可以用域名来安装访问了。

6.2 利用宝塔面板

发现还是有不少小伙伴习惯用宝塔面板，这边也贴一个宝塔面板的反代配置：

直接新建一个站点，不要数据库，不要php，纯静态即可。

然后打开下面的配置，修改Nginx的配置。

image-20220819150345725

image-20220819150542867

代码如下：

    location / {
      proxy_pass http://127.0.0.1:8099/;
      rewrite ^/(.*)$ /$1 break;
      proxy_redirect off;
      proxy_set_header Host $host;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Upgrade-Insecure-Requests 1;
      proxy_set_header X-Forwarded-Proto https;
    }

此方法对90%的反向代理都能生效。

有同学可能会问，为什么不直接用宝塔自带的反向代理功能。

image-20220819150730128

也可以，不过咕咕自己之前遇到过当有多个网站需要反代的时候，在这边设置会报错的情况 = =

所以后来就不用了，直接用上面的方法来操作了。

7. 使用教程

7.1 安装和配置

见咕咕的视频。

【好玩儿的Docker项目】一个简单好用，风靡硅谷的白板工具——Excalidraw

8. 目前遇到的问题

1、中文版本手写字体 已解决

【好玩儿的Docker项目】一个简单好用，风靡硅谷的白板工具——Excalidraw

2、无法分享链接

3、无法协同工作

9. 结尾

祝大家用得开心，有问题可以去GitHub提Issues，也可以在评论区互相交流探讨。

同时，项目处于刚开始阶段，有能力给项目做贡献的同学，也欢迎积极加入到项目中来，贡献自己的一份力量！

参考资料

https://github.com/excalidraw/excalidraw
https://www.cnblogs.com/cuianbing/p/14816846.html
https://juejin.cn/post/6971996369569447949
https://zhuanlan.zhihu.com/p/425837520
https://juejin.cn/post/7119512386029125668

---------------
如何觉得文章内容不错，欢迎点击一下广告，支持一下咕咕😍😍😍

原创文章，作者：Roy，如若转载，请注明出处：https://iwanlab.com/docker-compose-install-excalidraw/

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
Roy的头像Roy
0 5
上一篇 2023年6月15日 下午7:24
下一篇 2023年6月15日 下午7:24
   

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

评论列表（5条）

  • Karl
    Karl 2023年11月29日 下午5:12

    咕咕，请问现在私有部署支持在线协作了吗

    回复
    • Roy的头像
      Roy 2023年11月29日 下午5:37

      @Karl：我没注意，好久没用了 = =

      回复
    • Karl
      Karl 2023年11月29日 下午6:56

      @Roy：笑哭好的

      回复
  • Ajeo
    Ajeo 2023年9月8日 下午4:06

    arm架构的机器好部署端口号映射一直有问题

    回复
    • Roy的头像
      Roy 2023年9月8日 下午4:14

      @Ajeo：应该是arm的问题，有些docker镜像不支持arm架构，这个excalidraw我看是本地构建的，可能也是和arm不怎么兼容

      回复
Bilibili
YouTube
Telegram