最近部门准备做前后端完全分离,项目代码不再放在一个目录下,故整理了一下方案,目前该方案已经跑通demo

一、前后端分离整体结构图


说明:

  1. 访问a.com/api/*时,Nginx会将请求反向代理到PHP-FPM集群
  2. 访问其它路径时(非/api/),Nginx将会返回一个WebPack打包好的单页面入口文件,例如index.html,前端会根据URL的PATH去CDN请求相关静态资源,而且,此后所有路由由前端控制。

二、不同环境的构建

注:master分支用于构建测试环境,production分支用于构建预发布和线上

  1. 测试环境&预发布环境构建流程图

    因为测试环境和预发布不需要回滚功能,故选择master分支则构建到测试环境,选择production分支则构建到预发布,jenkins如下图:

    测试环境整个流程图如下:


  1. 线上环境构建流程图

    上线是一件很慎重的事,如果上线发生错误(比如坏境有问题),则需要回滚,故线上构建主要使用git的Tag机制,每次构建成功后都会打一个tag,普通上线选择production分支,需要回滚则选择最近的稳定的Tag,jenkins如下图:

    线上环境整个构建流程图如下:


二、前后端分构建命令

前端:

  1. 执行npm install安装依赖;安装的时候检查相关包的版本号是否有更改,没更改直接从缓存里取,有更改就拉取新包并缓存。
  2. 执行webpack打包脚本 npm run build;打包后,会在项目根目录下生成一个静态资源dist目录。
  3. 将dist目录下除入口文件index.html外的所有资源发布到CDN上。
  4. 将dist目录下的index.html入口文件发布到Nginx前端机。
  5. 完成构建。

后端:

  1. 执行composer install安装依赖;安装的时候检查相关包的版本号是否有更改,没更改直接从缓存里取,有更改就拉取新包并缓存(也可以将代码先发布到php机器上后再执行composer install)。
  2. 依赖安装完后,将整个项目打包发布到PHP-FPM集群。
  3. 完成构建。