你不再需要动态网页——编辑-发布-开发分离

​尽管没有特别的动力去构建一个全新的CMS,但是我还是愿意去撰文一篇来书写如何去做这样的事——编辑-发布-开发分离模式是如何工作的。微服务是我们对于复杂应用的一种趋势,编辑-发布-开发分离模式则是另外一种趋势。在上篇文章《Repractise架构篇一: CMS的重构与演进》中,我们说到编辑-发布-开发分离模式。

系统架构

如先前提到的,Carrot使用了下面的方案来搭建他们的静态内容的CMS。

Carrot

在这个方案里内容是用Contentful来发布他们的内容。而在我司ThoughtWorks的官网里则采用了Github来管理这些内容。于是如果让我们写一个基于Github的CMS,那么架构变成了这样:

Github 编辑-发布-开发

或许你也用过Hexo / Jekyll / Octopress这样的静态博客,他们的原理都是类似的。我们有一个代码库用于生成静态页面,然后这些静态页面会被PUSH到Github Pages上。

从我们设计系统的角度来说,我们会在Github上有三个代码库:

  1. Content。用于存放编辑器生成的JSON文件,这样我们就可以GET这些资源,并用Backbone / Angular / React 这些前端框架来搭建SPA。
  2. Code。开发者在这里存放他们的代码,如主题、静态文件生成器、资源文件等等。
  3. Builder。在这里它是运行于Travis CI上的一些脚本文件,用于Clone代码,并执行Code中的脚本。

以及一些额外的服务,当且仅当你有一些额外的功能需求的时候。

  1. Extend Service。当我们需要搜索服务时,我们就需要这样的一些服务。如我正考虑使用Python的whoosh来完成这个功能,这时候我计划用Flask框架,但是只是计划中——因为没有合适的中间件。
  2. Editor。相比于前面的那些知识这一步适合更重要,也就是为什么生成的格式是JSON而不是Markdown的原理。对于非程序员来说,要熟练掌握Markdown不是一件容易的事。于是,一个考虑中的方案就是使用 Electron + Node.js来生成API,最后通过GitHub API V3来实现上传。

So,这一个过程是如何进行的。

用户场景

整个过程的Pipeline如下所示:

  1. 编辑使用他们的编辑器来编辑的内容并点击发布,然后这个内容就可以通过GitHub API上传到Content这个Repo里。
  2. 这时候需要有一个WebHooks监测到了Content代码库的变化,便运行Builder这个代码库的Travis CI。
  3. 这个Builder脚本首先,会设置一些基本的git配置。然后clone Content和Code的代码,接着运行构建命令,生成新的内容。
  4. 然后Builder Commit内容,并PUSH内容。

这里还依赖于WebHook这个东西——还没想到一个合适的解决方案。下面,我们对里面的内容进行一些拆解,Content里面由于是JSON就不多解释了。

Builder: 构建工具

Github与Travis之间,可以做一个自动部署的工具。相信已经有很多人在Github上玩过这样的东西——先在Github上生成Token,然后用travis加密:

travis encrypt-file ssh_key --add

加密后的Key就会保存到.travis.yml文件里,然后就可以在Travis CI上push你的代码到Github上了。

接着,你需要创建个deploy脚本,并且在after_success执行它:

after_success:
  - test $TRAVIS_PULL_REQUEST == "false" && test $TRAVIS_BRANCH == "master" && bash deploy.sh

在这个脚本里,你所需要做的就是clone content和code中的代码,并执行code中的生成脚本,生成新的内容后,提交代码。

#!/bin/bash

set -o errexit -o nounset

rev=$(git rev-parse --short HEAD)

cd stage/

git init
git config user.name "Robot"
git config user.email "robot@phodal.com"

git remote add upstream "https://$GH_TOKEN@github.com/phodal-archive/echeveria-deploy.git"
git fetch upstream
git reset upstream/gh-pages

git clone https://github.com/phodal-archive/echeveria-deploy code
git clone https://github.com/phodal-archive/echeveria-content content
pwd
cp -a content/contents code/content

cd code

