Question

FC 是指阿里云的函数计算服务。

前置准备

• 开通阿里云函数计算服务

• 安装及配置阿里云的 Serverless 应用部署工具 fun

工程配置

1. 初始化 SSR 工程

2. 安装 FC 工程插件 build-plugin-rax-fc

npm install build-plugin-rax-fc --save-dev

3. 在项目 build.json 中加入插件，示例：

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
    "build-plugin-rax-multi-pages",
    "build-plugin-rax-ssr",
    "build-plugin-rax-fc"
  ]
}

本地调试

完成上一步的插件引入后，执行 npm run start，即可在本地开启函数的预览服务。

控制台会输入如下信息，URL 对应页面的预览地址。

Compiling...
using template: template.yml
http trigger httpTrigger of ssr-demo-3/home was registered
	url: http://localhost:8000/2016-08-15/proxy/ssr-demo/home/
	methods: [ 'GET' ]
	authType: ANONYMOUS

function compute app listening on port 8000!

如需开启 debug 能力，则可以在 build.json  中，为 fc 插件配置如下参数：

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
    "build-plugin-rax-ssr",
    [
      "build-plugin-rax-fc", {
        "debug": true,
        "debugPort": 9229 // 默认值为 9229
      }
    ]
  ]
}

项目构建

执行 npm run build 可以对当前项目进行构建，构建产物包括 server 和 web 两部分，位于build 目录下。

构建之前，需在 build.json 中指定 assets 的 publicPath（assets 资源发布到 CDN 后的前缀）, Server 端将基于该地址去加载真实的 assets。示例：

{
  "plugins": [
    //...
  ],
  "publicPath": "https://rax.oss-cn-hangzhou.aliyuncs.com/ssr-hacker-news/"
}

web  构建产物，对应页面的前端资源。

server  构建产物，对应 server 端的执行代码，每一张页面都会被构建为一个单独的函数，可被托管到函数即使平台，用于渲染页面。

函数发布

在进行函数发布，也就是页面的发布之前，首先需要发布前端资源，并指定前端资源的 publicPath。

然后进入到 build/server 目录下，然后借助阿里云的函数部署工具 fun ，就可以完成函数的发布。

cd build/server && fun deploy

您也可以将发布命令，配置到 package.json 中方便重复使用，例如：

{
  "name": "ssr-demo",
  "author": "rax",
  "scripts": {
    "build": "build-scripts build",
    "start": "build-scripts start",
    "deploy": "npm run build && cd build/server && fun deploy"
  },
	// ...
}

然后基于 npm run deploy 命令进行发布。

using template: template.yml
using region: cn-hangzhou
using accountId: ***********8966
using accessKeyId: ***********Tkk0
using timeout: 60

Waiting for service ssr-demo-3 to be deployed...
	Waiting for function home to be deployed...
		Waiting for packaging function home code...
		The function home has been packaged. A total of 2 files files were compressed and the final size was 23.54 KB
		Waiting for HTTP trigger httpTrigger to be deployed...
		methods: [ 'GET' ]
		url: https://16***********8966.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/ssr-demo-3/home/
		function httpTrigger deploy success
	function home deploy success
service ssr-demo-3 deploy success

发布完成后，如上面的日志，会生成函数对应的线上地址，接下来您可能还需要：

1. 为函数绑定自定义域名

2. 或 基于 API  Gateway 进行服务管理。

注意事项

单页应用（SPA) 的限制

阿里云的函数预览及发布后的地址，都是以函数名来访问的，所以跟实际期望的页面路由可能并不一致。

函数名对应项目 app.json 中的 routes 配置下的 name  字段。例如，在下面配置中，函数名为 home ，而实际期望的路由地址为 /。

{
  "routes": [
    {
      "path": "/",
      "source": "pages/Home/index",
      "name": "home"
    }
  ]
}

对于单页应用，页面间基于 path  进行跳转时，就可能无法匹配到正确的页面。因此，对于 SPA 无强诉求的应用，可以将应用切换为多页应用。具体方式如下：

安装 rax-plugin-multi-pages 插件

npm install build-plugin-rax-multi-pages --save-dev

在项目 build.json 中加入该插件

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web"]
      }
    ],
    "build-plugin-rax-multi-pages",
    "build-plugin-rax-ssr",
    "build-plugin-rax-fc"
  ]
}