作為一名前端開發者，在選擇 Nodejs 後端服務框架時，第一時間會想到 Egg.js，不得不說 Egg.js 是一個非常優秀的企業級框架，它的高擴展性和豐富的插件，極大的提高了開發效率。開發者只需要關注業務就好，比如要使用 redis，引入 egg-redis 插件，然後簡單配置就可以了。正因為如此，第一次接觸它，我便喜歡上了它，之後也用它開發過不少應用。
有了如此優秀的框架，那麼如何將一個 Egg.js 的服務遷移到 Serverless 架構上呢？
背景
我在文章 基於 Serverless Component 的全棧解決方案 中講述了，如何將一個基於 Vue.js 的前端應用和基於 Express 的後端服務，快速部署到騰訊雲上。雖然受到不少開發者的喜愛，但是很多開發者私信問我，這還是一個 Demo 性質的項目而已，有沒有更加實用性的解決方案。而且他們實際開發中，很多使用的正是 Egg.js 框架，能不能提供一個 Egg.js 的解決方案？
本文將手把手教你結合 Egg.js 和 Serverless 實現一個後臺管理系統。
讀完此文你將學到：
- Egg.js 基本使用
- 如何使用 Sequelize ORM 模塊進行 Mysql 操作
- 如何使用 Redis
- 如何使用 JWT 進行用戶登錄驗證
- Serverless Framework 的基本使用
- 如何將本地開發好的 Egg.js 應用部署到騰訊云云函數上
- 如何基於雲端對象存儲快速部署靜態網站
Egg.js 入門
初始化 Egg.js 項目：
<code>$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i/<code>
啟動項目:
<code>$ npm run dev/<code>
然後瀏覽器訪問 http://localhost:7001，就可以看到親切的 hi, egg 了。
關於 Egg.js 的框架更多知識，建議閱讀 官方文檔
準備
對 Egg.js 有了簡單瞭解，接下來我們來初始化我們的後臺管理系統，新建一個項目目錄 admin-system:
<code>$ mkdir admin-system/<code>
將上面創建的 Egg.js 項目複製到 admin-system 目錄下，重命名為 backend。然後將前端模板項目複製到 frontend 文件夾中：
<code>$ git clone https://github.com/PanJiaChen/vue-admin-template.git frontend/<code>
說明： vue-admin-template 是基於 Vue2.0 的管理系統模板，是一個非常優秀的項目，建議對 Vue.js 感興趣的開發者可以去學習下，當然如果你對 Vue.js 還不是太瞭解，這裡有個基礎入門學習教程 Vuejs 從入門到精通系列文章
之後你的項目目錄結構如下：
<code>.
├── README.md
├── backend // 創建的 Egg.js 項目
└── frontend // 克隆的 Vue.js 前端項目模板/<code>
啟動前端項目熟悉下界面：
<code>$ cd frontend
$ npm install
$ npm run dev/<code>
然後訪問 http://localhost:9528 就可以看到登錄界面了。
開發後端服務
對於一個後臺管理系統服務，我們這裡只實現登錄鑑權和文章管理功能，剩下的其他功能大同小異，讀者可以之後自由補充擴展。
1. 添加 Sequelize 插件
在正式開發之前，我們需要引入數據庫插件，這裡本人偏向於使用 Sequelize ORM 工具進行數據庫操作，正好 Egg.js 提供了 egg-sequelize 插件，於是直接拿來用，需要先安裝：
<code>$ cd frontend
# 因為需要通過 sequelize 鏈接 mysql 所以這也同時安裝 mysql2 模塊
$ npm install egg-sequelize mysql2 --save/<code>
然後在 backend/config/plugin.js 中引入該插件：
<code>module.exports = {
// ....
sequelize: {
enable: true,
package: "egg-sequelize"
}
// ....
};
/<code>在 backend/config/config.default.js 中配置數據庫連接參數：
<code>// ...
const userConfig = {
// ...
sequelize: {
dialect: "mysql",
// 這裡也可以通過 .env 文件注入環境變量，然後通過 process.env 獲取
host: "xxx",
port: "xxx",
database: "xxx",
username: "xxx",
password: "xxx"
}
// ...
};
// ...
/<code>
2. 添加 JWT 插件
系統將使用 JWT token 方式進行登錄鑑權，安裝配置參考官方文檔，egg-jwt
3. 添加 Redis 插件
系統將使用 redis 來存儲和管理用戶 token，安裝配置參考官方文檔，egg-redis
4. 角色 API
定義用戶模型，創建 backend/app/model/role.js 文件如下：
<code>module.exports = app => {
const { STRING, INTEGER, DATE } = app.Sequelize;
const Role = app.model.define("role", {
id: { type: INTEGER, primaryKey: true, autoIncrement: true },
name: STRING(30),
created_at: DATE,
updated_at: DATE
});
// 這裡定義與 users 表的關係，一個角色可以含有多個用戶，外鍵相關
Role.associate = () => {
app.model.Role.hasMany(app.model.User, { as: "users" });
};
return Role;
};
/<code>實現 Role 相關服務，創建 backend/app/service/role.js 文件如下：
<code>const { Service } = require("egg");
class RoleService extends Service {
// 獲取角色列表
async list(options) {
const {
ctx: { model }
} = this;
return model.Role.findAndCountAll({
...options,
order: [
["created_at", "desc"],
["id", "desc"]
]
});
}
// 通過 id 獲取角色
async find(id) {
const {
ctx: { model }
} = this;
const role = await model.Role.findByPk(id);
if (!role) {
this.ctx.throw(404, "role not found");
}
return role;
}
// 創建角色
async create(role) {
const {
ctx: { model }
} = this;
return model.Role.create(role);
}
// 更新角色
async update({ id, updates }) {
const role = await this.ctx.model.Role.findByPk(id);
if (!role) {
this.ctx.throw(404, "role not found");
}
return role.update(updates);
}
// 刪除角色
async destroy(id) {
const role = await this.ctx.model.Role.findByPk(id);
if (!role) {
this.ctx.throw(404, "role not found");
}
return role.destroy();
}
}
module.exports = RoleService;
/<code>一個完整的 RESTful API 就該包括以上五個方法，然後實現 RoleController, 創建 backend/app/controller/role.js:
<code>const { Controller } = require("egg");
class RoleController extends Controller {
async index() {
const { ctx } = this;
const { query, service, helper } = ctx;
const options = {
limit: helper.parseInt(query.limit),
offset: helper.parseInt(query.offset)
};
const data = await service.role.list(options);
ctx.body = {
code: 0,
data: {
count: data.count,
items: data.rows
}
};
}
async show() {
const { ctx } = this;
const { params, service, helper } = ctx;
const id = helper.parseInt(params.id);
ctx.body = await service.role.find(id);
}
async create() {
const { ctx } = this;
const { service } = ctx;
const body = ctx.request.body;
const role = await service.role.create(body);
ctx.status = 201;
ctx.body = role;
}
async update() {
const { ctx } = this;
const { params, service, helper } = ctx;
const body = ctx.request.body;
const id = helper.parseInt(params.id);
ctx.body = await service.role.update({
id,
updates: body
});
}
async destroy() {
const { ctx } = this;
const { params, service, helper } = ctx;
const id = helper.parseInt(params.id);
await service.role.destroy(id);
ctx.status = 200;
}
}
module.exports = RoleController;
/<code>之後在 backend/app/route.js 路由配置文件中定義 role 的 RESTful API:
<code>router.resources("roles", "/roles", controller.role);
/<code>通過 router.resources 方法，我們將 roles 這個資源的增刪改查接口映射到了 app/controller/roles.js 文件。詳細說明參考 官方文檔
5. 用戶 API
同 Role 一樣定義我們的用戶 API，這裡就不復制粘貼了，可以參考項目實例源碼 admin-system。
6. 同步數據庫表格
上面只是定義好了 Role 和 User 兩個 Schema，那麼如何同步到數據庫呢？這裡先借助 Egg.js 啟動的 hooks 來實現，Egg.js 框架提供了統一的入口文件（app.js）進行啟動過程自定義，這個文件返回一個 Boot 類，我們可以通過定義 Boot 類中的生命週期方法來執行啟動應用過程中的初始化工作。
我們在 backend 目錄中創建 app.js 文件，如下：
<code>"use strict";
class AppBootHook {
constructor(app) {
this.app = app;
}
async willReady() {
// 這裡只能在開發模式下同步數據庫表格
const isDev = process.env.NODE_ENV === "development";
if (isDev) {
try {
console.log("Start syncing database models...");
await this.app.model.sync({ logging: console.log, force: isDev });
console.log("Start init database data...");
await this.app.model.query(
"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');"
);
await this.app.model.query(
"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);"
);
await this.app.model.query(
"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);"
);
console.log("Successfully init database data.");
console.log("Successfully sync database models.");
} catch (e) {
console.log(e);
throw new Error("Database migration failed.");
}
}
}
}
module.exports = AppBootHook;
/<code>
通過 willReady 生命週期函數，我們可以執行 this.app.model.sync() 函數來同步數據表，當然這裡同時初始化了角色和用戶數據記錄，用來做為演示用。
注意：這的數據庫同步只是本地調試用，如果想要騰訊雲的 Mysql 數據庫，建議開啟遠程連接，通過 sequelize db:migrate 實現，而不是每次啟動 Egg 應用時同步，示例代碼已經完成此功能，參考 Egg Sequelize 文檔。 這裡本人為了省事，直接開啟騰訊雲 Mysql 公網連接，然後修改 config.default.js 中的 sequelize 配置，運行 npm run dev 進行開發模式同步。
到這裡，我們的用戶和角色的 API 都已經定義好了，啟動服務 npm run dev，訪問 https://127.0.0.1:7001/users 可以獲取所有用戶列表了。
7. 用戶登錄/註銷 API
這裡登錄邏輯比較簡單，客戶端發送 用戶名 和 密碼 到 /login 路由，後端通過 login 函數接受，然後從數據庫中查詢該用戶名，同時比對密碼是否正確。如果正確則調用 app.jwt.sign() 函數生成 token，並將 token 存入到 redis 中，同時返回該 token，之後客戶端需要鑑權的請求都會攜帶 token，進行鑑權驗證。思路很簡單，我們就開始實現了。
流程圖如下：
首先，在 backend/app/controller/home.js 中新增登錄處理 login 方法：
<code>class HomeController extends Controller {
// ...
async login() {
const { ctx, app, config } = this;
const { service, helper } = ctx;
const { username, password } = ctx.request.body;
const user = await service.user.findByName(username);
if (!user) {
ctx.status = 403;
ctx.body = {
code: 403,
message: "Username or password wrong"
};
} else {
if (user.password === helper.encryptPwd(password)) {
ctx.status = 200;
const token = app.jwt.sign(
{
id: user.id,
name: user.name,
role: user.role.name,
avatar: user.avatar
},
config.jwt.secret,
{
expiresIn: "1h"
}
);
try {
await app.redis.set(`token_${user.id}`, token);
ctx.body = {
code: 0,
message: "Get token success",
token
};
} catch (e) {
console.error(e);
ctx.body = {
code: 500,
message: "Server busy, please try again"
};
}
} else {
ctx.status = 403;
ctx.body = {
code: 403,
message: "Username or password wrong"
};
}
}
}
}
/<code>註釋：這裡有個密碼存儲邏輯，用戶在註冊時，密碼都是通過 helper 函數 encryptPwd() 進行加密的（這裡用到最簡單的 md5 加密方式，實際開發中建議使用更加高級加密方式），所以在校驗密碼正確性時，也需要先加密一次。至於如何在 Egg.js 框架中新增 helper 函數，只需要在 backend/app/extend 文件夾中新增 helper.js 文件，然後 modole.exports 一個包含該函數的對象就行，參考 Egg 框架擴展文檔
然後，在 backend/app/controller/home.js 中新增 userInfo 方法，獲取用戶信息：
<code>async userInfo() {
const { ctx } = this;
const { user } = ctx.state;
ctx.status = 200;
ctx.body = {
code: 0,
data: user,
};
}
/<code>egg-jwt 插件，在鑑權通過的路由對應 controller 函數中，會將 app.jwt.sign(user, secrete) 加密的用戶信息，添加到 ctx.state.user 中，所以 userInfo 函數只需要將它返回就行。
之後，在 backend/app/controller/home.js 中新增 logout 方法：
<code>async logout() {
const { ctx } = this;
ctx.status = 200;
ctx.body = {
code: 0,
message: 'Logout success',
};
}
/<code>userInfo 和 logout 函數非常簡單，重點是路由中間件如何處理。
接下來，我們來定義登錄相關路由，修改 backend/app/router.js 文件，新增 /login, /user-info, /logout 三個路由：
<code>const koajwt = require("koa-jwt2");
module.exports = app => {
const { router, controller, jwt } = app;
router.get("/", controller.home.index);
router.post("/login", controller.home.login);
router.get("/user-info", jwt, controller.home.userInfo);
const isRevokedAsync = function(req, payload) {
return new Promise(resolve => {
try {
const userId = payload.id;
const tokenKey = `token_${userId}`;
const token = app.redis.get(tokenKey);
if (token) {
app.redis.del(tokenKey);
}
resolve(false);
} catch (e) {
resolve(true);
}
});
};
router.post(
"/logout",
koajwt({
secret: app.config.jwt.secret,
credentialsRequired: false,
isRevoked: isRevokedAsync
}),
controller.home.logout
);
router.resources("roles", "/roles", controller.role);
router.resources("users", "/users", controller.user);
router.resources("posts", "/posts", controller.post);
};
/<code>Egg.js 框架定義路由時，router.post() 函數可以接受中間件函數，用來處理一些路由相關的特殊邏輯。
比如 /user-info，路由添加了 app.jwt 作為 JWT 鑑權中間件函數，至於為什麼這麼用，egg-jwt 插件有明確說明。
這裡稍微複雜的是 /logout 路由，因為我們在註銷登錄時，需要將用戶的 token 從 redis 中移除，所以這裡藉助了 koa-jwt2 的 isRevokded 參數，來進行 token 刪除。
後端服務部署
到這裡，後端服務的登錄和註銷邏輯基本完成了。那麼如何部署到雲函數呢？可以直接使用 tencent-egg 組件，它是專門為 Egg.js 框架打造的 Serverless Component，使用它可以快速將我們的 Egg.js 項目部署到騰訊云云函數上。
1. 準備
我們先創建一個 backend/sls.js 入口文件：
<code>const { Application } = require("egg");
const app = new Application();
module.exports = app;
/<code>然後修改 backend/config/config.default.js 文件:
<code>const config = (exports = {
env: "prod", // 推薦雲函數的 egg 運行環境變量修改為 prod
rundir: "/tmp",
logger: {
dir: "/tmp"
}
});
/<code>註釋：這裡之所有需要修改運行和日誌目錄，是因為雲函數運行時，只有 /tmp 才有寫權限。
全局安裝 serverless 命令：
<code>$ npm install serverless -g/<code>
2. 配置 Serverless
在項目根目錄下創建 serverless.yml 文件，同時新增 backend 配置：
<code>backend:
component: "@serverless/tencent-egg"
inputs:
code: ./backend
functionName: admin-system
# 這裡必須指定一個具有操作 mysql 和 redis 的角色，具體角色創建，可訪問 https://console.cloud.tencent.com/cam/role
role: QCS_SCFFull
functionConf:
timeout: 120
# 這裡的私有網絡必須和 mysql、redis 實例一致
vpcConfig:
vpcId: vpc-xxx
subnetId: subnet-xxx
apigatewayConf:
protocols:
- https/<code>
此時你的項目目錄結構如下：
<code>.
├── README.md // 項目說明文件
├── serverless.yml // serverless yml 配合文件
├── backend // 創建的 Egg.js 項目
└── frontend // 克隆的 Vue.js 前端項目模板/<code>
3. 執行部署
執行部署命令：
<code>$ serverless --debug/<code>
之後控制檯需要進行掃碼登錄驗證騰訊雲賬號，掃碼登錄就好。等部署成功會發揮如下信息：
<code>backend:
region: ap-guangzhou
functionName: admin-system
apiGatewayServiceId: service-f1bhmhk4
url: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release//<code>
這裡輸出的 url 就是部署成功的 API 網關接口，可以直接訪問測試。
註釋：雲函數部署時，會自動在騰訊雲的 API 網關創建一個服務，同時創建一個 API，通過該 API 就可以觸發雲函數執行了。
4. 賬號配置（可選）
當前默認支持 Serverless cli 掃描二維碼登錄，如果希望配置持久的環境變量/秘鑰信息，也可以在項目根目錄創建 .env 文件
在 .env 文件中配置騰訊雲的 SecretId 和 SecretKey 信息並保存，密鑰可以在 API 密鑰管理 中獲取或者創建.
<code># .env
TENCENT_SECRET_ID=123
TENCENT_SECRET_KEY=123/<code>
5. 文章 API
跟用戶 API 類似，只需要複製粘貼上面用戶相關模塊，修改名稱為 posts， 並修改數據模型就行，這裡就不粘貼代碼了。
前端開發
本實例直接使用的 vue-admin-template 的前端模板。
我們需要做如下幾部分修改：
- 刪除接口模擬：更換為真實的後端服務接口
- 修改接口函數：包括用戶相關的 frontend/src/api/user.js 和文章相關接口 frontend/src/api/post.js。
- 修改接口工具函數：主要是修改 frontend/src/utils/request.js 文件，包括 axios請求的 baseURL 和請求的 header。
- UI 界面修改：主要是新增文章管理頁面，包括列表頁和新增頁。
1. 刪除接口模擬
首先刪除 frontend/mock 文件夾。然後修改前端入口文件 frontend/src/main.js：
<code>// 1. 引入接口變量文件，這個會依賴 @serverless/tencent-website 組件自動生成
import "./env.js";
import Vue from "vue";
import "normalize.css/normalize.css";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import locale from "element-ui/lib/locale/lang/en";
import "@/styles/index.scss";
import App from "./App";
import store from "./store";
import router from "./router";
import "@/icons";
import "@/permission";
// 2. 下面這段就是 mock server 引入，刪除就好
// if (process.env.NODE_ENV === 'production') {
// const { mockXHR } = require('../mock')
// mockXHR()
// }
Vue.use(ElementUI, { locale });
Vue.config.productionTip = false;
new Vue({
el: "#app",
router,
store,
render: h => h(App)
});
/<code>
2. 修改接口函數
修改 frontend/src/api/user.js 文件，包括登錄、註銷、獲取用戶信息和獲取用戶列表函數如下：
<code>import request from "@/utils/request";
// 登錄
export function login(data) {
return request({
url: "/login",
method: "post",
data
});
}
// 獲取用戶信息
export function getInfo(token) {
return request({
url: "/user-info",
method: "get"
});
}
// 註銷登錄
export function logout() {
return request({
url: "/logout",
method: "post"
});
}
// 獲取用戶列表
export function getList() {
return request({
url: "/users",
method: "get"
});
}
/<code>
新增 frontend/src/api/post.js 文件如下：
<code>import request from "@/utils/request";
// 獲取文章列表
export function getList(params) {
return request({
url: "/posts",
method: "get",
params
});
}
// 創建文章
export function create(data) {
return request({
url: "/posts",
method: "post",
data
});
}
// 刪除文章
export function destroy(id) {
return request({
url: `/posts/${id}`,
method: "delete"
});
}
/<code>
3. 修改接口工具函數
因為 @serverless/tencent-website 組件可以定義 env 參數，執行成功後它會在指定 root 目錄自動生成 env.js，然後在 frontend/src/main.js 中引入使用。 它會掛載 env 中定義的接口變量到 window 對象上。比如這生成的 env.js 文件如下：
<code>window.env = {};
window.env.apiUrl =
"https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/";
/<code>根據此文件我們來修改 frontend/src/utils/request.js 文件：
<code>import axios from "axios";
import { MessageBox, Message } from "element-ui";
import store from "@/store";
import { getToken } from "@/utils/auth";
// 創建 axios 實例
const service = axios.create({
// 1. 這裡設置為 `env.js` 中的變量 `window.env.apiUrl`
baseURL: window.env.apiUrl || "/", // url = base url + request url
timeout: 5000 // request timeout
});
// request 注入
service.interceptors.request.use(
config => {
// 2. 添加鑑權token
if (store.getters.token) {
config.headers["Authorization"] = `Bearer ${getToken()}`;
}
return config;
},
error => {
console.log(error); // for debug
return Promise.reject(error);
}
);
// 請求 response 注入
service.interceptors.response.use(
response => {
const res = response.data;
// 只有請求code為0，才是正常返回，否則需要提示接口錯誤
if (res.code !== 0) {
Message({
message: res.message || "Error",
type: "error",
duration: 5 * 1000
});
if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// to re-login
MessageBox.confirm(
"You have been logged out, you can cancel to stay on this page, or log in again",
"Confirm logout",
{
confirmButtonText: "Re-Login",
cancelButtonText: "Cancel",
type: "warning"
}
).then(() => {
store.dispatch("user/resetToken").then(() => {
location.reload();
});
});
}
return Promise.reject(new Error(res.message || "Error"));
} else {
return res;
}
},
error => {
console.log("err" + error);
Message({
message: error.message,
type: "error",
duration: 5 * 1000
});
return Promise.reject(error);
}
);
export default service;
/<code>
4. UI 界面修改
關於 UI 界面修改，這裡就不做說明了，因為涉及到 Vue.js 的基礎使用，如果還不會使用 Vue.js，建議先複製示例代碼就好。如果對 Vue.js 感興趣，可以到 Vue.js 官網 學習。也可以閱讀本人的 Vuejs 從入門到精通系列文章，喜歡的話，可以送上您寶貴的 Star (*^▽^*)
這裡只需要複製 Demo 源碼 的 frontend/router 和 frontend/views 兩個文件夾就好。
前端部署
因為前端編譯後都是靜態文件，我們需要將靜態文件上傳到騰訊雲的 COS（對象存儲） 服務，然後開啟 COS 的靜態網站功能就可以了，這些都不需要你手動操作，使用 @serverless/tencent-website 組件就可以輕鬆搞定。
1. 修改 Serverless 配置文件
修改項目根目錄下 serverless.yml 文件，新增前端相關配置：
<code>name: admin-system
# 前端配置
frontend:
component: "@serverless/tencent-website"
inputs:
code:
src: dist
root: frontend
envPath: src # 相對於 root 指定目錄，這裡實際就是 frontend/src
hook: npm run build
env:
# 依賴後端部署成功後生成的 url
apiUrl: ${backend.url}
protocol: https
# TODO: CDN 配置，請修改！！！
hosts:
- host: sls-admin.yugasun.com # CDN 加速域名
https:
certId: abcdedg # 為加速域名在騰訊雲平臺申請的免費證書 ID
http2: off
httpsType: 4
forceSwitch: -2
# 後端配置
backend:
component: "@serverless/tencent-egg"
inputs:
code: ./backend
functionName: admin-system
role: QCS_SCFFull
functionConf:
timeout: 120
vpcConfig:
vpcId: vpc-6n5x55kb
subnetId: subnet-4cvr91js
apigatewayConf:
protocols:
- https/<code>
2. 執行部署
執行部署命令：
<code>$ serverless --debug/<code>
輸出如下成功結果：
<code>frontend:
url: https://dtnu69vl-470dpfh-1251556596.cos-website.ap-guangzhou.myqcloud.com
env:
apiUrl: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release/
host:
- https://sls-admin.yugasun.com (CNAME: sls-admin.yugasun.com.cdn.dnsv1.com）
backend:
region: ap-guangzhou
functionName: admin-system
apiGatewayServiceId: service-f1bhmhk4
url: https://service-f1bhmhk4-1251556596.gz.apigw.tencentcs.com/release//<code>
註釋：這裡 frontend 中多輸出了 host，是我們的 CDN 加速域名，可以通過配置 @serverless/tencent-website 組件的 inputs.hosts 來實現。有關 CDN 相關配置說明可以閱讀 基於 Serverless Component 的全棧解決方案 - 續集。當然，如果你不想配置 CDN，直接刪除，然後訪問 COS 生成的靜態網站 url。
部署成功後，我們就可以訪問 https://sls-admin.yugasun.com 登錄體驗了。
源碼
本篇涉及到所有源碼都維護在開源項目 tencent-serverless-demo 中 admin-system
總結
本篇文章涉及到內容較多，推薦在閱讀時，邊看邊開發，跟著文章節奏一步一步實現。如果遇到問題，可以參考本文源碼。如果你成功實現了，可以到官網進一步熟悉 Egg.js 框架，以便今後可以實現更加複雜的應用。雖然本文使用的是 Vue.js 前端框架，但是你也可以將 frontend 更換為任何你喜歡的前端框架項目，開發時只需要將接口請求前綴使用 @serverless/tencent-website 組件生成的 env.js 文件就行。
閱讀更多 Serverless 的文章
