前端微服务实践-以木犀通行证为例
在前端，长期以来困扰我们的一个问题就是，如何分发部署我们的前端代码？之前我们的前端代码是放在后端容器中部署的，因此如果需要更新就需要后端工程师去重启容器，更新代码。现在我们采取的方法是，将前端作为一个单独的服务，使用容器来部署。这样前端代码的部署和其他的代码就没有区别了。前端工程师可以自由的控制前端代码的部署，整个部署流程也变的非常标准化。前端微服务让前端部署变成了一件让人享受的事情。下面就以木犀通行证为例来讲讲具体的实现。 Nodejs服务 如果只是在容器中放一些前端的静态文件，那不能叫前端微服务。前端微服务是指用Nodejs实现的View层。包括了同步路由以及前端模板。静态文件可以放在前端容器中分发，也可以上传到CDN分发。 Nodejs实现的这个View层（传统后端MVC中的View），主要负责渲染同步路由的模板。API服务则是由其他的服务提供，大家各司其职。前端接管View层有很多好处，前端渲染以及各种网络应用层的优化，都可以由前端自己来控制。目前Nodejs在大公司中早已频繁被用在服务最前端的那一层中了（后端一般是Java）。 具体实现来说，我们选用koa2作为Web框架，大致实现是这样的： const send = require('koa-send'); const Koa = require('koa'); const Router = require('koa-router'); const userAgent = require('koa-useragent'); const path = require('path') const swig = require('swig'); const router = new Router(); const app = new Koa(); const templateRoot = path.join(__dirname, "../dist/template/main") app.use(userAgent); router.get('/', function(ctx, next){ if (!ctx.userAgent.isMobile) { let template = swig.compileFile(path.resolve(templateRoot, "auth.html")); ctx.body = template({}) } else { let template = swig.compileFile(path.resolve(templateRoot, "auth_phone.html")); ctx.body = template({}) } }); router....