阅读 113

midwayjs+puppeteer部署实战

背景介绍

公司目前有场景需要在服务端生成用户形象截图,用户形象为基于spine(2d骨骼动画库)的2d可换装形象,通过pixi.js(基于HTML5的2D渲染引擎)+ pixi-spine(spine在pixi引擎内的运行库)在浏览器内可渲染用户形象,然后通过canvas截图生成形象图片(基于spine的换装系统设计后续也会分享)。由于部分装扮有使用时效,若依赖客户端渲染保存形象图片,就无法做到装扮过期时后台自动生成新的形象图片,因此在服务端实现此功能是必要的。

在服务端模拟浏览器渲染可基于puppeteer实现,接着要选择一个基于node的服务端框架。serverless一直很火,具有运维成本低、可自动扩展等优势,公司内也已有项目在生产环境使用。考虑到基于puppeteer的node应用一般很吃资源,服务压力上升后需要手动扩容,后续运维成本高,因此想利用serverless的自动扩容特性来降低服务的后续运维成本,所以该功能最终技术选型为Fass类型的midway.js+puppeteer。

在实际开发过程中,遇到了很多部署上的问题,记录下来防止二次踩坑。

实操环节

项目初始化

先根据midway.js官方提供的初始化Fass项目的方式做项目初始化,初始化后文件目录如下:

33309d6500d34a52a90c399c937d5084.png

这里重点说明下f.yml文件,该文件为函数服务的配置文件,指定了服务名称、serverless环境提供商、函数列表、自定义域名等信息;其他文件和普通的node服务结构相差不大。

部署远端

项目初始化完成后,本地安装puppeteer并开发使用puppeteer的相关功能后,执行 npm run dev 运行正常,接下来就可以部署远端了,首先配置好云商的发布账号密码后就可以发布了,这里我接入的是阿里云服务,其他服务商是类似的流程。执行 npm run deploy 后,项目会多出一个.serverless文件夹,结构如下:

c3fae7aabe0e4b7f8de4dee0753c3612.png

该文件夹才是最终会部署到serverless服务的代码,且实际运行的是dist文件夹下的代码而不是src下的代码;此文件夹真正起到服务配置的是template.yml文件,是midway根据f.yml和项目代码构建出来的,该文件夹下的f.yml文件并无实际作用;且部署命令底层调用的是fun命令,在该文件夹下直接执行fun相关的命令也可完成部署。

部署问题解决

在执行npm run deploy时遇到一些问题:

  1. 首先会询问是否启用nas,是否自动配置nas,这是大依赖部署的解决方式,可参考阿里云轻松解决大依赖部署
  2. 在确认使用nas并自动配置后,会陷入发布nas的死循环(issues链接)导致一直发布不成功,这里应该是midway官方没有处理好,需要自行解决,解决方式如下:死循环后手动终止发布流程,然后在.serverless文件夹下执行fun nas sync && fun deploy发布成功;
  3. 虽然部署成功,但远端实际运行puppeteer会报错,查阅资料后了解到因为puppeteer本身依赖非常多的系统库,在本地运行环境安装依赖和远端安装是有差异的,为确保宿主环境完全一致,需用docker在本地拉取阿里云的node镜像,在镜像中完成依赖的安装,fun已经集成了docker模式的安装,只需执行fun install -d即可;

为了解决已上问题,最终发布命令改造成如下:

cross-env UDEV_NODE_ENV=production midway-bin package --skipZip -V && cd .serverless && fun install -d && fun nas sync && fun deploy -y
复制代码

依次解说下:

  1. cross-env UDEV_NODE_ENV=production midway-bin package --skipZip -V:使用midway-bin打包项目,但不发布;--skipZip跳过zip压缩;-V显示详细发布日志信息,方便调试。
  2. cd .serverless:cd到真正会部署到远端的代码文件夹下,进行接下来的自定义发布操作。
  3. fun install -d:使用fun命令以docker模式安装项目依赖,这样才能保证部署后远端宿主环境可以正常运行。
  4. fun nas sync:由于部署对代码包大小有限制(非性能实例不能超过50M),所以需要将代码包中的依赖和大文件放在nas里使用,fun nas sync是根据.nas.yml配置,将大文件夹同步到云服务的nas里,供新建实例时使用。
  5. fun deploy -y:部署serverless代码,-y为执行中需要确认执行的操作都自动确认。

注意,为了不让每次发布都自动生成nas配置,我将nas相关的配置确定后写在f.yml和.nas.yml内,可参考官方配置说明

总结

midway官方兼容了大多数发布场景,但部分未兼容的场景需要开发者在熟悉整个发布链路后自行处理,对只想开发业务逻辑的同学不是很友好,官方在改善中;本篇文章只介绍了如何部署发布midwayjs+puppeteer的项目,puppeteer的使用优化后续也会有文章进行分享。

文章分类
前端
文章标签