通用服务设计

发表于   |   分类于

设计背景

源于当时负责的一个官网主页的全新项目，由于官网类型的项目业务逻辑简单，主要是静态内容的展示，同时需要考虑到 SEO，所以很适合将这类应用的服务端设计成一套通用的解决方案，加快同类型应用开发的效率。

设计原则

  • 简单：在满足业务需求的前提下尽量简单，不引入功能重复的模块
  • 通用：与业务解耦，使得同类型的项目能够通用。

技术选型

  • 服务层：NodeJS（基于koa），轻量的前端服务，实用，够用。主要用于处理网络请求，管理路由。

  • 静态文件管理：使用 koa-static，简单易用，不需要自己去处理不同类型的静态文件，提高前端生产力。

  • 服务端渲染：使用 ejs 模板引擎，实现多页面相同组件的复用，同时满足 SEO 需求。

  • 环境区分：根据 NODE_ENV 环境变量动态更改资源路径，区分开发、测试和线上环境，方便开发。

  • 进程管理：使用 PM2 管理 Node 项目，便于线上发布，以及应对故障自动重启。

  • 相关优化：图片使用 TinyPNG 进行压缩（gulp 插件：gulp-tinypng）、静态文件存放 CDN 加速、使用 Webpack 打包压缩代码。

  • 进阶：使用 docker 容器服务，简化配置，高效部署。

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.
├── bin // 发布脚本
│   ├── build.sh
│   └── deploy.sh
├── manifest.yaml // 发布配置文件
├── build // Webpack 打包后生成文件
│   ├── app.css
│   ├── app.js
│   ├── mobile.css
│   └── mobile.js
├── components // 不同页面共用的组件存放
│   ├── footer.html
│   ├── header.html
│   ├── mobileSection.html
│   ├── template.html
│   └── trialSection.html
├── index.js // 项目入口
├── package.json
├── pm2.json // PM2 配置文件
├── script // js 文件存放
├── source // 图片等资源文件
├── style // 样式文件
├── view // 项目页面
│   ├── downloadPage.html
│   ├── homePage.html
│   ├── mobilePage.html
│   └── trialPage.html
└── webpack.config.js // Webpack 配置文件

技术架构图

techImage

相关

美团视讯官网主页

The Benefits of Server Side Rendering Over Client Side Rendering

Dockerizing a Node.js web app