關於拆分活動頁爲獨立倉庫的一點思考

最近在寫公司 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 {} 了。