基于Serverless的前后端一体化微应用开发

基于Serverless的前后端一体化微应用开发技术创新，变革未来Malagu

框架是什么有哪些价值开发体验如何主要内容231Malagu

框架是什么背景主要特点Malagu

组件与

Nest.js

比较与

Serverless

Framework

比较背景Malagu

框架是什么希望有一个框架对

Serverless

友好以应用为视角的

Serverless

原生开发框架，而非函数模块化、组件化、扩展性强对全栈开发者更友好简单易上手主要特点Malagu

框架是什么「Serverless

First」，默认提供适配

Serverless

最佳实践，也支持运行在服务器

上「支持前后端一体化」，基于

JSON

RPC，前端像调用本地方法一样调用后端方法前后端「支持

rpc和

rest」两种通信形式，通过

mvc

可以满足传统纯后端

rest

风格接口开发需要「支持

typeorm」，事务

AOP

和事务传播行为，也可以集成其他的开源

ORM

框架提供「类

spring

security

的认证和授权」，现在已经集成了「开箱即用的

authing

平台」，实现了

oidc

认证和授权「组件化」，框架本身也是基于组件化实现，将复杂大型项目拆解成一个个

Malagu

组件，提高了代码的复用能力、降低了代码维护难度「依赖注入和

AOP」，抽象了一套前后端统一的依赖注入，依赖注入的体验与

spring

差不多「命令行工具插件化」，默认提供初始化、运行、构建、部署能力，通过插件可以扩展命令行的能力「零配置」，提供了一套默认行为，你也可以通过

Malagu

配置文件覆盖默认行为。「支持适配任意前端框架」，目前集成了

React前端框架，另外，UI

框架集成了

antd、md、grommet

等Malagu

组件Malagu

框架是什么组件内部结构组件形态组件加载组件模块配置现有的组件组件内部结构Malagu

组件说明：长方形表示组件属性，包含前端属性、后端属性和公共属性红色三角形表示前端代码蓝色三角形表示后端代码红色和蓝色三角形交集橙色三角形表示公共代码前端代码可以访问公共代码、公共属性和前端属性后端代码可以访问公共代码、公共属性和后端属性公共代码只能访问公共属性组件形态Malagu

组件组件包含四种形态：前端组件【运行时】后端组件【运行时】一体化组件【运行时】命令行组件【编译时】其中运行时组件，如下图所示：组件模块加载Malagu

组件组件配置Malagu

组件1.

配置文件a.

公共属性配置文件：malagu.ymlb.

模式属性配置文件：malagu-[mode].yml2.

表达式支持引用其他属性值：'https://${host}:${port}'引用环境变量值：${env.PASSWORD}默认值设置：'${env.PASSWORD?:123456}'3.

代码中使用@Component()exportclassA

{@Value('foo')

//

引用组件属性 fooprotectedreadonlyfoo:

string;}已有组件Malagu

组件前端组件antdreactwidgetmaterial-uigrommetshell后端组件securitytypeormauthingserve-staticmvcweb编译时组件（平台适配器）express-adapterfc-adaptervercel-adapterscf-adapter一体化组件corerpc与

Nest.js

比较Malagu

框架是什么Malagu

框架是

Serverless

First，对

Serverless

更友好Malagu

框架支持前后端一体化，你可以使用

Malagu

开发命令行工具、纯前端应用、纯后端应用和前后端一体化应用Malagu

框架借鉴了

Spring

设计风格，而

Nest.js

借鉴的是

AngularMalagu

在模块的基础上扩展出了组件的概念，组件化更容易定制与扩展与

Serverless

Framework

比较Malagu

框架是什么Malagu

组件与

Serverless

Component

的目标是相同的Malagu框架包含了命令行工具

+

原生的应用框架，去适配不同的云厂商，而

Serverless

Component

只提供了一个命令行工具，去适配传统的框架和云厂商Malagu

框架有哪些价值降低

Serverless

应用开发门槛，屏蔽

Serverless

底层细节Malagu

框架提供了一些列在

Serverless场景下的最佳实践丰富的基础组件，如依赖注入、认证与授权、数据库操作，开箱即用，极大提高了业务项目开发效率组件化让业务更容易复用，沉淀为公司资产工程标准化，让跨项目沟通成本更低云厂商不锁定，零代码改造迁移Malagu

框架开发体验如何基于

Serverless

的前后端一体化开发体验案例介绍前期准备初始化前后端一体化项目本地运行项目本地调试项目构建与部署项目组件配置部署配置前后端一体化开发案例介绍基于

Serverless

的前后端一体化开发体验将使用

Malagu

框架介绍基于

Serverless

的前后端一体化微应用开发体验，当然基于传统服务器的前后端一体化微应用开发也是可行的，相较于

Serverless

来说，部署运维成本更高，资源利用率更低。前后端一体化，不仅仅是前后端使用同一种开发语言、同一套

IoC

方案、同一个项目开发等等，这里面其实包含了更多的丰富内涵和创新空间。接下来，我将向大家展示Malagu

在前后端一体化的开发体验是怎么样的。前期准备基于

Serverless

的前后端一体化开发体验安装

yarn

工具：npm

install

-g

yarn安装

malagu

cli

工具：npm

install

-g

@malagu/cli初始化前后端一体化项目基于

Serverless

的前后端一体化开发体验初始化：malagu

init，选择模板：fc-admin-app项目目录结构说明项目目录结构说明（一）基于

Serverless

的前后端一体化开发体验.├──

.github│ └──

workflows│ └──

deploy.yml

当你将项目提交到 Github

管理，每次提交代码的时候，自动触发对于环境的 CI/CD├──

