Skip to content

Continuous Deployement

Jump to bottom
Peter Mouland edited this page Sep 24, 2016 · 5 revisions

http://react-lego.herokuapp.com

The main technologies used to achieve continuous deployment are:

Using these four together I can automatically test the app at different stages, on multiple browsers, and get it deployed.

Workflow

continuous deployment diagram

The diagram show that tests are run at each stage. The fast tests are run sooner, leaving the slower tests until later in the process.

Although locally we run the tests using only a single browser or PhantomJS, remotely we use BrowserStack to ensure that all browsers are covered. Being able to test all browsers means we really don't have to do any manual testing. 🎉

We are also utilising Heroku to test the deployed code on pre-prod. This step is massively important and once on pre-prod, the code and app looks exactly the same as it would do on prod. When we run our ent-to-end tests against pre-prod using all important browsers we know the site will work.

Once everything is green we get CircleCI to automatically to push to Prod where we run a smaller set of end-to-end tests called Smoke tests. This is a final check to ensure that Prod is up and running.
It is not meant to test any more functionality as we should have ran all our tests by now.

How to get CircleCI to do the heavy lifting

To start with we will need CircleCI to create a tunnel to browser stack:

      - wget "https://www.browserstack.com/browserstack-local/BrowserStackLocal-linux-x64.zip"
      - unzip BrowserStackLocal-linux-x64.zip
      - ./BrowserStackLocal $BROWSERSTACK_KEY -force:
          background: true

Here we force this to happen in the background as this tunnel will stay open for the duration.

Next, using Heroku, we tell CircleCI to make sure the clone is not a shallow clone :

      - "[[ ! -s \"$(git rev-parse --git-dir)/shallow\" ]] || git fetch --unshallow"

Without this you are most likely to have problems when pushing to Heroku.

We can now push our code to a Heroku app which has been designated as pre-prod:

      - git push git@heroku.com:react-lego-preprod.git $CIRCLE_SHA1:refs/heads/master -f --no-verify
      - npm run test:e2e-xb -- --sha=$CIRCLE_BUILD_NUM --target=http://react-lego-preprod.herokuapp.com --retries 4

This is just like pushing to any other git repo. Once the push is omplete we run the end-to-end tests which have been set up to run against all browsers. The npm script this points to is:

    "test:e2e-xb": "npm run nightwatch -- --env safari_osx,chrome_osx,firefox_win,firefox_osx,IE10,IE11,edge",
    "nightwatch": "nightwatch -o ./tests/e2e/tests_output -c ./tests/config/nightwatch.conf.js",

Nightwatch is already setup to use BrowserStack keys via nightwatch.conf.js and nighwatch.json.

Only if this passes does CircleCi execute the next command:

      - git push git@heroku.com:react-lego.git $CIRCLE_SHA1:refs/heads/master -f --no-verify
      - npm run test:e2e-smoke -- --sha=$CIRCLE_BUILD_NUM --target=http://react-lego.herokuapp.com --retries 4

These two are the same as for pre-prod, but this time they are run against prod. The smoke tests are a small-subset of end-to-end tests which have been tagged as smoke.

Putting it all together in circle.yml

Clone this wiki locally