目前的后台系统都是前后端分离的项目,前端开发者关注页面的编排、后端开发者专注于API逻辑开发。
开发流程为:各自开发后好,后端服务先部署到云端,前端在本地进行接口调试,调试好后发布到服务器。
两者都部署后,在前端获取到的数据包括两部分,其一是开发的静态文件、其二是后端服务数据。
那前端在调用的时候是如何去区分是拿静态文件还是接口数据呢?
2.1 前端项目部署
对于前端的源码需要进行打包和构建,形成dist文件,然后推送到存储平台,比如阿里云的OSS。
阿里云对象存储 OSS(Object Storage Service)是一款海量、安全、低成本、高可靠的云存储服务
运行如下命令进行node.js源码打包
npm install && npm build
流程图:
2.2 后端项目部署
如下图所述,在之前的文章进行了介绍,后端项目部署到了k8s服务集群中,需要经历打包和运行部署。
2.3 路由配置
为了区分静态文件和后端服务,在访问的路径进行了区分,前端的静态页面可以根据业务名+ui,后端服务就叫业务名,比如前端ST-ui,后端ST。
解下来介绍一下前端访问的链路:
如图所示,当前端使用域名访问路径时(该域名可在阿里云上申请),阿里云进行域名解析,接着转发到具体的服务器。在具体服务器再次做了转发,经过端口80监听找到nginx配置,最后针对具体路径进行了配置:/ST-ui转发到OSS获取静态文件、/ST转发到k8s集群的ingress。
# 查找80端口被那些服务监听
netstat -lnpt |grep 80
如上介绍了前后端部署的方式,并且也介绍了转发配置,实现路径匹配获取不同的资源。