什么是 Serverless Component
Serverless Component 是 Serverless Framework 的，支持多个云资源编排和组织的场景化解决方案。
Serverless Component 的目标是磨平不同云服务平台之间差异，你可以将它看作是可以更轻松地构建应用程序的依赖模块。目前 Serverless Component 已经形成一个由社区贡献驱动的生态系统，你可以浏览和使用社区的所有组件，快速开发一款自己想要的应用。
基于 Serverless Component 架构，你可以将任何云服务打包成一个组件。这个组件将含有一份 serverless.yml 配置文件，并且通过简单地进行配置就可以使用。本文以 @serverless/tencent-express 来举例。
如果我们要使用它，只需要新建一个项目 express-demo，然后修改 serverless.yml 配置如下：
express: component: '@serverless/tencent-express' inputs: region: ap-shanghai因为 serverless 框架部署到云的鉴权都是基于 dotenv 注入全局的变量来实现的，所以还得在根目录下新增 .env 文件，并配置对应的鉴权参数。
之后我们就可以在 app.js 中轻松的编写基于 express 的接口服务了：
const express = require('express') const app = express() app.get('http://www.likecs.com/', function(req, res) { res.send('Hello Express') }) // 不要忘了导出，因为该组件会对它进行包装，输出成云函数 module.exports = app这背后所有的流程逻辑都是组件内部实现的，包括：云函数的部署，API 网关的生成等。
下面是一张简单的组件依赖图：
通过此图可以清晰地查看组件带来的收益，借助社区现有的 @serverless/tencent-express 和 @serverless/tencent-website 组件，我们就可以很快构建想要的全栈应用。
全栈应用实战接下来将介绍如何借助 Serverless Component 快速开发全栈 Web 应用。
在开始所有步骤前，需执行 npm install -g serverless 命令，全局安装 serverless cli。
准备新建项目目录 fullstack-application-vue，在该项目目录下新增 api 和 dashboard 目录。然后新增 serverless.yml 和 .env 配置文件，项目目录结构如下：
├── README.md // 项目说明文档 ├── api // Restful api 后端服务 ├── dashboard // 前端页面 ├── .env // 腾讯云相关鉴权参数：TENCENT_APP_ID，TENCENT_SECRET_ID，TENCENT_SECRET_KEY └── serverless.yml // serverless 文件 后端服务开发进入目录 api，新增 app.js 文件，编写 express 服务代码，这里先新增一个路由 /，并返回当前服务器时间：
const express = require('express') const cors = require('cors') const app = express() app.use(cors()) app.get('http://www.likecs.com/', (req, res) => { res.send(JSON.stringfy({ message: `Server time: ${new Date().toString()}` })) }) module.exports = app 前端页面开发本案例使用的是 Vue.js + Parcel 的前端模板，当然你可以使用任何前端项目脚手架，比如 Vue.js 官方推荐的 Vue CLI 生成的项目。进入 dashboard 目录，静态资源你可以直接复制我准备好的 项目模板，编写入口文件 src/index.js:
// 这里初始是没有 env.js 模块的，第一次部署后会自动生成 require('../env') const Vue = require('vue') module.exports = new Vue({ el: '#root', data: { message: 'Click me!', isVisible: true, }, methods: { async queryServer() { const response = await fetch(window.env.apiUrl) const result = await response.json() this.message = result.message }, }, }) 配置前后端代码都准备好了，现在我们还需要简单配置下 serverless.yml 文件了：
name: fullstack-application-vue frontend: component: '@serverless/tencent-website' # inputs 为 @serverless/tencent-website 组件的输入 # 具体配置说明参考：https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md inputs: code: src: dist root: frontend hook: npm run build env: # 下面的 API服务部署后，获取对应的 api 请求路径 apiUrl: ${api.url} api: component: '@serverless/tencent-express' # inputs 为 @serverless/tencent-express 组件的输入 # 具体配置说明参考：https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md inputs: code: ./api functionName: fullstack-vue-api apigatewayConf: protocol: https简单的介绍下配置：首先，该文件定义了 frontend 和 api 两个模块，分别通过 component 属性指定依赖的 Serverless Component。对于一个标准的 Serverless Component，都会接受一个 inputs 属性参数，然后组件会根据 inputs 的配置进行处理和部署，具体有关配置的参数说明，请参考相关组件的官方配置说明。
部署以上所有的步骤都完成后，接下来就是第一次部署了。