前言
之前闲暇之余我基于 drawio 魔改了一个绘图工具——女朋友不想开Processon会员，我魔改了一个无限制的在线绘图软件，然后在小某书宣传了一波。
🌟体验地址🌟
也是有不少人用到了我们这个工具，刚看了一下注册用户已经有 1400+ 了，哈哈，小骄傲了一下，这也是我第一次做东西有这么多人用。
随之而来的是一些用户使用上的一些反馈，比如说已经有两位用户反馈不能导出 PDF 的问题。
那既然有用户用咱们的东西，还是尽量能完善就完善。
开始踩坑
首先，我们现在看看导出 PDF 它会做些什么。
看起来是调用了 EXPORT_URL ，这个 URL 在下面的地方配置：
默认不配置的话就是下面这样
点击导出就直接跳转 REPLACE_WITH_YOUR_IMAGE_SERVER ，所以点击就报错 404 了。
那么看起来这个导出是一个独立的服务，然后我就在 drawio 相关的仓库里面找呀找，终于让我找到了他做导出的仓库地址。
大致看了一下它的代码，它是基于 express+puppeteer 去做导出的。看到 puppeteer 的时候其实我的心已经凉了半截，很多年前部署过一次，也搞了很久。
不过那也没办法，再难也得上，在服务器上把它的仓库拉下来。安装依赖的时候发现需要 node18 ，服务器版本上是 node16 。
然后我就去升级 node 版本，用 nvm 装了一个 node18 之后，执行 node -v ，发现报错：
node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
我就咨询了一下 gpt
第一点更新操作系统不太现实，而且可能有很多坑；第二点用老版本也不行；第三点也不行因为这是操作系统少了依赖；第四点，使用 docker ，听起来很可行， docker 就不是为了解决这种环境不一致的问题的吗？
然后我又找到了这个导出服务对应的docker部署方式，试了一下，果然不行。
仔细看了一下之后，发现里面的 dockerfile 会去下载一些 google 相关的包，我的服务器又不通外网，肯定是下载不下来。
那无奈，就只能自己写了个 docker 脚本来试试：
FROM node:18.20.2
COPY . .
# 设置淘宝镜像源并禁用SSL证书验证
RUN npm config set registry http://registry.npm.taobao.org/ \
&& npm config set strict-ssl false
RUN npm install
CMD ["npm", "start"]
然后执行 docker build -t export-app . 来构建镜像，构建完成之后，使用 docker run -p 8000:8000 export-app 来启动容器，启动之后，调用一下，果不其然又报错了
e Error: Failed to launch the browser process!
这个时候查看了 puppeteer 的踩坑文档，发现也是少依赖导致的。 FROM node:18.20.2 这个基础镜像的操作系统是 Debian ，所以需要另外安装一些包，完整的 dockerfile 如下：
FROM node:18.20.2
# 更新apt软件包索引
RUN apt update
# 安装常用的系统软件包
RUN apt install -y \
ca-certificates \
fonts-liberation \
libasound2 \
libatk-bridge2.0-0 \
libatk1.0-0 \
libc6 \
libcairo2 \
libcups2 \
libdbus-1-3 \
libexpat1 \
libfontconfig1 \
libgbm1 \
libgcc1 \
libglib2.0-0 \
libgtk-3-0 \
libnspr4 \
libnss3 \
libpango-1.0-0 \
libpangocairo-1.0-0 \
libstdc++6 \
libx11-6 \
libx11-xcb1 \
libxcb1 \
libxcomposite1 \
libxcursor1 \
libxdamage1 \
libxext6 \
libxfixes3 \
libxi6 \
libxrandr2 \
libxrender1 \
libxss1
COPY . .
# 设置淘宝镜像源并禁用SSL证书验证
RUN npm config set registry http://registry.npm.taobao.org/ \
&& npm config set strict-ssl false
RUN npm install
CMD ["npm", "start"]
调用一下，大功告成，下面来简单介绍一下如何调用。
如何调用
首先容器里的 node 服务启动的是 8000 端口，我们启动容器的时候已经把宿主机的 8000 端口映射到容器的 8000 端口。所以我们只需要访问宿主机的 8000 端口，这个时候就需要在 nginx 这里配置一下转发：
location /node {
proxy_pass http://localhost:8000;
proxy_connect_timeout 120s;
proxy_send_timeout 60s;
proxy_read_timeout 60s;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_http_version 1.1;
proxy_set_header Connection "";
}
然后这个导出服务的路由配置如下：
访问任何的路径都可以，也就是说我们可以访问 https://hostname/node/export 来执行导出。
中文乱码
后续小伙伴体验之后，又给我提了一个 bug ，导出的 pdf 中文乱码
比如说这是我们绘制的流程图
导出来的 pdf 确是这样的
如果有搞过相关的导出需求的同学应该知道，是因为没有相关的字体文件所导致的。一般我们的宿主机上都会有字体文件，但是容器是十分精简的，可能就没有这些字体文件。
所以我们需要把宿主机的字体文件挂载一下到容器上：
命令如下：
docker run -d -p 8000:8000 -v /usr/share/fonts:/usr/share/fonts export-app
-v /usr/share/fonts:/usr/share/fonts 这句话的意思就是把宿主机的 /usr/share/fonts 目录与容器的 /usr/share/fonts 目录关联起来。
重启容器之后，再次导出，就没问题了
最后
其实我搞这个的时候，远没有文章写的那么顺利，中间踩过的坑有很多很多，各种报错。不过只从我看到它需要 node18 之后，我就把解决的思路放到容器化上。中间我也去找了一下有没有现成的镜像，无奈没找到我才选择自己构建镜像。
如果我之前没有接触过容器化技术的话，那么这个东西想必我是搞不定了。所以，你觉得前端有必要接触一些后端或者运维的知识吗？欢迎评论区聊聊～
以上就是本文的全部内容，如果你觉得有意思的话，点点关注点点赞吧～
