摘要：最近在写公司活动页的时候，由于历史原因，活动页跟公司的主站点放在同一个下，且活动页的访问路径也是在主站之后，并未多带带分配二级域名。
最近在写公司 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 {} 了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/108600.html
摘要：而微服务将这个理念应用在独立的服务上。微服务对比与原来的单体应用，有它的优势，如服务的自治性增强但同时也会带来一些其他问题，如性能复杂度等问题。想要使用微服务，首先是要清楚哪些业务或者功能应该成为单独的服务。其次，考虑业务极有可能的变化。 1、在学习软件构造、设计相关知识时，大家应该有学习到内聚性的概念：即把因相同原因而变化的东西聚合到一起，而把因不同原因而变化的东西分离开来。而 微服...
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
摘要：通过剖析一个跑男动画实例，来把中动画相关的知识点抽丝剥茧，一网打尽。跑男的动画其实可以拆分为两个一个是交替摆腿另一个是位置移动。在使用改变雪碧图时，得到效果这样的平滑过度显然不是我们想要的。所以，在切换雪碧图背景的方案下，就要派上用场了。 作为一名真正的前端开发者，我们不能只关注前端逻辑部分。毕竟水银泄地般的页面设计和炫酷逼真的动画效果，是我们区别于其他程序员所特有的优势之一。 尽量百...
阅读 2177·2023-04-25 19:06
阅读 1374·2021-11-17 09:33
阅读 1766·2019-08-30 15:53
阅读 2580·2019-08-30 14:20
阅读 3539·2019-08-29 12:58
阅读 3533·2019-08-26 13:27
阅读 501·2019-08-26 12:23
阅读 484·2019-08-26 12:22
