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

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