前言

首先介绍下在本文出现的几个比较重要的概念：

函数计算（Function Compute）：函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考%title插图%num

Fun：Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档 参考%title插图%num

备注: 本文介绍的技巧需要 Fun 版本大于等于 3.6.7。

函数计算运行环境中内置一些常用字体，但仍不满足部分用户的需求。如果应用中需要使用其它字体，需要走很多弯路。本文将介绍如何通过 ‍Fun 工具将自定义字体部署到函数计算，并正确的在应用中被引用。%title插图%num

1. 你需要做什么

  • 在代码（CodeUri）目录新建一个 fonts 目录；
  • 将字体复制到 fonts 目录；
  • 使用 fun deploy 进行部署。

2. 工具安装

建议直接从这里下载二进制可执行程序，解压后即可直接使用。‍下载地址

执行 fun –version 检查 Fun 是否安装成功。

  1. 1$ fun –version
  2. 23.6.7

3. 示例

demo 涉及的代码，托管在 ‍github 上。项目目录结构如下：

  1. 1$ tree -L -a 1
  2. 2
  3. 3├── index.js
  4. 4├── package.json
  5. 5└── template.yml

index.js 中代码：

  1. 1‘use strict’;
  2. 2
  3. 3var fontList = require(‘font-list’)
  4. 4
  5. 5module.exports.handler = async function (request, response, context) {
  6. 6    response.setStatusCode(200);
  7. 7    response.setHeader(‘content-type’, ‘application/json’);
  8. 8    response.send(JSON.stringify(await fontList.getFonts(), null, 4));
  9. 9};

index.js 中借助 node 包 ‍font-list 列出系统上可用的字体。

template.yml：

  1. 1ROSTemplateFormatVersion: ‘2015-09-01’
  2. 2Transform: ‘Aliyun::Serverless-2018-04-03’
  3. 3Resources:
  4. 4  fonts-service: # 服务名
  5. 5    Type: ‘Aliyun::Serverless::Service’
  6. 6    Properties:
  7. 7      Description: fonts example
  8. 8    fonts-function: # 函数名
  9. 9      Type: ‘Aliyun::Serverless::Function‘
  10. 10      Properties:
  11. 11        Handler: index.handler
  12. 12        Runtime: nodejs8
  13. 13        CodeUri: ./
  14. 14        InstanceConcurrency: 10
  15. 15      Events:
  16. 16        http–test:
  17. 17          Type: HTTP
  18. 18          Properties:
  19. 19            AuthType: ANONYMOUS
  20. 20            Methods:
  21. 21              – GET
  22. 22              – POST
  23. 23              – PUT
  24. 24
  25. 25  tmp_domain: # 临时域名
  26. 26    Type: ‘Aliyun::Serverless::CustomDomain‘
  27. 27    Properties:
  28. 28      DomainName: Auto
  29. 29      Protocol: HTTP
  30. 30      RouteConfig:
  31. 31        Routes:
  32. 32          /:
  33. 33            ServiceName: fonts–service
  34. 34            FunctionName: fonts–function
  1. template.yml 中定义了名为 fonts-service 的服务，此服务下定义一个名为 fonts-function 的 http trigger 函数。tmp_domain 中配置自定义域名中路径（/）与函数（fonts–service/fonts–function）的映射关系。

1）下载字体

你可以通过 ‍这里 下载自定义字体 Hack，然后复制字体到 fonts 目录。

此时 demo 目录结构如下：

  1. 1$ tree -L 2 -a
  2. 2
  3. 3├── fonts（+）
  4. 4│   ├── Hack-Bold.ttf
  5. 5│   ├── Hack-BoldItalic.ttf
  6. 6│   ├── Hack-Italic.ttf
  7. 7│   └── Hack-Regular.ttf
  8. 8├── index.js
  9. 9├── package.json
  10. 10└── template.yml
  12. 2）安装依赖
  1. 1$ npm install
  2. 3）部署到函数计算

可以通过 fun deploy 直接发布到远端。

%title插图%num

4）预览线上效果

fun deploy 部署过程中，会为此函数生成有时效性的临时域名：

%title插图%num

打开浏览器，输入临时域名并回车：

%title插图%num

可以看到字体 Hack 已生效！！！

%title插图%num

原理介绍

  • fun deploy 时，如果检测到 CodeUri 下面有 fonts 目录，则为用户在 CodeUri 目录生成一个 .fonts.conf 配置文件。在该配置中，相比于原来的 /etc/fonts/fonts.conf 配置，添加了 /code/fonts 作为字体目录。
  • 自动在 template.yml 中添加环境变量，FONTCONFIG_FILE = /code/.fonts.conf，这样在函数运行时就可以正确的读取到自定义字体目录。

如果依赖过大，超过函数计算的限制（50M）则：

  • 将 fonts 目录添加到 .nas.yml；
  • 将 fonts 对 nas 的映射目录追加到 .fonts.conf 配置。

fun deploy 对大依赖的支持可参考 ‍《开发函数计算的正确姿势——轻松解决大依赖部署》

%title插图%num

小结

只需要在代码（CodeUri）目录新建一个 fonts 目录，然后复制所有字体到该目录即可。Fun 会自动帮你处理配置文件（.fonts.conf），环境变量以及大依赖场景的情况。