穷人的持续集成与持续交付（下）

客户端程序的的持续交付

上篇文章介绍了如何使用一些免费的服务来实现服务器端API的持续集成、持续交付环境的搭建。有了服务端，自然需要有消费者，在本文中我们将使用另外一个工具来实现纯前端的站点的部署。

其中包括：

• 持续集成（单元测试，集成测试等）
• 持续部署/持续交付
• 静态站点托管

除此之外，我们还会涉及到：

• 自动化UI测试site_prism
• 静态站点的发布脚本
• aws的 命令行工具

我们的应用最后看起来是这样子的。

技术选型

我们在本文中，将采取另外一套免费服务来完成环境的搭建

• ThoughtWorks 出品的 Snap CI 作为持续集成/持续交付环境
• AWS的S3 作为应用发布的地方

Snap CI 是一个非常易于使用的持续交付环境，由于很多关于持续集成，持续交付的概念和实践都跟 ThoughtWorks 有关，所以这个产品对于构建，流水线，部署等等的支持也都做的非常好。

S3 是亚马逊的云存储平台，我们可以将静态资源完全托管在其上。 S3 的另一个好处是它可以将你的文件变成一个Web Site，比如你的目录中有 index.html ，这个文件就可以作为你的站点首页被其他人访问。这个对于我们这个前后端分离项目来说非常有用，我们的 css ， js ， font 文件，还有入口文件 index.html 都可以托管于其上。

实例

在本文的例子中，我们将定义3个 stage 。 Snap CI 将一次发布分为若干个 stage ，每个 stage 只做一件事情，如果一个 stage 失败了，后边的就不会接着执行。

我们的3个 stage 分别为：

1. 单元测试
2. 集成测试
3. 部署

准备工作

bookmarks-frontend 是一个纯前端的应用，它会消费后端提供的API，但是其实它并不知道（也不应该知道）后端的API部署在什么地方：

$(function() {    var feeds = $.get(config.backend+'/api/feeds');    var favorite = $.get(config.backend+'/api/fav-feeds/1');      $.when(feeds, favorite).then(function(feeds, favorite) {        //...    });  });

var backend = 'http://quiet-atoll-8237.herokuapp.com';    gulp.task('prepareConfig', function() {      gulp.src(['assets/templates/config.js'])      .pipe(replace(/#backend#/g, 'http://localhost:8100'))      .pipe(gulp.dest('assets/script/'));  });    gulp.task('prepareRelease', function() {      gulp.src(['assets/templates/config.js'])      .pipe(replace(/#backend#/g, backend))      .pipe(gulp.dest('assets/script/'));  });

module.exports = {    backend: '#backend#'  }

gulp.task('dev', ['prepareConfig', 'browserify', 'concatcss']);  gulp.task('build', ['prepareConfig', 'script', 'css']);  gulp.task('release', ['prepareRelease', 'script', 'css']);

$ gulp

$ gulp release

npm install  gulp

#!/bin/bash    export PORT=8100  bundle install    # launch the application  echo "launch the application"  ruby app.rb 2>&1 &  PID=$!    # wait for it to start up  sleep 3    # run the rspec tests and record the status  rspec  RES=$?    # terminate after rspec  echo "terminate the application"  kill -9 $PID    # now we know whether the rspec success or not  exit $RES

require 'spec_helper'    describe 'Feeds List Page' do    let(:list_page) {FeedListPage.new}      before do        list_page.load    end      it 'user can see a banner and some feeds' do        expect(list_page).to have_banner        expect(list_page).to have_feeds    end        ##...  end

#!/bin/bash    # install gulp and its dependencies  npm install    # package stuff, and point the server to the right place  gulp release    # upload the whold folder  aws s3 cp public/ s3://bookmarks-frontend \    --recursive \    --region us-west-2 \    --acl public-read

AWS_ACCESS_KEY_ID=xxxxxxxxxx  AWS_SECRET_ACCESS_KEY=xxxxxxxxxx