关于拆分活动页为独立仓库的一点思考

最近在写公司 h5 活动页的时候，由于历史原因，活动页跟公司的主站点放在同一个 repo 下，且活动页的 url 访问路径也是在主站之后，并未单独分配二级域名。现在想着将活动页面项目单独拆分出来。

现有小问题

现有项目中也有几点不好在这也说一下:

1. nginx 配置文件修改的频率并不高，但是每次部署均需要覆盖且重启 nginx
2. 配置均写在同一份 nginx conf 中并不易于维护

其中，第一点是由于我司运维统一使用 ansible 进行项目部署，并未将 build proj 和 upload nginx 分为两个 task，在这里可以进行一些优化，解决方法就是拆分 task，分为多个 npm script 执行，例如：

{
  "deploy": "yarn run build:production && cd deploy && ansible-playbook -i inventory/xxx.com/ web.yml -t'run:web'",
  "deploy:nginx": "cd deploy && ansible-playbook -i inventory/xxx.com/ web.yml -t'run:nginx'",
}

这样就可以解决多人合作中，如果有人提交 staging 环境测试，nginx 配置也会被同时更新的问题。

拆分独立仓库的思考

对于 h5 和主站点的杂糅问题，目前我在做的是将 h5 拆分出来，单独维护主站点和 h5 站点，给 h5 站点单独配置二级域名且单独写一套生成发布系统，类似脚手架却不是脚手架，项目结构如下：

.
├── Makefile       # 工程编译规则
├── README.md      # 说明文档
├── bin            # 脚本命令
├── deploy         # 发布脚本
├── doc            # 说明文档
├── events         # h5 站点
│   ├── active     # 正在运行
│   ├── archive    # 归档下线
│   └── workspace  # 开发中
├── lib            # 脚本函数
├── package.json
├── template       # h5 项目模板
└── utils          # 通用函数

在最初我的设想其实并不是这样，而是考虑到 h5 的时效性，想做完用完即扔（果然太年轻）。这样的做法最大的弊端就是无法多人合作和进行 code review。对于特别简单的页面可以勉强完成，但是稍微复杂的需要质量的 h5 页面，就需要我们去进行严格的 code review 了。

将之前的想法放弃之后，想到将每个活动页都作为一个仓库提交 github 并不现实，所以就想到了这个文件夹即状态的方法，将活动页面分为三类：开发中、归档（已下线）、活跃（线上）。如此一来，我们可以用脚本来统一管理，让我们来走一遍流程：

# 创建一个新的 event（也就是活动页）
make create

# 归档 event
make archive # from active/ -> archive/

# 部署上线 event
make active # from workspace/ -> active/

当然这只是最基本的逻辑，对于已经归档的活动重新上线，另说。

目前，网站项目有三种构建方案：

1. Node.js 专用构建工具（Grunt、Gulp、Brunch、Broccoli、Mimosa）
2. npm script 命令
3. Makefile

第一种方案插件语法太过繁杂，不如方案二和三简便，且存在版本问题。方案二则可以看作方案三的变种，根据喜好选择即可。

我选择 Makefile 的原因也很简单，就是作为唯一入口。通过构建命令来调用我写好的脚本命令：

.PHONY: help
help:
    @echo "Usage: make <command>"
    @echo "The commands are:"
    @echo "    install            Install npm dependences"
    @echo "    create            Create an event"
    @echo "    archive            Archive events"
    @echo "    lint-dev            Lint zeus source code"
  # ...

.PHONY: all
all: help

.PHONY: install
install:
    @npm install &>/dev/null

.PHONY: create
create: install
    @node ./bin/create.js

.PHONY: create
archive: install
    @node ./bin/archive.js

.PHONY: lint
lint-dev: install
    @./node_modules/.bin/eslint . --fix

# ...

可以说很是直观，也并不会存在忘掉 npm i 等令人窒息的操作了。

部署

可以使用 nginx 通配符来匹配目标活动页路径，再也不用手动多次添加 location xxx {} 了。