静态资源
Malagu 框架通过与serve-static库结合实现静态资源的访问,让您的应用程序更加完善。
我们开发前端的时候,往往会采用前后端分离方案,前端编译构建的静态资源文件一般托管到一个静态资源服务上,然后通过 nginx 做反向代理。随着云计算的流行,也有越来越多的开发者将静态资源文件托管到对象存储服务或 Serverless 平台中。
Malagu 框架也提供了静态资源服务组件 @malagu/serve-static
。如果我们使用 Malagu 框架开发前端应用,通过该组件,我们能快速地搭建静态资源服务,并且是零配置的,开箱即用。由于 Malagu 框架是 Serverless Frist,一行代码都无需改动,就可以一键把静态资源服务部署到 Serverless 平台上运行。
前后端一体化应用
Malagu 框架可以开发任意类型的应用,我们可以将静态资源服务独立部署到云服务器、Serverless 平台上,也可以将静态资源服务与后端 API 服务一体化部署到云服务器、Serverless 平台上。Malagu 框架会处理好静态资源服务与后端 API 服务之间的融合。
以阿里云 Serverless 平台函数计算服务为例,如果我们采用 Malagu 框架的前后端一体化方式开发应用,Malagu 框架在部署到函数计算的时候,将前后端一体化应用部署为函数计算的一个函数。您可能会有疑问,如果该前后端一体化应用很大,部署为一个函数,虽然管理起来方便,但是会增加函数的运行负担。确实如此,如果我们的应用不是很大,采用一个应用对应一个函数,不会有任何负担,Malagu 会通过合理的手段优化,让函数的冷启动时间足够短,几乎察觉不到冷启动。如果我们的应用很大,我们确实不能这么做,不管我们是否采用 Serverless 这个方案,应用足够大的时候,我们都不应该开发这样一个巨石应用,我们应该将这样的巨石应用合理拆分成许多微应用,每一个微应用对应着函数计算中的一个函数是没有任何问题的。
**与微服务的最佳实践一样,合理的将自己的应用拆分成一个个微应用对应一个函数是最佳实践。**拆得过细,管理、开发成本指数上升。比如一个接口对应一个函数,这种方式接口数量很少还好,数量稍微多一点,管理、开发成本就失控了。
工作原理
静态资源服务组件基于 serve-static 实现,默认使用.malagu/frontend/dist
目录作为静态资源服务的根目录,如果我们选择部署到 Serverless 平台,框架会自动适配成合适的路径,我们也可以自定义静态资源服务的根目录:
malagu:
serve-static:
root: .malagu/frontend/dist
更多其它与 serve-static 相关的参数可以通过malagu['serve-static'].options
配置:
malagu:
serve-static:
options:
maxAge: 31536000000 # 静态文件浏览器中最大缓存时间
htmlMaxAge: 31536000000 # html 类型的静态文件最大缓存时间
immutable: true # immutable 在 Cache-Control 响应标头中启用或禁用指令
为了能与后端 API 融合到同一个前后端一体化应用中,框架对 serve-static 进行了一定程度的扩展。虽然 serve-static 把满足一定特征的请求认定为静态资源请求,从而进入静态资源处理流程。没有找到对应的静态资源,默认会继续执行后续的中间件,尝试使用后端 API 匹配该请求。
适配 Browser 风格的前端路由
当前端是一个 SPA 应用,且采用 Browser 风格的前端路由,静态资源服务组件默认开启了 SPA 来处理 Browser 风格的前端路由,处理规则是:如果找不到对应资源文件的 GET 请求,默认响应 index.html 静态文件。
malagu:
serve-static:
spa: true ## 默认为 true
指定 API 路由规则
虽然静态资源服务存在一定的规则去适配请求,在一些特殊情况下,可能与后端 API 的路由出现重叠,由于静态资源服务匹配在前,导致本应该由后端 API 匹配的请求被静态资源服务匹配。我们可以使用组件属性malagu['serve-static'].apiPath
指定 API 路由规则,当静态资源服务组件发现当前请求与 API 路由规则匹配,则跳过静态资源服务处理流程,交由后端 API 处理。
malagu:
serve-static:
apiPath: /api/*