提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

企业级SAAS服务通过CDN方式实现前后端分离

Nodejs 服务 前端 后端 企业级 开发
2023-03-20 14:59:37 时间

作为Web开发主要会分为Web前端和Web后台，Web前端主要是直接和用户进行交互含有布局、视觉、动画、行为、数据呈现等操作，对于Web后台主要进行数据业务处理，服务，数据库开发，作为2B的SAAS服务的开发，开发效率和架构稳定性是非常重要的，可以有效达到短平快的市场的验证和占领。

传统Web技术开发方式

传统的Web技术开发方式都是在后台项目中写入前端代码逻辑，当时还没有严格的前后端开发，比如08年的时候我采用ASP技术开发网页会在ASP代码中去写入前端逻辑，当时开发的大多为单体应用，路由完全由后端进行控制，总体架构也比较简单。

传统前后端开发

再比如在java项目中我们需要在jsp中开发前端逻辑同时文件中会引入很多java代码的逻辑，然而随着交互需求的增多和复杂，促使服务端这块采用模版引擎技术将前端代码和后台代码逻辑相分离但是路由仍然由后端控制，如这个时候的FreeMarker模版引擎，最初的设计，是被用来在MVC模式的Web开发框架中生成HTML页面，如下的FreeMaker例子，虽然这进行一部分的前后端分离但FreeMake模版文件与java但对象文件是强对应的关系。总体是后端直接吐出最终的页面DOM结构，然后浏览器端进行渲染呈现给用户，下面是一个使用FreeMarker模版引擎的示例。

<html><br>  
<head><br>  
<title>Welcome!</title><br>  
</head><br>  
<body><br>  
<#-- 注释部分 --><br>  
<#-- 下面使用插值 -->  
<h1>Welcome ${user} !</h1><br>  
<p>We have these animals:<br>  
<u1><br>  
<#-- 使用FTL指令 -->  
<#list animals as being><br>  
   <li>${being.name} for ${being.price} Euros<br>  
<#list><br>  
<u1><br>  
</body><br>  
</html>

当然还有基于hash的SPA方式前后端分离，当时网络情况尤其是移动的下所以很多项目并不普及和url在pc下的不美观性所以这种方式并不普及。

什么驱使我们要进行前后端分离

从业务上说我们需要更稳定的服务，需要更快的开发效率，技术上在我们企业级项目中之前一直采用的是基于Node服务的渲染引擎进行前后端分离，这种方式很好的解决了在代码开发上的前后端分离，但在整个流程上前端会穿插到后台服务的前后，导致流程前后端依赖很大，但相比传统的web开发方式进步了不少。实际过程中，首先浏览器请求到PHP服务，由PHP进行页面路由，同时去验证请求、拉去菜单数据，获取一些登录等其他的一些业务数据，准备好页面需要的数据以后，post请求到Nodejs服务，post的通知需要知道对应Nodejs的路由地址和环境地址及正确的数据格式才能正确的路由到对应的服务和目录，这里之前经常加一个业务到时候会要node服务和PHP修改一些约束内容，容易导致一些问题，这些问题对于新人排查起来是比较慢的，之后Nodejs拿到正确的数据后读取模版通过渲染引擎渲染出直出的html，返回到php然后php再返回到浏览器端，同时浏览器端再请求CDN的js，css，img资源将前端页面渲染在浏览器端，同时一些业务异步请求业务数据呈现给浏览器端，作为2B的业务来说业务往往比较复杂从体验来说这个过程其实是比较长，白屏等待时间较为比较长，服务器负载高的情况下白屏时间会更长,客户就提出有时候页面需要等好久才能加载出来，客户体验不佳。

基于Nodejs服务的前后端分离

当然以上上将Nodejs服务至于后台PHP服务之后，当然也可以将Nodejs服务至于前面如下，至于前部要求Nodejs复杂性更高些，对于2B的saas服务一般来说都是要求进行登录才可进行访问，所以Nodejs服务中需要集成登录鉴权的能力。

基于Nodejs服务的前后端架构

作为企业级项目我们并不用考虑SEO问题，从开发者角度来说，前端开发人员有必要了解下框架机，php开发人员也要了解下框架机，但为什么还存在此架构呢？只要从前端发展角度来说，最出的web开发，都是前端语言和后端语言在一个页面中混搭的开发方式如jsp开发，php web开发。

近6年来Nodejs模式的帮助我们解决了前后端开发代码混搭的模式，对于页面来说前端只用js css html来开发业务，后端php只需要准备对应数据，从而提升开发效率，时至今日现代前端框架都有与之对应的路由实现，例如 vue-router、react-router 等，这让页面路由不用再依靠后台服务路由，让前端完全依靠前端成为了最大的可能。

基于CDN的方式进行前后端分离

我们项目是企业级SAAS服务，全国各地用户分布，我们选择采用CDN这样可以提升全国各地用户的页面访问速度，最终效果从点击看到页面的时间由3S稳定到1S的呈现给用户

采用CDN方式架构如下：

基于CDN方式前后端分离

在这种方式下我们会遇到跨域的挑战性问题，如何解决跨域问题呢？

  • 方案一：服务允许跨域
  • 方案二：让跨域不会产生

其他前后端分离方式

除了CDN方式能完成完全的前后端分离，当然也有其他方案

在域名的nginx路由层进行转发

前端多环境

我们希望不同用户有千面的玩法实践，对于业务来说我们是多环境的运营，当时我们当然接了CDN，我们的业务是通过我们登录的账号来判断所属于哪个环境，然后再路由请求不同的页面资源渲染到页面来实现不同环境的区分。那么我们CDN方式如何来做呢？方案总是比较问题多，当时想了两套方案，一个是通过不同页面地址来区分不同的环境，对应号码环境的号自动跳转到相应的环境，这种可以实现环境区分，但是觉得不太雅，同样的页面会出现不同url地址，所以我们还是继续思考能不能地址不变就可以进行环境区分，最后我们研究下来是有办法，我们可以借助CDN的cookie来帮我们实现不同环境请求不同环境的资源，路径保持一致。当用户登录完成以后，将号码的环境以标识种到浏览器的cookie中，然后当跳转到页面的时候CDN拿到cookie标识请求到对应的模版资源和静态资源，用户不会从浏览器请求地址上感受到环境区分。

相关文章