.gitignore├──

.malagu 与 Malagu

相关的配置文件、构建编译结果等等文件│ ├──

backend 后端相关的文件│ │ ├──

dist 后端构建编译输出的产物│ │ │ ├──

index.js│ │ │ └──

index.js.map│ │ └──

malagu.yml

该文件修改无效，框架把所有 Malagu

组件的配置文件进行拓扑排序并合并的通用配置和后端配置的最终配置文件│ ├──

bootstrap 当选择部署到阿里云函数计算平台，默认采用 Custom

运行时，bootstrap

为启动文件│ └──frontend 前端相关的文件│ ├──

dist 前端构建编译输出的产物│ │ ├──

0.c6ed55dba53a380668f5.js│ │ ├──

1.5221182caa277536b162.js│ │ ├──10.859a880f04b6d20e3ee2.js│ │ ├──11.e4f1cf442ae521a66b25.js│ │ ├──

2.fa57b5d2f3e9b8cef6fd.js项目目录结构说明（二）基于

Serverless

的前后端一体化开发体验│ │ ├──

favicon.ico│ │ ├──

index.html│ │ ├──

main.104fd814ecc08b3a89d8.js│ │ ├──

service-worker.js│ │ └──

workbox-25caeab4.js│ └──

malagu.yml文件修改无效，框架把所有 Malagu

组件的配置文件进行拓扑排序并合并的通用配置和前端配置的最终配置文件├──

.vscode│ └──

launch.json 启动 vscode

单步调试的配置文件├──

README.md├──

favicon.ico 网站图标，网站入口文件 index.html

默认提供，你也可以在项目根下面自定义 index.html

文件├──

malagu-database.yml 可选，数据库相关配置├──malagu-pre.yml 可选，预发环境配置├──

malagu-release.yml 可选，线上环境配置├──

malagu-test.yml 可选，测试环境配置├──

malagu.yml 可选，通用配置├──

package.json├──

src│ ├──

browser项目目录结构说明（三）基于

Serverless

的前后端一体化开发体验├──malagu.yml 可选，通用配置├──

package.json├──

src│ ├──

browser│ │ ├──

application-lifecycle.ts 前端应用生命周期钩子，此示例中主要用于初始化用户登录状态│ │ ├──

module.ts 前端模块入口文件│ │ └──

user.view.tsx 前端页面实现│ ├──

common│ │ ├──

index.ts│ │ └──

user-protocol.ts 接口定义│ └──

node│ ├──

entity 数据库实体类定义文件夹│ │ ├──

index.ts│ │ └──

user.ts 用户实体类定义│ ├──

module.ts 后端模块入口文件│ └──user-service.ts├──

tsconfig.json└──

yarn.lock本地运行项目基于

Serverless

的前后端一体化开发体验本地运行项目：malagu

serve本地调试项目基于

Serverless

的前后端一体化开发体验使用

vscode

自带的调试工具构建与部署项目基于

Serverless

的前后端一体化开发体验构建与部署项目：malagu

deploy部署配置基于

Serverless

的前后端一体化开发体验多平台部署阿里云函数计算腾讯云函数Vercel平台传统服务器自定义服务名deployConfig:service:name:

xxxxx1.

自定义内存大小deployConfig:function:memorySize:

5121.

绑定自定义域名deployConfig:customDomain:name:

#

需要在你的域名解析配置对于的 CNAME

才能正常访问到你的函数，利润 CNAME

记录值：13048890.数据库操作基于

Serverless

的前后端一体化开发体验1.

添加数据库组件yarn

add

@malagu/typeorm #npmi

@malagu/typeorm1.

配置数据库链接#

malagu-database.ymlbackend:malagu:typeorm:ormConfig:-type:"${env.DE_TYPE?:'mysql'}"host:"${env.DB_HOST?:'localhost'}"port:"${env.DB_PORT?:

3306}"synchronize:

trueusername:"${env.DB_USERNAME?:'root'}"password:"${env.DB_PASSWORD?:'root'}"database:"${env.DB_DATABASE?:

'test'}"1.

数据库操作数据库操作基于

Serverless

的前后端一体化开发体验@Rpc(UserService)exportclassUserServiceImplimplementsUserService

{@Transactional({readOnly:true

})list():Promise<User[]>

{constrepo=

OrmContext.getRepository(User);return

repo.find();}@Transactional({readOnly:true

})get(id:number):Promise<User|undefined>{constrepo=

OrmContext.getRepository(User);return

repo.findOne(id);}@Transactional()asyncremove(id:number):Promise<void>

{constrepo=

OrmContext.getRepository(User);awaitrepo.delete(id);}前后端一体化开发基于

Serverless

的前后端一体化开发体验定义接口后端实现接口前端调用接口（像调用本地方法一样调用后端接口）定义接口前后端一体化开发//

src/common/user-protocol.tsexportconstUserService=

Symbol('UserService');exportinterfaceUserService

{list():

Promise<User[]>;get(id:number):Promise<User|

undefined>;remove(id:number):

Promise<void>modify(user:User):

Promise<void>;create(user:User):

Promise<User>;}exportinterfaceUser

{id:

number;name:

string;age:

number;}后端实现接口前后端一体化开发@Rpc(UserService)exportclassUserServiceImplimplementsUserService

{@Transactional({readOnly:true

})list():Promise<User[]>

{constrepo=

OrmContext.getRepository(User);return

repo.find();}@Transactional({readOnly:true

})get(id:number):Promise<User|undefined>

{constrepo=

OrmContext.getRepository(User);return

repo.findOne(id);}@Transactional()asyncremove(id:number):Promise<voi