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

mengera88 发布于2019-08-26 12:23 / 366人阅读

摘要：最近在写公司活动页的时候，由于历史原因，活动页跟公司的主站点放在同一个下，且活动页的访问路径也是在主站之后，并未多带带分配二级域名。

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

现有小问题

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

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

配置均写在同一份 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/

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

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

Node.js 专用构建工具（Grunt、Gulp、Brunch、Broccoli、Mimosa）

npm script 命令

Makefile

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

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

.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 通配符来匹配目标活动页路径，再也不用手动多次添加 location xxx {} 了。

超融合服务器专线服务关于数据仓库人工智能的一天 js求和表的一列数据换位思考

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108600.html

《微服务设计》读书笔记（关于微服务的一点想法）

摘要：而微服务将这个理念应用在独立的服务上。微服务对比与原来的单体应用，有它的优势，如服务的自治性增强但同时也会带来一些其他问题，如性能复杂度等问题。想要使用微服务，首先是要清楚哪些业务或者功能应该成为单独的服务。其次，考虑业务极有可能的变化。 1、在学习软件构造、设计相关知识时，大家应该有学习到内聚性的概念：即把因相同原因而变化的东西聚合到一起，而把因不同原因而变化的东西分离开来。而微服...

lpjustdoit 2019-08-19 11:32 评论0 收藏0
CSS3-Animotion抽丝剥茧一步步撸出跑男动画

摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。尽量百...

OBKoro1 2019-08-29 12:13 评论0 收藏0
CSS3-Animotion抽丝剥茧一步步撸出跑男动画

摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。尽量百...

bingo 2019-08-01 16:30 评论0 收藏0
CSS3-Animotion抽丝剥茧一步步撸出跑男动画

摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。尽量百...

caoym 2019-08-21 11:39 评论0 收藏0
DataPipeline | 享物说产品负责人夏凯：数据驱动的用户增长实战

摘要：回国后作为早期成员加入小红书，先后从事大数据，用户增长，项目和团队管理等工作。数据的需求第一点提高产品和改善用户体验。另外一个因素就是信息透明，每个做决策参与决策的人，基于足够多的数据信息，进行有效的判断。 showImg(https://segmentfault.com/img/bVbgaWM?w=1280&h=720); 夏凯，卡内基梅隆大学计算机系毕业，曾供职于Evernote数...

golden_hamster 2019-05-28 18:51 评论0 收藏0