skip to content
Honwhy Wang

微信 Markdown 编辑器部署Cloudflare Workers简单方式

/ 5 min read

微信, 公众号, cloudflare, workers

微信 Markdown 编辑器部署Cloudflare Workers简单方式

这可能是最简单部署方式了，只需要一行命令即可搞定。

fork 或者 clone 项目

前往doocs/md 项目进行fork 或者clone 到本地。

创建Cloudflare 账号

前端cloudflare/dash 注册账号，如已经有账号了，这一步跳过。

登录Cloudflare 账号

使用命令行操作，进入到 md项目目录，然后执行登录

Terminal window
cd /path/to/md
npx wrangler login

npx wrangler login会 引导打开浏览器进行登录。

编辑及部署

建议使用pnpm 打包命令。 还是在原来的目录。

Terminal window
pnpm install # 安装依赖
pnpm web wrangler:deploy # 部署

最重要的命令是 deploy，执行成功后可以看到类似下面的输出，

可以看到deploy 成功后，cloudflare workers已经分配好了一个访问域名，比如https://md-web.honwhy-wang.workers.dev，通过这个域名就可以使用编辑器了。

使用建议

既然采用了cloudflare workers进行项目部署，建议使用公众号图床管理自己的图片资源，不再担心图床资源收费和不够额度问题。

配置图床

如何获取appID和appsecret 后文会有讲解。

切换默认图床

更新

如果md 项目更新迭代了，只需要在原来的目录执行，

Terminal window
git pull
pnpm web wrangler:deploy

重新部署后，就可以使用上迭代后的功能了。

题外话

之所以适配cloudflare workers的部署方式，目的是为了使用它的后端服务能力，进一步说是为了解决对接微信公众号图床的问题。

独立域名

虽然cloudflare workers 提供了二级*.workers.dev 域名，但是在不使用代理的情况，该域名可能无法解析到正确的IP。

最好的解决办法就是配置独立域名。你需要

  • 购买域名
  • 域名交给cloudflare 进行管理

配置独立域名方式很简单，登录cloudflare 控制台，进入我们新建的md-web workers，打开配置tab，

在【域和路由】中点击添加，在右侧抽屉中选择

输入，比如md.honwhy.wang

配置生效后（大约10分钟内），即可通过新的域名进行访问。

关于对接公众号图床

公众号后他地址：https://mp.weixin.qq.com/

1、使用了公众号的openapi进行对接 2、需要开通公众号开发者账号

登录公众号后台，访问 设置与开发>基本配置，启用开发者，并走账号登录认证流程获取AppSecret，注意保存AppSecret。

3、需要配置IP白名单 由于微信做了安全限制，从cloudflare workers后台访问微信openapi 服务需要做IP地址放行。

打开网页控制台（F12）,选择公众号图床，配置好账号密钥，尝试上传一张图片。如果有看到相关IP被限制的提示，则将这个IP复制下来。

配置白名单

通过 设置与开发>基本配置的IP白名单， 或者 设置与开发 > 安全中心 进行配置

注意：

  • IP至多可输入200个
  • 多个IP配置请用换行分割
  • IP段仅支持 /8、/16、/24 网段，不支持其他网段
  • 不支持IP:端口形式

原理解释

前端不直接访问公众号openapi接口，首先访问workers的后台接口，比如部署访问网址是https://md.honwhy.wang，那么上传图片访问接口是 https://md.honwhy-wang/cgi-bin/media/uploadimg。这个workers后台接口收到请求转发到https://api.weixin.qq.com/cgi-bin/media/uploadimg 接口。

为什么要这么处理，原因是从https://md.honwhy.wang 直接访问https://api.weixin.qq.com 存在跨域问题。