Serverless + Egg.js 后台管理系统实战

个人博客导航页（点击右侧链接即可打开个人博客）：大牛带你入门技术栈 

作为一名前端开发者，在选择 Nodejs 后端服务框架时，第一时间会想到 Egg.js，不得不说 Egg.js 是一个非常优秀的企业级框架，它的高扩展性和丰富的插件，极大的提高了开发效率。开发者只需要关注业务就好，比如要使用 redis，引入 egg-redis 插件，然后简单配置就可以了。正因为如此，第一次接触它，我便喜欢上了它，之后也用它开发过不少应用。

有了如此优秀的框架，那么如何将一个 Egg.js 的服务迁移到 Serverless 架构上呢？

背景

我在文章 基于 Serverless Component 的全栈解决方案 中讲述了，如何将一个基于 Vue.js 的前端应用和基于 Express 的后端服务，快速部署到腾讯云上。虽然受到不少开发者的喜爱，但是很多开发者私信问我，这还是一个 Demo 性质的项目而已，有没有更加实用性的解决方案。而且他们实际开发中，很多使用的正是 Egg.js 框架，能不能提供一个 Egg.js 的解决方案？

本文将手把手教你结合 Egg.js 和 Serverless 实现一个后台管理系统。

读完此文你将学到：

1. Egg.js 基本使用
2. 如何使用 Sequelize ORM 模块进行 Mysql 操作
3. 如何使用 Redis
4. 如何使用 JWT 进行用户登录验证
5. Serverless Framework 的基本使用
6. 如何将本地开发好的 Egg.js 应用部署到腾讯云云函数上
7. 如何基于云端对象存储快速部署静态网站

Egg.js 入门

初始化 Egg.js 项目：

$ mkdir egg-example && cd egg-example
$ npm init egg --type=simple
$ npm i

启动项目:

$ npm run dev

然后浏览器访问 http://localhost:7001，就可以看到亲切的 hi, egg 了。

关于 Egg.js 的框架更多知识，建议阅读 官方文档

准备

对 Egg.js 有了简单了解，接下来我们来初始化我们的后台管理系统，新建一个项目目录 admin-system:

$ mkdir admin-system

将上面创建的 Egg.js 项目复制到 admin-system 目录下，重命名为 backend。然后将前端模板项目复制到 frontend 文件夹中：

$ git clone https://github.com/PanJiaChen/vue-admin-template.git frontend

说明： vue-admin-template 是基于 Vue2.0 的管理系统模板，是一个非常优秀的项目，建议对 Vue.js 感兴趣的开发者可以去学习下，当然如果你对 Vue.js 还不是太了解，这里有个基础入门学习教程 Vuejs 从入门到精通系列文章

之后你的项目目录结构如下：

.
├── README.md
├── backend     // 创建的 Egg.js 项目
└── frontend    // 克隆的 Vue.js 前端项目模板

启动前端项目熟悉下界面：

$ cd frontend
$ npm install
$ npm run dev

然后访问 http://localhost:9528 就可以看到登录界面了。

开发后端服务

对于一个后台管理系统服务，我们这里只实现登录鉴权和文章管理功能，剩下的其他功能大同小异，读者可以之后自由补充扩展。

1. 添加 Sequelize 插件

在正式开发之前，我们需要引入数据库插件，这里本人偏向于使用 Sequelize ORM 工具进行数据库操作，正好 Egg.js 提供了 egg-sequelize 插件，于是直接拿来用，需要先安装：

$ cd frontend
# 因为需要通过 sequelize 链接 mysql 所以这也同时安装 mysql2 模块
$ npm install egg-sequelize mysql2 --save

然后在 backend/config/plugin.js 中引入该插件：

module.exports = {
  // ....
  sequelize: {
    enable: true,
    package: "egg-sequelize"
  }
  // ....
};

在 backend/config/config.default.js 中配置数据库连接参数：

// ...
const userConfig = {
  // ...
  sequelize: {
    dialect: "mysql",

    // 这里也可以通过 .env 文件注入环境变量，然后通过 process.env 获取
    host: "xxx",
    port: "xxx",
    database: "xxx",
    username: "xxx",
    password: "xxx"
  }
  // ...
};
// ...

2. 添加 JWT 插件

系统将使用 JWT token 方式进行登录鉴权，安装配置参考官方文档，egg-jwt

3. 添加 Redis 插件

系统将使用 redis 来存储和管理用户 token，安装配置参考官方文档，egg-redis

4. 角色 API

定义用户模型，创建 backend/app/model/role.js 文件如下：

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;
};

实现 Role 相关服务，创建 backend/app/service/role.js 文件如下：

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.f