關(guān)于拆分活動頁為獨(dú)立倉庫的一點(diǎn)思考

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

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

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

現(xiàn)有小問題

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

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

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

其中，第一點(diǎn)是由于我司運(yùn)維統(tǒng)一使用 ansible 進(jìn)行項目部署，并未將 build proj 和 upload nginx 分為兩個 task，在這里可以進(jìn)行一些優(yōu)化，解決方法就是拆分 task，分為多個 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)境測試，nginx 配置也會被同時更新的問題。

拆分獨(dú)立倉庫的思考

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

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

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

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

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

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

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

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

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

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

npm script 命令

Makefile

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

我選擇 Makefile 的原因也很簡單，就是作為唯一入口。通過構(gòu)建命令來調(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

# ...

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

部署

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