$ mkdir egg-example && cd egg-example\n$ npm init egg --type=simple\n$ npm i启动项目:
\n$ npm run dev然后浏览器访问 http://localhost:7001，就可以看到亲切的 hi, egg 了。
关于 Egg.js 的框架更多知识，建议阅读 官方文档
\n准备
\n对 Egg.js 有了简单了解，接下来我们来初始化我们的后台管理系统，新建一个项目目录 admin-system:
$ mkdir admin-system将上面创建的 Egg.js 项目复制到 admin-system 目录下，重命名为 backend。然后将前端模板项目复制到 frontend 文件夹中：
$ git clone https://github.com/PanJiaChen/vue-admin-template.git frontend\n\n说明： vue-admin-template 是基于 Vue2.0 的管理系统模板，是一个非常优秀的项目，建议对 Vue.js 感兴趣的开发者可以去学习下，当然如果你对 Vue.js 还不是太了解，这里有个基础入门学习教程 Vuejs 从入门到精通系列文章
\n
之后你的项目目录结构如下：
\n.\n├── README.md\n├── backend // 创建的 Egg.js 项目\n└── frontend // 克隆的 Vue.js 前端项目模板启动前端项目熟悉下界面：
\n$ cd frontend\n$ npm install\n$ npm run dev然后访问 http://localhost:9528 就可以看到登录界面了。
开发后端服务
\n对于一个后台管理系统服务，我们这里只实现登录鉴权和文章管理功能，剩下的其他功能大同小异，读者可以之后自由补充扩展。
\n1. 添加 Sequelize 插件
\n在正式开发之前，我们需要引入数据库插件，这里本人偏向于使用 Sequelize ORM 工具进行数据库操作，正好 Egg.js 提供了 egg-sequelize 插件，于是直接拿来用，需要先安装：
\n$ cd frontend\n# 因为需要通过 sequelize 链接 mysql 所以这也同时安装 mysql2 模块\n$ npm install egg-sequelize mysql2 --save然后在 backend/config/plugin.js 中引入该插件：
module.exports = {\n // ....\n sequelize: {\n enable: true,\n package: \"egg-sequelize\"\n }\n // ....\n};在 backend/config/config.default.js 中配置数据库连接参数：
// ...\nconst userConfig = {\n // ...\n sequelize: {\n dialect: \"mysql\",\n\n // 这里也可以通过 .env 文件注入环境变量，然后通过 process.env 获取\n host: \"xxx\",\n port: \"xxx\",\n database: \"xxx\",\n username: \"xxx\",\n password: \"xxx\"\n }\n // ...\n};\n// ...2. 添加 JWT 插件
\n系统将使用 JWT token 方式进行登录鉴权，安装配置参考官方文档，egg-jwt
\n3. 添加 Redis 插件
\n系统将使用 redis 来存储和管理用户 token，安装配置参考官方文档，egg-redis
\n4. 角色 API
\n定义用户模型，创建 backend/app/model/role.js 文件如下：
module.exports = app => {\n const { STRING, INTEGER, DATE } = app.Sequelize;\n\n const Role = app.model.define(\"role\", {\n id: { type: INTEGER, primaryKey: true, autoIncrement: true },\n name: STRING(30),\n created_at: DATE,\n updated_at: DATE\n });\n\n // 这里定义与 users 表的关系，一个角色可以含有多个用户，外键相关\n Role.associate = () => {\n app.model.Role.hasMany(app.model.User, { as: \"users\" });\n };\n\n return Role;\n};实现 Role 相关服务，创建 backend/app/service/role.js 文件如下：
const { Service } = require(\"egg\");\n\nclass RoleService extends Service {\n // 获取角色列表\n async list(options) {\n const {\n ctx: { model }\n } = this;\n return model.Role.findAndCountAll({\n ...options,\n order: [\n [\"created_at\", \"desc\"],\n [\"id\", \"desc\"]\n ]\n });\n }\n\n // 通过 id 获取角色\n async find(id) {\n const {\n ctx: { model }\n } = this;\n const role = await model.Role.findByPk(id);\n if (!role) {\n this.ctx.throw(404, \"role not found\");\n }\n return role;\n }\n\n // 创建角色\n async create(role) {\n const {\n ctx: { model }\n } = this;\n return model.Role.create(role);\n }\n\n // 更新角色\n async update({ id, updates }) {\n const role = await this.ctx.model.Role.findByPk(id);\n if (!role) {\n this.ctx.throw(404, \"role not found\");\n }\n return role.update(updates);\n }\n\n // 删除角色\n async destroy(id) {\n const role = await this.ctx.model.Role.findByPk(id);\n if (!role) {\n this.ctx.throw(404, \"role not found\");\n }\n return role.destroy();\n }\n}\n\nmodule.exports = RoleService;一个完整的 RESTful API 就该包括以上五个方法，然后实现 RoleController, 创建 backend/app/controller/role.js:
const { Controller } = require(\"egg\");\n\nclass RoleController extends Controller {\n async index() {\n const { ctx } = this;\n const { query, service, helper } = ctx;\n const options = {\n limit: helper.parseInt(query.limit),\n offset: helper.parseInt(query.offset)\n };\n const data = await service.role.list(options);\n ctx.body = {\n code: 0,\n data: {\n count: data.count,\n items: data.rows\n }\n };\n }\n\n async show() {\n const { ctx } = this;\n const { params, service, helper } = ctx;\n const id = helper.parseInt(params.id);\n ctx.body = await service.role.find(id);\n }\n\n async create() {\n const { ctx } = this;\n const { service } = ctx;\n const body = ctx.request.body;\n const role = await service.role.create(body);\n ctx.status = 201;\n ctx.body = role;\n }\n\n async update() {\n const { ctx } = this;\n const { params, service, helper } = ctx;\n const body = ctx.request.body;\n const id = helper.parseInt(params.id);\n ctx.body = await service.role.update({\n id,\n updates: body\n });\n }\n\n async destroy() {\n const { ctx } = this;\n const { params, service, helper } = ctx;\n const id = helper.parseInt(params.id);\n await service.role.destroy(id);\n ctx.status = 200;\n }\n}\n\nmodule.exports = RoleController;之后在 backend/app/route.js 路由配置文件中定义 role 的 RESTful API:
router.resources(\"roles\", \"/roles\", controller.role);通过 router.resources 方法，我们将 roles 这个资源的增删改查接口映射到了 app/controller/roles.js 文件。详细说明参考 官方文档
5. 用户 API
\n同 Role 一样定义我们的用户 API，这里就不复制粘贴了，可以参考项目实例源码 admin-system。
\n6. 同步数据库表格
\n上面只是定义好了 Role 和 User 两个 Schema，那么如何同步到数据库呢？这里先借助 Egg.js 启动的 hooks 来实现，Egg.js 框架提供了统一的入口文件（app.js）进行启动过程自定义，这个文件返回一个 Boot 类，我们可以通过定义 Boot 类中的生命周期方法来执行启动应用过程中的初始化工作。
我们在 backend 目录中创建 app.js 文件，如下：
\"use strict\";\n\nclass AppBootHook {\n constructor(app) {\n this.app = app;\n }\n\n async willReady() {\n // 这里只能在开发模式下同步数据库表格\n const isDev = process.env.NODE_ENV === \"development\";\n if (isDev) {\n try {\n console.log(\"Start syncing database models...\");\n await this.app.model.sync({ logging: console.log, force: isDev });\n console.log(\"Start init database data...\");\n await this.app.model.query(\n \"INSERT INTO roles (id, name, created_at, updated_at) VALUES (1, 'admin', '2020-02-04 09:54:25', '2020-02-04 09:54:25'),(2, 'editor', '2020-02-04 09:54:30', '2020-02-04 09:54:30');\"\n );\n await this.app.model.query(\n \"INSERT INTO users (id, name, password, age, avatar, introduction, created_at, updated_at, role_id) VALUES (1, 'admin', 'e10adc3949ba59abbe56e057f20f883e', 20, 'https://yugasun.com/static/avatar.jpg', 'Fullstack Engineer', '2020-02-04 09:55:23', '2020-02-04 09:55:23', 1);\"\n );\n await this.app.model.query(\n \"INSERT INTO posts (id, title, content, created_at, updated_at, user_id) VALUES (2, 'Awesome Egg.js', 'Egg.js is a awesome framework', '2020-02-04 09:57:24', '2020-02-04 09:57:24', 1),(3, 'Awesome Serverless', 'Build web, mobile and IoT applications using Tencent Cloud and API Gateway, Tencent Cloud Functions, and more.', '2020-02-04 10:00:23', '2020-02-04 10:00:23', 1);\"\n );\n console.log(\"Successfully init database data.\");\n console.log(\"Successfully sync database models.\");\n } catch (e) {\n console.log(e);\n throw new Error(\"Database migration failed.\");\n }\n }\n }\n}\n\nmodule.exports = AppBootHook;通过 willReady 生命周期函数，我们可以执行 this.app.model.sync() 函数来同步数据表，当然这里同时初始化了角色和用户数据记录，用来做为演示用。
\n\n注意：这的数据库同步只是本地调试用，如果想要腾讯云的 Mysql 数据库，建议开启远程连接，通过
\nsequelize db:migrate实现，而不是每次启动 Egg 应用时同步，示例代码已经完成此功能，参考 Egg Sequelize 文档。\n这里本人为了省事，直接开启腾讯云 Mysql 公网连接，然后修改config.default.js中的sequelize配置，运行npm run dev进行开发模式同步。
到这里，我们的用户和角色的 API 都已经定义好了，启动服务 npm run dev，访问 https://127.0.0.1:7001/users 可以获取所有用户列表了。
7. 用户登录/注销 API
\n这里登录逻辑比较简单，客户端发送 用户名 和 密码 到 /login 路由，后端通过 login 函数接受，然后从数据库中查询该用户名，同时比对密码是否正确。如果正确则调用 app.jwt.sign() 函数生成 token，并将 token 存入到 redis 中，同时返回该 token，之后客户端需要鉴权的请求都会携带 token，进行鉴权验证。思路很简单，我们就开始实现了。
流程图如下：
\n![\"Login](\"https://static.yugasun.com/serverless/login-process.jpg\")
\n首先，在 backend/app/controller/home.js 中新增登录处理 login 方法：
class HomeController extends Controller {\n // ...\n async login() {\n const { ctx, app, config } = this;\n const { service, helper } = ctx;\n const { username, password } = ctx.request.body;\n const user = await service.user.findByName(username);\n if (!user) {\n ctx.status = 403;\n ctx.body = {\n code: 403,\n message: \"Username or password wrong\"\n };\n } else {\n if (user.password === helper.encryptPwd(password)) {\n ctx.status = 200;\n const token = app.jwt.sign(\n {\n id: user.id,\n name: user.name,\n role: user.role.name,\n avatar: user.avatar\n },\n config.jwt.secret,\n {\n expiresIn: \"1h\"\n }\n );\n try {\n await app.redis.set(`token_${user.id}`, token);\n ctx.body = {\n code: 0,\n message: \"Get token success\",\n token\n };\n } catch (e) {\n console.error(e);\n ctx.body = {\n code: 500,\n message: \"Server busy, please try again\"\n };\n }\n } else {\n ctx.status = 403;\n ctx.body = {\n code: 403,\n message: \"Username or password wrong\"\n };\n }\n }\n }\n}\n\n注释：这里有个密码存储逻辑，用户在注册时，密码都是通过
\nhelper函数encryptPwd()进行加密的（这里用到最简单的 md5 加密方式，实际开发中建议使用更加高级加密方式），所以在校验密码正确性时，也需要先加密一次。至于如何在 Egg.js 框架中新增helper函数，只需要在backend/app/extend文件夹中新增helper.js文件，然后modole.exports一个包含该函数的对象就行，参考 Egg 框架扩展文档
然后，在 backend/app/controller/home.js 中新增 userInfo 方法，获取用户信息：
async userInfo() {\n const { ctx } = this;\n const { user } = ctx.state;\n ctx.status = 200;\n ctx.body = {\n code: 0,\n data: user,\n };\n}egg-jwt 插件，在鉴权通过的路由对应 controller 函数中，会将 app.jwt.sign(user, secrete) 加密的用户信息，添加到 ctx.state.user 中，所以 userInfo 函数只需要将它返回就行。
之后，在 backend/app/controller/home.js 中新增 logout 方法：
async logout() {\n const { ctx } = this;\n ctx.status = 200;\n ctx.body = {\n code: 0,\n message: 'Logout success',\n };\n}userInfo 和 logout 函数非常简单，重点是路由中间件如何处理。
接下来，我们来定义登录相关路由，修改 backend/app/router.js 文件，新增 /login, /user-info, /logout 三个路由：
const koajwt = require(\"koa-jwt2\");\n\nmodule.exports = app => {\n const { router, controller, jwt } = app;\n router.get(\"/\", controller.home.index);\n\n router.post(\"/login\", controller.home.login);\n router.get(\"/user-info\", jwt, controller.home.userInfo);\n const isRevokedAsync = function(req, payload) {\n return new Promise(resolve => {\n try {\n const userId = payload.id;\n const tokenKey = `token_${userId}`;\n const token = app.redis.get(tokenKey);\n if (token) {\n app.redis.del(tokenKey);\n }\n resolve(false);\n } catch (e) {\n resolve(true);\n }\n });\n };\n router.post(\n \"/logout\",\n koajwt({\n secret: app.config.jwt.secret,\n credentialsRequired: false,\n isRevoked: isRevokedAsync\n }),\n controller.home.logout\n );\n\n router.resources(\"roles\", \"/roles\", controller.role);\n router.resources(\"users\", \"/users\", controller.user);\n router.resources(\"posts\", \"/posts\", controller.post);\n};Egg.js 框架定义路由时，router.post() 函数可以接受中间件函数，用来处理一些路由相关的特殊逻辑。
比如 /user-info，路由添加了 app.jwt 作为 JWT 鉴权中间件函数，至于为什么这么用，egg-jwt 插件有明确说明。
这里稍微复杂的是 /logout 路由，因为我们在注销登录时，需要将用户的 token 从 redis 中移除，所以这里借助了 koa-jwt2 的 isRevokded 参数，来进行 token 删除。
后端服务部署
\n到这里，后端服务的登录和注销逻辑基本完成了。那么如何部署到云函数呢？可以直接使用 tencent-egg 组件，它是专门为 Egg.js 框架打造的 Serverless Component，使用它可以快速将我们的 Egg.js 项目部署到腾讯云云函数上。
\n1. 准备
\n我们先创建一个 backend/sls.js 入口文件：
const { Application } = require(\"egg\");\nconst app = new Application();\nmodule.exports = app;然后修改 backend/config/config.default.js 文件:
const config = (exports = {\n env: \"prod\", // 推荐云函数的 egg 运行环境变量修改为 prod\n rundir: \"/tmp\",\n logger: {\n dir: \"/tmp\"\n }\n});\n\n注释：这里之所有需要修改运行和日志目录，是因为云函数运行时，只有
\n/tmp才有写权限。
全局安装 serverless 命令：
$ npm install serverless -g2. 配置 Serverless
\n在项目根目录下创建 serverless.yml 文件，同时新增 backend 配置：
backend:\n component: \"@serverless/tencent-egg\"\n inputs:\n code: ./backend\n functionName: admin-system\n # 这里必须指定一个具有操作 mysql 和 redis 的角色，具体角色创建，可访问 https://console.cloud.tencent.com/cam/role\n role: QCS_SCFFull\n functionConf:\n timeout: 120\n # 这里的私有网络必须和 mysql、redis 实例一致\n vpcConfig:\n vpcId: vpc-xxx\n subnetId: subnet-xxx\n apigatewayConf:\n protocols:\n - https此时你的项目目录结构如下：
\n.\n├── README.md // 项目说明文件\n├── serverless.yml // serverless yml 配合文件\n├── backend // 创建的 Egg.js 项目\n└── frontend // 克隆的 Vue.js 前端项目模板3. 执行部署
\n执行部署命令：
\n$ serverless --debug之后控制台需要进行扫码登录验证腾讯云账号，扫码登录就好。等部署成功会发挥如下信息：
\n backend:\n region: ap-guangzhou\n functionName: admin-system\n apiGatewayServiceId: service-f1bhmhk4\n url: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/这里输出的 url 就是部署成功的 API 网关接口，可以直接访问测试。
\n\n\n注释：云函数部署时，会自动在腾讯云的 API 网关创建一个服务，同时创建一个 API，通过该 API 就可以触发云函数执行了。
\n
4. 账号配置（可选）
\n当前默认支持 Serverless cli 扫描二维码登录，如果希望配置持久的环境变量/秘钥信息，也可以在项目根目录创建 .env 文件
在 .env 文件中配置腾讯云的 SecretId 和 SecretKey 信息并保存，密钥可以在 API 密钥管理 中获取或者创建.
# .env\nTENCENT_SECRET_ID=123\nTENCENT_SECRET_KEY=1235. 文章 API
\n跟用户 API 类似，只需要复制粘贴上面用户相关模块，修改名称为 posts， 并修改数据模型就行，这里就不粘贴代码了。
前端开发
\n本实例直接使用的 vue-admin-template 的前端模板。
\n我们需要做如下几部分修改：
\n- \n
- 删除接口模拟：更换为真实的后端服务接口 \n
- 修改接口函数：包括用户相关的
frontend/src/api/user.js和文章相关接口frontend/src/api/post.js。 \n - 修改接口工具函数：主要是修改
frontend/src/utils/request.js文件，包括axios请求的baseURL和请求的 header。 \n - UI 界面修改：主要是新增文章管理页面，包括列表页和新增页。 \n
1. 删除接口模拟
\n首先删除 frontend/mock 文件夹。然后修改前端入口文件 frontend/src/main.js：
// 1. 引入接口变量文件，这个会依赖 @serverless/tencent-website 组件自动生成\nimport \"./env.js\";\n\nimport Vue from \"vue\";\n\nimport \"normalize.css/normalize.css\";\nimport ElementUI from \"element-ui\";\nimport \"element-ui/lib/theme-chalk/index.css\";\nimport locale from \"element-ui/lib/locale/lang/en\";\nimport \"@/styles/index.scss\";\nimport App from \"./App\";\nimport store from \"./store\";\nimport router from \"./router\";\nimport \"@/icons\";\nimport \"@/permission\";\n\n// 2. 下面这段就是 mock server 引入，删除就好\n// if (process.env.NODE_ENV === 'production') {\n// const { mockXHR } = require('../mock')\n// mockXHR()\n// }\n\nVue.use(ElementUI, { locale });\nVue.config.productionTip = false;\n\nnew Vue({\n el: \"#app\",\n router,\n store,\n render: h => h(App)\n});2. 修改接口函数
\n修改 frontend/src/api/user.js 文件，包括登录、注销、获取用户信息和获取用户列表函数如下：
import request from \"@/utils/request\";\n\n// 登录\nexport function login(data) {\n return request({\n url: \"/login\",\n method: \"post\",\n data\n });\n}\n\n// 获取用户信息\nexport function getInfo(token) {\n return request({\n url: \"/user-info\",\n method: \"get\"\n });\n}\n\n// 注销登录\nexport function logout() {\n return request({\n url: \"/logout\",\n method: \"post\"\n });\n}\n\n// 获取用户列表\nexport function getList() {\n return request({\n url: \"/users\",\n method: \"get\"\n });\n}新增 frontend/src/api/post.js 文件如下：
import request from \"@/utils/request\";\n\n// 获取文章列表\nexport function getList(params) {\n return request({\n url: \"/posts\",\n method: \"get\",\n params\n });\n}\n\n// 创建文章\nexport function create(data) {\n return request({\n url: \"/posts\",\n method: \"post\",\n data\n });\n}\n\n// 删除文章\nexport function destroy(id) {\n return request({\n url: `/posts/${id}`,\n method: \"delete\"\n });\n}3. 修改接口工具函数
\n因为 @serverless/tencent-website 组件可以定义 env 参数，执行成功后它会在指定 root 目录自动生成 env.js，然后在 frontend/src/main.js 中引入使用。\n它会挂载 env 中定义的接口变量到 window 对象上。比如这生成的 env.js 文件如下：
window.env = {};\nwindow.env.apiUrl =\n \"https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/\";根据此文件我们来修改 frontend/src/utils/request.js 文件：
import axios from \"axios\";\nimport { MessageBox, Message } from \"element-ui\";\nimport store from \"@/store\";\nimport { getToken } from \"@/utils/auth\";\n\n// 创建 axios 实例\nconst service = axios.create({\n // 1. 这里设置为 `env.js` 中的变量 `window.env.apiUrl`\n baseURL: window.env.apiUrl || \"/\", // url = base url + request url\n timeout: 5000 // request timeout\n});\n\n// request 注入\nservice.interceptors.request.use(\n config => {\n // 2. 添加鉴权token\n if (store.getters.token) {\n config.headers[\"Authorization\"] = `Bearer ${getToken()}`;\n }\n return config;\n },\n error => {\n console.log(error); // for debug\n return Promise.reject(error);\n }\n);\n\n// 请求 response 注入\nservice.interceptors.response.use(\n response => {\n const res = response.data;\n\n // 只有请求code为0，才是正常返回，否则需要提示接口错误\n if (res.code !== 0) {\n Message({\n message: res.message || \"Error\",\n type: \"error\",\n duration: 5 * 1000\n });\n\n if (res.code === 50008 || res.code === 50012 || res.code === 50014) {\n // to re-login\n MessageBox.confirm(\n \"You have been logged out, you can cancel to stay on this page, or log in again\",\n \"Confirm logout\",\n {\n confirmButtonText: \"Re-Login\",\n cancelButtonText: \"Cancel\",\n type: \"warning\"\n }\n ).then(() => {\n store.dispatch(\"user/resetToken\").then(() => {\n location.reload();\n });\n });\n }\n return Promise.reject(new Error(res.message || \"Error\"));\n } else {\n return res;\n }\n },\n error => {\n console.log(\"err\" + error);\n Message({\n message: error.message,\n type: \"error\",\n duration: 5 * 1000\n });\n return Promise.reject(error);\n }\n);\n\nexport default service;4. UI 界面修改
\n关于 UI 界面修改，这里就不做说明了，因为涉及到 Vue.js 的基础使用，如果还不会使用 Vue.js，建议先复制示例代码就好。如果对 Vue.js 感兴趣，可以到 Vue.js 官网 学习。也可以阅读本人的 Vuejs 从入门到精通系列文章，喜欢的话，可以送上您宝贵的 Star (*^▽^*)
这里只需要复制 Demo 源码 的 frontend/router 和 frontend/views 两个文件夹就好。
前端部署
\n因为前端编译后都是静态文件，我们需要将静态文件上传到腾讯云的 COS（对象存储） 服务，然后开启 COS 的静态网站功能就可以了，这些都不需要你手动操作，使用 @serverless/tencent-website 组件就可以轻松搞定。
\n1. 修改 Serverless 配置文件
\n修改项目根目录下 serverless.yml 文件，新增前端相关配置：
name: admin-system\n\n# 前端配置\nfrontend:\n component: \"@serverless/tencent-website\"\n inputs:\n code:\n src: dist\n root: frontend\n envPath: src # 相对于 root 指定目录，这里实际就是 frontend/src\n hook: npm run build\n env:\n # 依赖后端部署成功后生成的 url\n apiUrl: ${backend.url}\n protocol: https\n # TODO: CDN 配置，请修改！！！\n hosts:\n - host: sls-admin.yugasun.com # CDN 加速域名\n https:\n certId: abcdedg # 为加速域名在腾讯云平台申请的免费证书 ID\n http2: off\n httpsType: 4\n forceSwitch: -2\n\n# 后端配置\nbackend:\n component: \"@serverless/tencent-egg\"\n inputs:\n code: ./backend\n functionName: admin-system\n role: QCS_SCFFull\n functionConf:\n timeout: 120\n vpcConfig:\n vpcId: vpc-6n5x55kb\n subnetId: subnet-4cvr91js\n apigatewayConf:\n protocols:\n - https2. 执行部署
\n执行部署命令：
\n$ serverless --debug输出如下成功结果：
\n frontend:\n url: https://dtnu69vl-470dpfh-1251556596.cos-website.ap-guangzhou.myqcloud.com\n env:\n apiUrl: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/\n host:\n - https://sls-admin.yugasun.com (CNAME: sls-admin.yugasun.com.cdn.dnsv1.com）\n backend:\n region: ap-guangzhou\n functionName: admin-system\n apiGatewayServiceId: service-f1bhmhk4\n url: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/\n\n注释：这里
\nfrontend中多输出了host，是我们的 CDN 加速域名，可以通过配置@serverless/tencent-website组件的inputs.hosts来实现。有关 CDN 相关配置说明可以阅读 基于 Serverless Component 的全栈解决方案 - 续集。当然，如果你不想配置 CDN，直接删除，然后访问 COS 生成的静态网站 url。
部署成功后，我们就可以访问 https://sls-admin.yugasun.com 登录体验了。
源码
\n本篇涉及到所有源码都维护在开源项目 tencent-serverless-demo 中 admin-system
\n总结
\n本文基于腾讯云的无服务器框架 Serverless Framework 实现，涉及到内容较多，推荐在阅读时，边看边开发，跟着文章节奏一步一步实现。
\n如果遇到问题，可以参考本文源码。如果你成功实现了，可以到官网进一步熟悉 Egg.js 框架，以便今后可以实现更加复杂的应用。虽然本文使用的是 Vue.js 前端框架，但是你也可以将 frontend 更换为任何你喜欢的前端框架项目，开发时只需要将接口请求前缀使用 @serverless/tencent-website 组件生成的 env.js 文件就行。
\n\n
\n
\n\n传送门：
\n\n
\n- GitHub: github.com/serverless
\n- 官网：serverless.com
\n
欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！
","tableOfContents":"- \n
- 背景 \n
- Egg.js 入门 \n
- 准备 \n
- \n\n\n \n
- \n\n
- \n
- 1. 准备 \n
- 2. 配置 Serverless \n
- 3. 执行部署 \n
- 4. 账号配置（可选） \n
- 5. 文章 API \n
\n - \n\n
- \n
- 1. 删除接口模拟 \n
- 2. 修改接口函数 \n
- 3. 修改接口工具函数 \n
- 4. UI 界面修改 \n
\n - \n\n\n \n
- 源码 \n
- 总结 \n