express:\n component: '@serverless/tencent-express'\n inputs:\n region: ap-shanghai因为 serverless 框架部署到云的鉴权都是基于 dotenv 注入全局的变量来实现的，所以还得在根目录下新增 .env 文件，并配置对应的鉴权参数。
之后我们就可以在 app.js 中轻松的编写基于 express 的接口服务了：
const express = require('express')\nconst app = express()\napp.get('/', function(req, res) {\n res.send('Hello Express')\n})\n// 不要忘了导出，因为该组件会对它进行包装，输出成云函数\nmodule.exports = app这背后所有的流程逻辑都是组件内部实现的，包括：云函数的部署，API 网关的生成等。
\n下面是一张简单的组件依赖图：
\n![\"Component](\"https://static.yugasun.com/serverless/component-framework.png\")
通过此图可以清晰地查看组件带来的收益，借助社区现有的 @serverless/tencent-express 和 @serverless/tencent-website 组件，我们就可以很快构建想要的全栈应用。
\n全栈应用实战
\n接下来将介绍如何借助 Serverless Component 快速开发全栈 Web 应用。
\n![\"full-stack\"](\"https://liujiang-1253970226.cos.ap-chengdu.myqcloud.com/ncby5-dltv8.gif\")
\n\n在开始所有步骤前，需执行
\nnpm install -g serverless命令，全局安装serverless cli。
准备
\n新建项目目录 fullstack-application-vue，在该项目目录下新增 api 和 dashboard 目录。然后新增 serverless.yml 和 .env 配置文件，项目目录结构如下：
├── README.md \t\t// 项目说明文档\n├── api\t\t\t\t\t // Restful api 后端服务\n├── dashboard\t\t\t// 前端页面\n├── .env\t\t\t\t\t// 腾讯云相关鉴权参数：TENCENT_APP_ID，TENCENT_SECRET_ID，TENCENT_SECRET_KEY\n└── serverless.yml\t// serverless 文件后端服务开发
\n进入目录 api，新增 app.js 文件，编写 express 服务代码，这里先新增一个路由 /，并返回当前服务器时间：
const express = require('express')\nconst cors = require('cors')\nconst app = express()\n\napp.use(cors())\napp.get('/', (req, res) => {\n res.send(JSON.stringfy({ message: `Server time: ${new Date().toString()}` }))\n})\nmodule.exports = app前端页面开发
\n本案例使用的是 Vue.js + Parcel 的前端模板，当然你可以使用任何前端项目脚手架，比如 Vue.js 官方推荐的 Vue CLI 生成的项目。进入 dashboard 目录，静态资源你可以直接复制我准备好的 项目模板，编写入口文件 src/index.js:
// 这里初始是没有 env.js 模块的，第一次部署后会自动生成\nrequire('../env')\n\nconst Vue = require('vue')\n\nmodule.exports = new Vue({\n el: '#root',\n data: {\n message: 'Click me!',\n isVisible: true,\n },\n methods: {\n async queryServer() {\n const response = await fetch(window.env.apiUrl)\n const result = await response.json()\n this.message = result.message\n },\n },\n})配置
\n前后端代码都准备好了，现在我们还需要简单配置下 serverless.yml 文件了：
name: fullstack-application-vue\n\nfrontend:\n component: '@serverless/tencent-website'\n # inputs 为 @serverless/tencent-website 组件的输入\n # 具体配置说明参考：https://github.com/serverless-components/tencent-website/blob/master/docs/configure.md\n inputs:\n code:\n src: dist\n root: frontend\n hook: npm run build\n env:\n # 下面的 API服务部署后，获取对应的 api 请求路径\n apiUrl: ${api.url}\n\napi:\n component: '@serverless/tencent-express'\n # inputs 为 @serverless/tencent-express 组件的输入\n # 具体配置说明参考：https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md\n inputs:\n code: ./api\n functionName: fullstack-vue-api\n apigatewayConf:\n protocol: https\n\n简单的介绍下配置：首先，该文件定义了
\nfrontend和api两个模块，分别通过component属性指定依赖的 Serverless Component。对于一个标准的 Serverless Component，都会接受一个inputs属性参数，然后组件会根据inputs的配置进行处理和部署，具体有关配置的参数说明，请参考相关组件的官方配置说明。
部署
\n以上所有的步骤都完成后，接下来就是第一次部署了。
\n为什么不是直接联调开发呢？因为后端服务是云函数，但是到目前为止，所有代码都是在本地编写，前端页面接口请求链接还不存在。所以需要先将云函数部署到云端，才能进行前后端调试。这个也是本人目前遇到的痛点，因为每次修改后端服务后，都需要重新部署，然后进行前端开发调试。如果你有更好的建议，欢迎评论指教~
\n部署时，只需要运行 serverless 命令就行，当然如果你需要查看部署中的 DEBUG 信息，还需要加上 --debug 参数，如下：
$ serverless\n# or\n$ serverless --debug然后终端会 balabalabala~, 输出一大堆 DEBUG 信息，最后只需要看到绿色的 done 就行了：
![\"Deploy](\"https://static.yugasun.com/serverless/deploy-success.png\")
这样一个基于 Serverless Component 的全栈应用就开发好了。赶紧点击你部署好的链接体验一下吧~
\n\n数据库连接
\n既然是全栈，怎么少得了数据库的读写呢？接下来介绍如何添加数据库的读写操作。
\n准备
\n想要操作数据库，必须先拥有一台数据库实例，腾讯云 MySQL 云数据库 现在也很便宜，可以购买一个最基本按量计费 1 核 1G 内存 的 1 小时收费不到 4 毛钱，是不是非常划算。购买好之后初始化配置，然后新增一个 serverless 数据库，同时新增一张 users 表：
CREATE TABLE if not exists `test` ( `name` varchar (32) NOT NULL ,`email` varchar (64) NOT NULL ,`site` varchar (128) NOT NULL ) ENGINE = innodb DEFAULT CHARACTER SET = \"utf8mb4\" COLLATE = \"utf8mb4_general_ci\"前端修改
\n首先修改前端入口文件 frontend/src/index.js 新增相关函数操作：
require('../env')\n\nconst Vue = require('vue')\nconst axios = require('axios')\nmodule.exports = new Vue({\n el: '#root',\n data: {\n // ...\n form: {\n name: '',\n email: '',\n site: '',\n },\n userList: [],\n },\n methods: {\n // ...\n // 获取用户列表\n async getUsers() {\n const res = await axios.get(window.env.apiUrl + 'users')\n this.userList = (res.data && res.data.data) || []\n },\n // 新增一个用户\n async addUser() {\n const data = this.form\n const res = await axios.post(window.env.apiUrl + 'users', data)\n console.log(res)\n if (res.data) {\n this.getUsers()\n }\n },\n },\n mounted() {\n // 视图挂在后，获取用户列表\n this.getUsers()\n },\n})当然你还需要修改视图模板文件 frontend/index.html，在页面模板中新增用户列表和用户表单：
\n
\n
\n
- 0">\n
- \n
\n Name: {{ item.name }}\n Email: {{ item.email }}\n Site: {{ item.site }}\n
\n \n
<!-- user form -->\n<section class=\"user-form\" action=\"#\">\n <div class=\"form-item\">\n <label for=\"name\">\n Name:\n </label>\n <input name=\"name\" v-model=\"form.name\" type=\"text\" /><br />\n </div>\n <div class=\"form-item\">\n <label for=\"email\">\n Email:\n </label>\n <input name=\"email\" v-model=\"form.email\" type=\"email\" /><br />\n </div>\n <div class=\"form-item\">\n <label for=\"site\">\n Site:\n </label>\n <input name=\"site\" v-model=\"form.site\" type=\"text\" /><br />\n </div>\n <button @click=\"addUser\">Submit</button>\n</section>\n\n<!-- user list -->\n<section class=\"user-list\">\n <ul v-if=\"userList.length > 0\">\n <li v-for=\"item in userList\" :key=\"item.id\">\n <p>\n <b>Name: {{ item.name }}</b>\n <b>Email: {{ item.email }}</b>\n <b>Site: {{ item.site }}</b>\n </p>\n </li>\n </ul>\n <span v-else>No Data</span>\n</section>\n\n注意：如果还不熟悉 Vue.js 语法，请移至 官方文档，当然如果你想快速上手 Vue.js 开发，也可以阅读这份 Vue 从入门到精通 教程。
\n
后端修改
\n这里使用 .env 来进行数据库连接参数配置，在 api 目录下新增 .env 文件，将之前的数据库配置填入文件中，参考 api/.env.example 文件。然后添加并安装 dotenv 依赖，同时添加 mysql2 模块进行数据库操作，body-parser 模块进行 POST 请求时的 body 解析。
之后新增后端 api，进行数据库读写，修改后的 api/app.js 代码如下：
'use strict'\nrequire('dotenv').config()\nconst express = require('express')\nconst cors = require('cors')\nconst mysql = require('mysql2')\nconst bodyParser = require('body-parser')\n\n// init mysql connection\nfunction initMysqlPool() {\n const { DB_HOST, DB_PORT, DB_DATABASE, DB_USER, DB_PASSWORD } = process.env\n\n const promisePool = mysql\n .createPool({\n host: DB_HOST,\n user: DB_USER,\n port: DB_PORT,\n password: DB_PASSWORD,\n database: DB_DATABASE,\n connectionLimit: 1,\n })\n .promise()\n\n return promisePool\n}\n\nconst app = express()\napp.use(bodyParser.json())\napp.use(cors())\n\nif (!app.promisePool) {\n app.promisePool = initMysqlPool()\n}\n\napp.get('/', (req, res) => {\n res.send(JSON.stringify({ message: `Server time: ${new Date().toString()}` }))\n})\n\n// get user list\napp.get('/users', async (req, res) => {\n const [data] = await app.promisePool.query('select * from users')\n res.send(\n JSON.stringify({\n data: data,\n })\n )\n})\n\n// add new user\napp.post('/users', async (req, res) => {\n let result = ''\n try {\n const { name, email, site } = req.body\n const [res] = await app.promisePool.query('INSERT into users SET ?', {\n name: name,\n email: email,\n site: site,\n })\n result = {\n data: res && res.insertId,\n message: 'Insert Success',\n }\n } catch (e) {\n result = {\n data: e,\n message: 'Insert Fail',\n }\n }\n\n res.send(JSON.stringify(result))\n})\n\nmodule.exports = app配置修改
\n这里数据库访问需要通过腾讯云私有网络，所以还需要为云函数配置私有网络（VPC），同时还需要配置能够操作数据库的角色（关于角色配置，可以直接到 角色管理页面），这里我新建了一个 QCS_SCFFull 的角色，可以用来访问数据库。然后修改 serverless.yml 中的配置：
# ...\napi:\n component: '@serverless/tencent-express'\n # more configuration for @serverless/tencent-website,\n # refer to: https://github.com/serverless-components/tencent-express/blob/master/docs/configure.md\n inputs:\n code: ./api\n functionName: fullstack-vue-api\n role: QCS_SCFFull # 此角色必须具备访问数据库权限\n functionConf:\n # 这个是用来访问新创建数据库的私有网络，可以在你的数据库实例管理页面查看\n vpcConfig:\n vpcId: vpc-6n5x55kb\n subnetId: subnet-4cvr91js\n apigatewayConf:\n protocol: https最后重新部署一下就行了。
\n以上基于腾讯云 Serverless Framework 来实现：
\n\n小结
\n当然全栈方案，并没有这么简单，这里只是简单介绍，如何使用 Serverless Component，快速实现一个全栈应用。如果要应用到实际的业务场景，我们还需考虑更多的问题，期待大家去探索和发现！
\n\n\n
\n
\n\n传送门：
\n\n
\n- GitHub: github.com/serverless
\n- 官网：serverless.com
\n
欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！
","tableOfContents":""},"previousBlog":{"id":"1e54dd30-fe20-593b-952b-869b890aced3","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020114/1579000616928-HEAD.png","authors":["Anycodes"],"categories":["guides-and-tutorials"],"date":"2019-12-10T00:00:00.000Z","title":"Serverless 的资源评估与成本探索","description":"本文介绍了使用 Serverless 架构布局业务时，需要关注的资源和费用","authorslink":["https://www.zhihu.com/people/liuyu-43-97"],"translators":null,"translatorslink":null,"tags":["资源成本","Serverless"],"keywords":"Serverless 架构,Serverless 布局业务,Serverless 资源评估","outdated":null},"wordCount":{"words":341,"sentences":66,"paragraphs":66},"fileAbsolutePath":"/opt/build/repo/content/blog/2019-12-10-resource-cost.md","fields":{"slug":"/blog/2019-12-10-resource-cost/","keywords":["serverless","云函数","内存","serverlesscloud"]}},"nextBlog":{"id":"74a25989-4611-5393-85ef-698f2c988635","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191226/1577353111488-website.png","authors":["liujiang"],"categories":["best-practice"],"date":"2019-12-04T00:00:00.000Z","title":"Hexo + Serverless Framework，简单三步搭建你的个人博客","description":"简单三步，即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["Serverless","Hexo"],"keywords":"Hexo Serverless,Serverless Website,Serverless Hexo 站点","outdated":true},"wordCount":{"words":146,"sentences":34,"paragraphs":34},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-4-Quickly-build-personal-blog.md","fields":{"slug":"/best-practice/2019-12-4-Quickly-build-personal-blog/","keywords":["nodejs","serverless","website","website 组件","无服务器","hexo","serverless","Serverless","yml","Hexo","website","tencent"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"70178fa6-74b6-5606-9467-7c4fa830b240","previousBlogId":"1e54dd30-fe20-593b-952b-869b890aced3","nextBlogId":"74a25989-4611-5393-85ef-698f2c988635"}}}