云平台前端重构总结

DiligentLeo
200 阅读2分钟

距离team第一阶段升级现在已经过去了2个多月，多个项目都在开展新旧技术的开发优化过程，后台开发者也有了部分时间，可以配合前端项目改造，顺利进入到第二阶段。

本文将从以下几个方面进行阐述

第一阶段

接管项目根目录，控制前端路由

改造前

.
├── pom.xml
├── src

改造后

目标：优化开发配置升级，降低配置复杂性。

剥离Nginx 剥离tomcat 启动web服务器 统一开发各个环境配置 统一接入新旧平台的网关配置 兼容新旧技术在同一项目共存，降低学习和迁移成本

方案 egg + pro + spring mvc

改造后的目录结构

.
├── CHANGELOG.md
├── README.md
├── app
├── config
├── docs
├── package.json
├── pom.xml
└── src

第二阶段

目标：优化开发配置升级，降低配置复杂性,真正的前后端分离。

剥离commonstatic 剥离java spring mvc 旧有页面开发源文件与编译后产物分离 启动web服务器 统一开发各个环境配置 统一接入新旧平台的网关配置 兼容新旧技术在同一项目共存，降低学习和迁移成本

方案： pro

改造后的目录结构

.
├── CHANGELOG.md
├── README.md
├── config
├── docs
├── functions
├── package.json
├── public
├── scripts
└── src

发布流程优化

  • 剥离tomcat
  • 编译输出静态资源
  • 静态资源版本号
  • nginx 指向静态目录

开发配置优化

  • 第一阶段：egg server + webpack DevServer
  • 第二阶段：采用的web服务器为webpack DevServer
  • 环境与网关配置 统一配置config的httpProxy中。
  • 开发和测试同环境 gulp + webpack

本地开发

依赖node环境 Node.js (>= v10.0) .

本地开发,以alpha4为例

npm run dev:alpha4

访问http://localhost:8380/

项目架构优化

旧版页面现实的局限性：

  • 技术陈旧
  • js、css 引用位置散乱
  • 改动后需要更新文件缓存
  • 源代码与编译代码共存在仓库中

针对以上问题，新版中我们将打包方式升级，对源代码与编译产物进行隔离，上线时，只需进行静态资源的发布即可。

  • gulp 与 webpack 共建

完善监控体系

前端监控体系覆盖了

  • 浏览器信息
  • 访问页面性能
  • AJAX性能
  • 脚本错误
  • 慢页面追踪
  • 慢资源追踪
  • 用户轨迹
  • 流量热力图
  • 应用告警

运维部署

jenkins 配置 测试环境

npm install
npm run build:alpha

预生产 和 生产环境

npm install
npm run build:prod

Nginx

server {
    listen       80;
    server_name  yun.f.me;
    
    location / {
        root   /Users/fugang/workspace/platform-newdesk/deploy;
        try_files $uri /index.html;
        autoindex on;
    }
    
}

部署后访问

访问：

以alpha4为例 http://***.alpha4/

avatar
文章
阅读
粉丝