關(guān)于拆分活動(dòng)頁(yè)為獨(dú)立倉(cāng)庫(kù)的一點(diǎn)思考

mengera88 發(fā)布于2019-08-26 12:23 / 517人閱讀

摘要：最近在寫公司活動(dòng)頁(yè)的時(shí)候，由于歷史原因，活動(dòng)頁(yè)跟公司的主站點(diǎn)放在同一個(gè)下，且活動(dòng)頁(yè)的訪問路徑也是在主站之后，并未多帶帶分配二級(jí)域名。

最近在寫公司 h5 活動(dòng)頁(yè)的時(shí)候，由于歷史原因，活動(dòng)頁(yè)跟公司的主站點(diǎn)放在同一個(gè) repo 下，且活動(dòng)頁(yè)的 url 訪問路徑也是在主站之后，并未多帶帶分配二級(jí)域名?，F(xiàn)在想著將活動(dòng)頁(yè)面項(xiàng)目多帶帶拆分出來(lái)。

現(xiàn)有小問題

現(xiàn)有項(xiàng)目中也有幾點(diǎn)不好在這也說(shuō)一下:

nginx 配置文件修改的頻率并不高，但是每次部署均需要覆蓋且重啟 nginx

配置均寫在同一份 nginx conf 中并不易于維護(hù)

其中，第一點(diǎn)是由于我司運(yùn)維統(tǒng)一使用 ansible 進(jìn)行項(xiàng)目部署，并未將 build proj 和 upload nginx 分為兩個(gè) task，在這里可以進(jìn)行一些優(yōu)化，解決方法就是拆分 task，分為多個(gè) npm script 執(zhí)行，例如：

{
  "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 環(huán)境測(cè)試，nginx 配置也會(huì)被同時(shí)更新的問題。

拆分獨(dú)立倉(cāng)庫(kù)的思考

對(duì)于 h5 和主站點(diǎn)的雜糅問題，目前我在做的是將 h5 拆分出來(lái)，多帶帶維護(hù)主站點(diǎn)和 h5 站點(diǎn)，給 h5 站點(diǎn)多帶帶配置二級(jí)域名且多帶帶寫一套生成發(fā)布系統(tǒng)，類似腳手架卻不是腳手架，項(xiàng)目結(jié)構(gòu)如下：

.
├── Makefile       # 工程編譯規(guī)則
├── README.md      # 說(shuō)明文檔
├── bin            # 腳本命令
├── deploy         # 發(fā)布腳本
├── doc            # 說(shuō)明文檔
├── events         # h5 站點(diǎn)
│?? ├── active     # 正在運(yùn)行
│?? ├── archive    # 歸檔下線
│?? └── workspace  # 開發(fā)中
├── lib            # 腳本函數(shù)
├── package.json
├── template       # h5 項(xiàng)目模板
└── utils          # 通用函數(shù)

在最初我的設(shè)想其實(shí)并不是這樣，而是考慮到 h5 的時(shí)效性，想做完用完即扔（果然太年輕）。這樣的做法最大的弊端就是無(wú)法多人合作和進(jìn)行 code review。對(duì)于特別簡(jiǎn)單的頁(yè)面可以勉強(qiáng)完成，但是稍微復(fù)雜的需要質(zhì)量的 h5 頁(yè)面，就需要我們?nèi)ミM(jìn)行嚴(yán)格的 code review 了。

將之前的想法放棄之后，想到將每個(gè)活動(dòng)頁(yè)都作為一個(gè)倉(cāng)庫(kù)提交 github 并不現(xiàn)實(shí)，所以就想到了這個(gè)文件夾即狀態(tài)的方法，將活動(dòng)頁(yè)面分為三類：開發(fā)中、歸檔（已下線）、活躍（線上）。如此一來(lái)，我們可以用腳本來(lái)統(tǒng)一管理，讓我們來(lái)走一遍流程：

# 創(chuàng)建一個(gè)新的 event（也就是活動(dòng)頁(yè)）
make create

# 歸檔 event
make archive # from active/ -> archive/

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

當(dāng)然這只是最基本的邏輯，對(duì)于已經(jīng)歸檔的活動(dòng)重新上線，另說(shuō)。

目前，網(wǎng)站項(xiàng)目有三種構(gòu)建方案：

Node.js 專用構(gòu)建工具（Grunt、Gulp、Brunch、Broccoli、Mimosa）

npm script 命令

Makefile

第一種方案插件語(yǔ)法太過(guò)繁雜，不如方案二和三簡(jiǎn)便，且存在版本問題。方案二則可以看作方案三的變種，根據(jù)喜好選擇即可。

我選擇 Makefile 的原因也很簡(jiǎn)單，就是作為唯一入口。通過(guò)構(gòu)建命令來(lái)調(diào)用我寫好的腳本命令：

.PHONY: help
help:
    @echo "Usage: make "
    @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

# ...

可以說(shuō)很是直觀，也并不會(huì)存在忘掉 npm i 等令人窒息的操作了。

部署

可以使用 nginx 通配符來(lái)匹配目標(biāo)活動(dòng)頁(yè)路徑，再也不用手動(dòng)多次添加 location xxx {} 了。