我们开发前端的时候，往往会采用前后端分离方案，前端编译构建的静态资源文件一般托管到一个静态资源服务上，然后通过 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 平台，框架会自动适配成合适的路径，我们也可以自定义静态资源服务的根目录：

  1. malagu: 
  2.   serve-static: 
  3.     root: .malagu/frontend/dist

更多其它与 serve-static 相关的参数可以通过 malagu['serve-static'].options 配置：

  1. malagu: 
  2.   serve-static: 
  3.     options:
  4.       maxAge: 31536000000        # 静态文件浏览器中最大缓存时间
  5.       htmlMaxAge: 31536000000    # html 类型的静态文件最大缓存时间
  6.       immutable: true            # immutable 在 Cache-Control 响应标头中启用或禁用指令

为了能与后端 API 融合到同一个前后端一体化应用中，框架对 serve-static 进行了一定程度的扩展。虽然 serve-static 把满足一定特征的请求认定为静态资源请求，从而进入静态资源处理流程。没有找到对应的静态资源，默认会继续执行后续的中间件，尝试使用后端 API 匹配该请求。

适配 Browser 风格的前端路由

当前端是一个 SPA 应用，且采用 Browser 风格的前端路由，静态资源服务组件默认开启了 SPA 来处理 Browser 风格的前端路由，处理规则是：如果找不到对应资源文件的 GET 请求，默认响应 index.html 静态文件。

  1. malagu: 
  2.   serve-static: 
  3.     spa: true    ## 默认为 true

指定 API 路由规则

虽然静态资源服务存在一定的规则去适配请求，在一些特殊情况下，可能与后端 API 的路由出现重叠，由于静态资源服务匹配在前，导致本应该由后端 API 匹配的请求被静态资源服务匹配。我们可以使用组件属性malagu['serve-static'].apiPath 指定 API 路由规则，当静态资源服务组件发现当前请求与 API 路由规则匹配，则跳过静态资源服务处理流程，交由后端 API 处理。

  1. malagu: 
  2.   serve-static: 
  3.     apiPath: /api/*