npm install
npm install grunt-cli -g
grunt 
mv dest/* ../
cd ../
rm -rf code
rm -rf content

touch .

if [ ! -f CNAME ]; then
    echo "deploy.baimizhou.net" > CNAME
fi

git add -A .
git commit -m "rebuild pages at ${rev}"
git push -q upstream HEAD:gh-pages

这就是这个builder做的事情——其中最主要的一个任务是grunt,它所做的就是:

grunt.registerTask('default', ['clean', 'assemble', 'copy']);

Code: 静态页面生成

Assemble是一个使用Node.js,Grunt.js,Gulp,Yeoman 等来实现的静态网页生成系统。这样的生成器有很多,Zurb Foundation, Zurb Ink, Less.js / lesscss.org, Topcoat, Web Experience Toolkit等组织都使用这个工具来生成。这个工具似乎上个Release在一年多以前,现在正在开始0.6。虽然,这并不重要,但是还是顺便一说。

我们所要做的就是在我们的Gruntfile.js中写相应的生成代码。

    assemble: {
      options: {
        flatten: true,
        partials: ['templates/includes/*.hbs'],
        layoutdir: 'templates/layouts',
        data: 'content/blogs.json',
        layout: 'default.hbs'
      },
      site: {
        files: {'dest/': ['templates/*.hbs']}
      },
      blogs: {
        options: {
          flatten: true,
          layoutdir: 'templates/layouts',
          data: 'content/*.json',
          partials: ['templates/includes/*.hbs'],
          pages: pages
        },
        files: [
          { dest: './dest/blog/', src: '!*' }
        ]
      }
    }

配置中的site用于生成页面相关的内容,blogs则可以根据json文件的文件名生成对就的html文件存储到blog目录中。

生成后的目录结果如下图所示:

 .
├── about.html
├── blog
│   ├── blog-posts.html
│   └── blogs.html
├── blog.html
├── css
│   ├── images
│   │   └── banner.jpg
│   └── style.css
├── index.html
└── js
    ├── jquery.min.js
    └── script.js

7 directories, 30 files

这里的静态文件内容就是最后我们要发布的内容。

还需要做的一件事情就是:

grunt.registerTask('dev', ['default', 'connect:server', 'watch:site']);

用于开发阶段这样的代码就够了,这个和你使用WebPack + React 似乎相差不了多少。

编辑-发布-开发分离

在这种情形中,编辑能否完成工作就不依赖于网站——脱稿又少了 个借口。这时候网站出错的概率太小了——你不需要一个缓存服务器、HTTP服务器,由于没有动态生成的内容,你也不需要守护进程。这些内容都是静态文件,你可以将他们放在任何可以提供静态文件托管的地方——CloudFront、S3等等。或者你再相信自己的服务器,Nginx可是全球第二好(第一还没出现)的静态文件服务器。

开发人员只在需要的时候去修改网站的一些内容。

So,你可能会担心如果这时候修改的东西有问题了怎么办。

  1. 使用这种模式就意味着你需要有测试来覆盖这些构建工具、生成工具。
  2. 相比于自己的代码,别人的CMS更可靠?

需要注意的是如果你上一次构建成功,你生成的文件都是正常的,那么你只需要回滚开发相关的代码即可。旧的代码仍然可以工作得很好。

其次,由于生成的是静态文件,查错的成本就比较低。

最后,重新放上之前的静态文件。

版权声明:本文为博主原创文章,未经博主允许不得转载。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。

交换、路由与防火墙手记(7) - 2015-11-20 04:11:28

1、 2台交换机使用access端口连接,在access端口上配置vlan。       S1   Huaweisy Entersystem view, return user view with Ctrl+Z. [Huawei]sysnames1 [s1]vlan20 [s1-vlan20]interfacegig 0/0/1 [s1-GigabitEthernet0/0/1]portlink-type access [s1-GigabitEthernet0/0/1]portdefault vlan 2

Tigase负载均衡策略 - 2015-11-20 04:11:25

Tigase负载均衡策略 作者:chszs,未经博主允许不得转载。经许可的转载需注明作者和博客主页: http://blog.csdn.net/chszs Tigase从5.2.0版开始,引入了负载均衡功能,可以把终端访问用户重定向到最适合的集群节点上。此负载均衡功能依赖于see-other-host的XMPP流错误消息(stream error message)。此机制背后的基本原则是如果用户当前正尝试连接的节点与返回消息的节点不是集群中 的同一个节点,那么用户将被重定向。此原则需要获得用户的JID实现

【uml】-总结 - 2015-11-20 04:11:25

【概述】     UML是统一建模语言,是一种面向对象的可视化建模语言,它能够让系统构造者用标准的、易于理解的方式建立起能够表达他们设计思想的系统蓝图,并提供一种机制,便于不同人之间有效地共享和交流设计成果。在系统实施之前还应包括系统分析和设计阶段,在系统分析和设计阶段可以通过建立软件模块来确定用户需求和系统功能。其中uml九种图图之用例图主要是确定用户的需求,其它几种就是根据需求逐步实现系统功能的。    关于他们各类图之间的关系,我总结了一个关于uml关系思维图以及对于uml中所用的关系进行了总结:
常规功能和模块自定义系统 (cfcmms)—016模块字段的定义 这一节开始模块字段的自定义设计。模块字段作为模块的属性也是这个系统中自定义的核心内容。它不仅定义了字段的一些基本属性,还可描述模块之间的从属关系,以及相关的一些权限和行为属性。 从和数据库对应的角度来看,模块字段对应于表中的字段。但是也不是完全一一对应,可以创建一些自定义的字段(计算字段)而不必在表中有相应的字段。自定义的字段可以使用数据库中的系统函数或者用户自定义函数来创建表达式,这对于扩充模块的功能有很大的用处。 模块字段的大概属性如下
Introduction 一般我会在计算机上装两个或者多个系统,例如,我在计算机上安装了Ubuntu、Windows 7、Windows 8.1。有一天我的Win8.1不能正常使用了,我想重新安装Win8.1,但是安装之后Linux就不能被引导进入了!大家知道Linux是使用Grub来引导的,那我们完全可以重新安装Grub! 因为原先的Linux不能进入了,所以我们制作一个Linux系统安装盘,然后利用“试用Ubuntu“来完成这个任务。 制作Linux安装盘 暂时不说这个了。 开始恢复 列出磁盘分区 u

[置顶] Docker镜像与容器命令 - 2015-11-19 19:11:59

         Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的、可移植的、自给自足的容器。开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机)、bare metal、OpenStack 集群和其他的基础应用平台。 Docker通常用于如下场景: web应用的自动化打包和发布; 自动化测试和持续集成、发布; 在服务型环境中部署和调整数据库或其他的后台应用; 从头编译或者扩展现有的OpenShift或Cloud Foundry平台来搭建自己的PaaS环境。 一
我们上次完成了信息发布管理模块的条件查询功能,但是我们有一些问题没有解决,比如信息的"回显"功能。 解释一下回显,例如你翻到100页,这一页有一个信息需要修改,当你点击修改并修改完毕的时候,发现并没有回到之前的第100页,而是回到了第1页!!你是不是就抓狂了?而且你在输入框中的的查询条件也可能改变或消失,这就是没有做数据回显的后果。所以,我们要为我们的这个模块做数据回显功能。 我们去分类查询的依据就是info.title值,如果有,我们就按照那个排序并列出结果,如果没有我们就去取所有的,当我们点击“编辑”“
原创作品,出自 “深蓝的blog” 博客,欢迎转载,转载时请务必注明出处,否则追究版权法律责任。 深蓝的blog: http://blog.csdn.net/huangyanlong/article/details/49897615 下面对was集群环境下的分布式会话设置做一个简单的操作举例。 找到应用服务器,如下: 先点击进入其中一个节点,如下: 选择“分布式环境设置”,如下: 初次设置时,需要进行新建后,选择“内存到内存复制”,如下: 然后完成常规属性配置,可参考如下: 点击确定后,完成节点间配置同步

Linux下安装Apache httpd - 2015-11-19 17:11:08

httpd是Apache超文本传输协议(HTTP)服务器的主程序。它被设计为一个独立运行的后台进程,它会建立一个处理请求的子进程或线程的池对外提供服务。httpd支持基于 虚拟主机,以及基于HOST、IP、PORT实现虚拟主机,反向代理,负载均衡,路径别名,用户认证,basic,支持第三方模块等众多特性。本文主要描述了Linux下httpd的安装以及相关基本用法。 一、httpd的安装 演示环境及版本 # cat /etc/issue CentOS release 6.5 (Final) Kernel \
有时候,我们需要做多条件查询,多个条件为“或”的关系,分类查询等,一般会用到多段select语句,然后用union或者union all进行连接,进而查出需要的结果。 例如, select a.id as id, a.name as name, a.age as age from scama.table_name2 a where 1=1 union all select b.sn as id, b.name as name, b.age as age from scama.table_name2 b w