Node.js Azure函数本地正常，部署到Azure后失败求助

问题重现 #

本地Mac开发的Node.js Azure函数可正常动态生成GIF图片，但部署到Linux环境的Azure Functions后，抛出Microsoft.Azure.WebJobs.Script.Workers.Rpc.RpcException异常。

可能原因及解决方法 #

1. Canvas依赖的系统库缺失 #

canvas包依赖Linux底层库（如libcairo2、libpango1.0-0、libjpeg-dev等），Azure Functions默认Linux环境未预装这些库，导致canvas初始化失败。

• 解决方案：
  • 使用自定义Docker镜像：基于Azure Functions Node.js基础镜像，在Dockerfile中添加依赖安装命令：

    FROM mcr.microsoft.com/azure-functions/node:4-node18
    RUN apt-get update && apt-get install -y libcairo2-dev libpango1.0-dev libjpeg-dev libgif-dev librsvg2-dev
    WORKDIR /home/site/wwwroot
    COPY . .
    RUN npm install
    

  • 或通过部署脚本自动安装：在postDeploy.sh中添加apt安装命令（需开启自定义部署脚本）。

2. 临时目录处理问题 #

代码中创建os.tmpdir() + '/tmp/'子目录，Azure临时目录可能存在权限限制，或重复创建时抛出异常。

• 解决方案：
  • 直接使用系统临时目录，无需嵌套子目录：

    const filePath = path.join(os.tmpdir(), fileName + '.gif');
    

  • 若必须创建子目录，添加递归创建参数避免异常：

    fs.mkdirSync(temporaryFileDirectory, { recursive: true });
    

3. Stream重复消费导致数据丢失 #

代码中同时将encoder的readStream pipe到文件，又用await buffer(readStream)读取，但Node.js Stream只能被消费一次，导致buffer无法获取数据触发异常。

• 解决方案：
  • 移除临时文件写入逻辑，直接获取buffer：

    // 移除pipe到文件的代码
    // readStream.pipe(fs.createWriteStream(filePath));
    // 直接获取buffer
    const fileData = await buffer(readStream);
    

  • 若需保留临时文件，等待写入完成后再读取：

    await new Promise((resolve) => {
      const writeStream = fs.createWriteStream(filePath);
      readStream.pipe(writeStream);
      writeStream.on('finish', resolve);
    });
    const fileData = fs.readFileSync(filePath);
    

4. 内存或执行超时限制 #

生成多帧GIF（最大600帧）会占用较多内存，Azure Functions消费计划默认内存（128MB）可能不足，或执行超时（默认5分钟）。

• 解决方案：
  • 在Azure门户调整函数应用内存配置（建议至少256MB）；
  • 修改host.json延长超时时间：

    {
      "functionTimeout": "00:10:00"
    }
    

  • 降低frames最大值，比如从600调整到300：

    frames = Math.max(frames, Math.min(1, 300));
    

5. 系统字体缺失 #

代码中使用Arial字体，Linux环境默认无该字体，导致canvas绘制文本失败。

• 解决方案：
  • 使用Linux系统自带字体（如DejaVu Sans）：

    let fontFamily: string = 'DejaVu Sans';
    

  • 打包字体文件到项目，在canvas中注册：

    const { registerFont } = require('canvas');
    registerFont('./fonts/Arial.ttf', { family: 'Arial' });
    

内容的提问来源于stack exchange，提问作者eat-sleep-code