CSE2WDC/CSE5WDC: Web

Development on the Cloud

Lecturer: Lianhua (Lina) Chi

Lecture 8

‹#›
 Review - React
● React is a JavaScript library for building user interfaces.

Check out the React - Getting Started here

https://reactjs.org/docs/getting-started.html

‹#›
 Review - Redux
Redux is a predictable state container for JavaScript apps.

● Redux makes it easy to manage the state of your

application.
● Another way of looking at this – it helps you manage the
data you display and how you respond to user actions.
● Check out the Redux - Getting Started here
https://redux.js.org/introduction/getting-started

‹#›
 Review - Docker
Docker is a technology designed to simplify the
development, deployment and run applications through
the use of containers.

● Containers provide a packaging mechanism for

application to run quickly and reliably between multiple
computing environments. Docker images are used to
create containers at runtime.
● Check out the Docker - Getting Started here
https://docs.docker.com/get-started/

‹#›
 Review – Node.JS
Node.Js is a run-time environment that executes
JavaScript code outside of a browser.

Check out the Node.js - Getting Started here

https://nodejs.org/en/docs/guides/getting-started-guide/

‹#›
 Review - Nginx
Nginx is a web server which can also be used as a
reverse proxy, load balancer, mail proxy and HTTP
cache.

Check out the Nginx - Getting Started here

https://nginx.org/en/docs/beginners_guide.html

‹#›
Sharks
Demo

‹#›
 Outline
● Continuous Delivery
● Slide taken from

http://www.slideshare.net/winggundamth/joomla-
continuous-delivery-with-docker

● Continuous Integration with Drone

● Jasmine
● Introduction to AWS (Amazon Web Services)

‹#›
 Lecture 8
● Why use continuous integration?

● What are the advantages of using Docker within a

continuous integration environment?

● Why is it good to use a testing framework like Jasmine?

● What is the difference between AWS regions and

availability zones?

● Know well the different AWS services

● S3

● EBS

● EC2
‹#›
Why Continuous Delivery?

‹#›
‹#›
‹#›
‹#›
 Continuous delivery

is all about reducing risk and delivering value

faster by producing reliable software in short
iterations

‹#›
Continuous Integration

‹#›
 Continuous Delivery versus Continuous Integration
Continuous Integration

Continuous Delivery
Source: https://confluence.atlassian.com/bamboo/understanding-the-bamboo-ci-server-289277285.html
● Continuous delivery includes the deployment of the code ‹#›
● Continuous integration is just the automated building of the code.
 What is Continuous Integration?

Source: https://confluence.atlassian.com/bamboo/understanding-the-bamboo-ci-server-289277285.html
● When you commit your code to the code repository like bitbucket or github, the
repository server automatically notifies the continuous integration server.
● The continuous integration server running on a different machine will
automatically do the following (build process):
● Compile the code
● Run unit tests
● Run integration test ‹#›
● Package the code
 What is Continuous Integration?

Source: https://confluence.atlassian.com/bamboo/understanding-the-bamboo-ci-server-289277285.html

● Finally continuous integration systems can also automatically deploy your code
onto:
● A private server
● A public server
● The cloud
● Etc.
‹#›
 Continuous Integration Software

● Bamboo
● By Atlassian

● Company that made bitbucket

● Jenkins
● Large complex system

● Drone IO
● Simple

● Makes extensive use of Docker

● We will be using this in our class

● Etc.

‹#›
 Why use Docker for Continuous
Delivery?
● Typical Continuous Integration without Docker involved:

● Typical Continuous Integration with Docker involved:

‹#›
 Why use Docker for Continuous Delivery?

Benefits:
● Nullify the issue of inconsistent environment setups
● Any machine that is running a Docker can use a
Docker Image
● Save time on build and set up processes
● Allow developers to run tests in parallel
● Separation of concerns in DevOps: developers can
focus on developing apps and system administrators
can focus on deployment
● Improved Version Control by committing changes to
your Docker images for standardizing environments
‹#›
 Drone IO
● Drone is a Continuous Integration platform built on Docker
● docker pull drone/drone

● Makes extensive use of Docker for continuous delivery.

‹#›
 Where can I get Drone?
● The easiest way to use Drone is to use the hosted Drone service
from the Drone web site:
● https://drone.io/

● This effective means you will get a drone server in the cloud

‹#›
 Where can I get Drone?
● Drone is also an open source project, so you can download the
code from the open source project and install it anywhere for free.

‹#›
 Main configuration file
● The main configuration file for Drone is .drone.yml which needs to be placed in the root of
your directory.

Base docker image

build:
image: golang
commands: Command to execute to get the updated code
- python get
- python build Command to compile and build the code
- python test

Command to run the tests

● The slides for coding Drone is obtained from the following web site
● http://readme.drone.io/usage/overview/

‹#›
 Hooks
● Once activated, every commit and pull request automatically send
a hook from your CVS (Concurrent Version System) to Drone
● The hooks instruct Drone to execute a new build using the
instructions in the .drone.yml file.

build:
image: golang
commands:
- python get
- python build
- python test

‹#›
 Cloning
● Hooks specify commit details including branch and commit hash.
Drone will automatically clone and checkout the commit into the
build workspace:

git clone --depth=50 --recusive=true \

https://github.com/octocat/hello-world.git \
/drone/src/github.com/octocat/hello-world

git checkout 7fd1a60

‹#›
 Commands
● Drone previously cloned your source code into the build
workspace.
● The build workspace is mounted into your Docker container at
runtime as a volume.
● This means your code is cloned outside of the build container but
your build commands are run inside of the build container.

● Drone executes the following bash commands inside your build

container:

build:
image: golang
commands:
- python get
- python build
- python test ‹#›
 Services
● Drone supports launching separate, ephemeral Docker containers as part of the
build process. This is useful, for example, if you require a database for running
your unit tests.

● Example .drone.yml configuration with a Postgres database:

build:
image: golang
commands:
- python get
- python build
- python test

compose:
database:
image: postgres
environment:
- POSTGRES_USER=postgres
- POSTGRES_PASSWORD=mysecretpassword
‹#›
 Deployments
● Drone supports a large number of publish and deployment capabilities through
external plugins. Plugins are Docker containers that are automatically
downloaded, attach to your build, and execute a very specific publish or
deployment task.
● The code is only deployed if all the tests are passed
● Example .drone.yml configuration with the Docker publish plugin:

build:
image: golang
commands:
- python get
- python build
- python test

publish:
docker:
username: octocat
password: password
email: octocat@github.com ‹#›
repo: octocat/hello-world
Testing JavaScript Code

‹#›
 Jasmine
● Jasmine is a behavior-driven development framework for testing
JavaScript code.

● It does not depend on any other JavaScript frameworks.

● It does not require a DOM.

● And it has a clean, obvious syntax so that you can easily write
tests.

‹#›
 A suite of tests
● In Jasmine you use describe to define a suite of tests.
Description for the whole suite of tests

describe("The toBe matcher compares with ===", function() {

Description for one spec (one part of the suite)
it("and has a positive case", function() {
expect(true).toBe(true);
});
Description for one spec (one part of the suite)
it("and can have a negative case", function() {
expect(false).not.toBe(true);
});
});
‹#›
 Expectations and Matchers
● Each matcher implements a Boolean comparison between the
actual value and the expected value.
● Responsible for reporting to Jasmine if an expectation is true or

false.
● Jasmine will then pass or fail the spec.

describe("The toBe matcher compares with ===", function() {

it("and has a positive case", function() {

expect(true).toBe(true);
});
Expectation Matcher

it("and can have a negative case", function() {

expect(false).not.toBe(true);
});
}); Chained using not ‹#›
 toEqual Matcher

describe("The toEqual matcher", function() {

it("works for simple literals and variables", function() {

var a = 12;
expect(a).toEqual(12);
});

it("should work for objects", function() {

var foo = {
a: 12,
b: 34
};
var bar = {
a: 12,
b: 34
};
expect(foo).toEqual(bar);
});
});
‹#›
 Regular Expression Matcher

it("The toMatch matcher is for regular expressions", function() {

var message = "foo bar baz";

expect(message).toMatch(/bar/);
expect(message).not.toMatch(/quux/);
});

‹#›
 toBeDefined Matcher

it("The toBeDefined matcher compares against undefined", function() {

var a = {
foo: "foo"
};

expect(a.foo).toBeDefined();
expect(a.bar).not.toBeDefined();
});

‹#›
 Jasmine’s Default Matchers
expect(array).toContain(member);
expect(fn).toThrow(string);
expect(fn).toThrowError(string);
expect(instance).toBe(instance);
expect(mixed).toBeDefined();
expect(mixed).toBeFalsy();
expect(mixed).toBeNull();
expect(mixed).toBeTruthy();
expect(mixed).toBeUndefined();
expect(mixed).toEqual(mixed);
expect(mixed).toMatch(pattern);
expect(number).toBeCloseTo(number, decimalPlaces);
expect(number).toBeGreaterThan(number);
expect(number).toBeLessThan(number);
expect(number).toBeNaN();
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledTimes(number);
expect(spy).toHaveBeenCalledWith(...arguments);

Please see this URL to get examples that use the above: ‹#›
http://jasmine.github.io/2.5/introduction.html
 Setup and Teardown
The beforeEach and afterEach functions are called before each spec is executed and after
each spec is executed respectively.

describe("A spec using beforeEach and afterEach", function() {

var foo = 0;

beforeEach(function() {
foo += 1;
});

afterEach(function() {
foo = 0;
});

it("is just a function, so it can contain any code", function() {

expect(foo).toEqual(1);
});

it("can have more than one expectation", function() {

expect(foo).toEqual(1);
expect(true).toEqual(true);
}); ‹#›
});
 Setup and Teardown
The beforeAll and afterAll functions are called at the beginning before any spec as run and
the afterAll function is called after all specs have executed.

describe("A spec using beforeAll and afterAll", function() {

var foo;

beforeAll (function() {
foo = 1;
});

afterAll (function() {
foo = 0;
});

it("sets the initial value of foo before specs run", function() {

expect(foo).toEqual(1);
foo += 1;
});

it("does not reset foo between specs", function() {

expect(foo).toEqual(2);
});
‹#›
});
 Monitoring function calls using Spies
● Sometimes you need to know if a function has been called or not. You can use spies to
monitor that.

describe("A spy", function() {

var foo, bar = null;

beforeEach(function() {
foo = {
setBar: function(value) {
bar = value; It says we are interested in monitoring the
} function calls to the setBar function of the foo
};
spyOn(foo, 'setBar'); object
foo.setBar(123);
foo.setBar(456);
}); Checks whether foo.setBar has
been called at least once
it("tracks that the spy was called", function() {
expect(foo.setBar).toHaveBeenCalled();
});

it("tracks that the spy was called x times", function() {

expect(foo.setBar).toHaveBeenCalledTimes(2); ‹#›
});
 Lets see an example of this being used in
node.js
var request = require("request");

var base_url = "http://localhost:3000/"

describe("Hello World Server", function() {

describe("GET /", function() {
it("returns status code 200", function(done) {
request.get(base_url, function(error, response, body) {
expect(response.statusCode).toBe(200);
done();
Checks to make sure the GET request to
});
the Hello World Server returns status code
});
200
it("returns Hello World", function(done) {
request.get(base_url, function(error, response, body) {
expect(body).toBe("Hello World");
done();
});
}); Checks to make sure the GET request to
}); the Hello World Server returns the string
}); Hello world in the body of the message ‹#›
 More functions of Jasmine
● To learn more function of Jasmine look at the examples
here:
● http://jasmine.github.io/2.5/introduction.html

● Do the Jasmine Self Study lab.

● We have provided the solution to the lab as well.

● This lab is not marked.

‹#›
Lets Get Back to Talking
about Cloud Computing!

‹#›
 Amazon Web Services
(AWS)
● Amazon Web Services (AWS) is by far the most
popular provider of cloud services.
● AWS offers the largest range of services
● Over 700

● AWS has given us a grant to use their services

● All cloud computing exercises will be done on
AWS

‹#›
 AWS History
● Amazon was arguably the first company to offer an
extensive and thorough set of cloud-base services
● Amazon started as an on-line bookstore in 1995
● Expanded to CDs, DVDs, computer hardware, etc.

● Change in business model

● Merchant partnerships that leveraged Amazon’s portal

and large customer base.

● Amazon found ways to minimize IT costs
● Amazon chose to minimize hardware costs by buying
only commodity hardware parts
● Assembling them into highly standardized framework

● Guarantee resilience through extensive replication.

‹#›
 AWS History
● Amazon needed to provision for the high December
workload peak of Christmas
● A lot of wasted computation from January to November
● Amazon Web Services (AWS) launched in 2002
● Sold idle capacity to other organizations who needed

computers during January to November

● Attractive to customers

‹#›
‹#›
 Regions and Edge Locations

● Regions
● Used to run applications and workloads to reduce latency to end-users.
● Basically where the work gets done.
● Edge locations
● Helps lower latency and improve performance by caching data closer to the
user.
‹#›
● Only Route 53 and CloudFront services are provided at edge locations
 AWS Regions & Availability Zones

● All regions have at least 2 availability zones for redundancy

● Availability zones are analogous to clusters of datacenters.
● There is a single digit millisecond fiber between availability zones
‹#›
of the same region
 Availability Zones

● Availability zones are physically distinct groups of data centers.

● A region is made of multiple availability zones because
● Allows users to spread computation across multiple tier 1 ISPs
● Separate power providers in case power is lost to one availability zone
● Fault tolerance during natural disasters
● E.g. to handle earthquakes avoid building two Availability zones on the

same fault line.

● AWS highly recommends provisioning your resources across multiple availability
zones for fault tolerance. ‹#›
 Security

● Very brief introduction to AWS security

‹#›
 Security Groups
● AWS provides security groups, which act like built-in
firewalls for your virtual servers.
● When you launch an instance, you associate one or more
security groups with the instance.
● You can control how accessible your instances are by
configuring security group rules – from totally public to
completely private, or somewhere in between.

‹#›
 AWS Multi-tier Security Groups

● Security group configuration for a simple web application

● Web tier
● Can accept traffic on port 80/443 from any where on the internet
● App tier
● Can accept traffic from the web tier
● DB tier
● Can only accept traffic from the app tier
‹#›
● Also added rules to allow remote administration via SSH.
 Virtual Private Cloud (VPC)
● Amazon Virtual Private Cloud (Amazon VPC)
allows you to provision a logically isolated section
of the Amazon Web Services (AWS) Cloud where
you can launch AWS resources in a virtual
network that you define.
● You have complete control over your virtual
networking environment, including selection of
your own IP address range, creation of subnets,
and configuration of route tables and network
gateways.
‹#›
AWS Storage

‹#›
 Amazon Simple Storage Service
(S3)
● Storage for the internet
● Designed to make web-scale computing easier for
developers.
● Data can be accessed from anywhere
● For example S3 can be used to store pictures for a web
site.
● S3 is designed for 99.999999999% durability and 99.99%
availability of objects over a given year.
● Highly scalable, reliable, fast and inexpensive
● Dropbox stores data on S3.

‹#›
 Amazon Simple Storage Service (S3)

● To store an object on S3 you upload the file you want to store into a bucket.
● Think of objects as files
● You can set permissions on the object as well as any metadata
● Buckets are logical containers for objects
● Limit of 100 buckets per account
● Store an unlimited number of objects per bucket
● You can choose the geographical region where Amazon stores the S3 bucket ‹#›
and its contents.
 S3 Pricing

● All bandwidth into S3 is free but AWS charge a rate on bandwidth

out.
● Space is priced in a prorated GB per month
● If you want to know the price of anything on AWS you should use
the following simple monthly calculator:
‹#›
http://calculator.s3.amazonaws.com/calc5.html
 Amazon Glacier
● Extremely low cost storage
● $0.01 per GB per month

● Designed for archiving files which you almost never want

to see ever again.
● Also good for backups.
● Archives can represent a single file or a combination of
several files uploaded as a single archive
● Retrieving archives from Amazon Glacier require initiation
of a job.
● Jobs typically complete in 3 to 5 hours.

‹#›
 Amazon Elastic Block Store(EBS)
● Block level storage volumes for use with Amazon EC2 (Amazon
Elastic Compute Cloud) instances
● Your EC2 instance (virtual machine) can mount EBS volumes and
use it to store the operating system and/or data.
● EBS snapshots are durable and can be stored in S3
● EBS is particularly suited for applications that require
● Database

● File system

● Access to raw block level storage

‹#›
 Amazon Elastic Block Store (EBS)

● EBS volumes are highly available and reliable storage which can
be attached to any running instance in the same availability zone.
● EBS volumes persist independently from the life of the instance.
● When EBS volumes are not attached to an EC2 instance, you pay
only for the cost of the storage. ‹#›
 Amazon Elastic Block
Store (EBS)
● Can use EBS to create RAID configuration for a server
● You can use RAID 0 or RAID 1+0 (RAID 10)

● Volumes behave like unformatted block devices for Linux

or Windows instances

‹#›
 EBS Use Case
● The EBS service is a virtual hard drive connected through
the network.
● Before EBS existed the local HDD of the virtual machine
instance was used for storage.
● However, the storage was ephemeral, meaning it will

get deleted whenever an EC2 instance is shutdown.

● Keeping EC2 instances running all the time is

expensive.
● EBS decouples the lifecycle of the data persistence from
the lifecycle of an EC2 instance.

‹#›
 EBS pricing
● $0.10 per GB/month for standard EBS volume
● $0.10 per 1 million IO requests
● $0.125 per GB-month for IOPS EBS volume

● In contrast the ephemeral storage (local HDD) on the

EC2 instances are free but do not persist when EC2
instance is shutdown.

‹#›
 EBS Best Practices

● Highly available and reliable

● EBS volume data is replicated across multiple servers within the

same Availability Zone for fault tolerance

● Means if the entire availability zone dies then the EBS volume

becomes unavailable.
● For 20GB or less volumes the expected annual failure rate is 0.1%
- 0.5% compared to commodity HDD which typically have failure
rate of 4%
● EBS can be configured to take periodic snapshots of your volumes
‹#›
onto S3.
 EBS versus S3

● S3 requires you to write whole objects at a time meaning even if

you only change a small part of a file you need to write the entire
file out again.
● S3 is optimized for write once and read many times
‹#›
● In contrast EBS can be written to at the block level.
 Amazon Elastic Compute Cloud (EC2)

● Web service that provides resizable compute capacity in

the cloud.
● EC2 reduces the time required to obtain and boot new
server instances (virtual machines) to minutes.
● Can scale capacity up and down according to

requirements.
● Pay for only what you use.
● Choose Linux or Windows
● Deploy across regions and availability zones for reliability

‹#›
 Amazon Machine Image(AMI)

● AMI’s are like building blocks of EC2 instances

● They are templates of a computer’s root volume
● Pre-configured images
● Operating systems and applications pre-installed.

● Standard images

● Community images

● Create your own AMI with your own applications,

libraries, data, etc.
● Create your own gold master images of your EC2
infrastructure, enabling you to decrease your boot times.

‹#›
 Infrastructure and Applications

● Can launch entire enterprise software stacks from Oracle

on EC2.
● New and existing SAP customers can deploy their SAP
solutions on SAP certified Amazon EC2 instances.
● AWS allows customers to easily run Microsoft Windows
Server Applications in the cloud

‹#›
 EC2 Instance Types

● Different instance types have different per hour costs

● Different instance types have different number of computer units
and memory size.
‹#›
Different Instance Types

‹#›
http://aws.amazon.com/ec2/instance-types/
Billing Models

‹#›
 Spot Instance Price History

● You can view the history of the spot instance price

● Spot instances can be stopped at anytime
● Once the current market price goes above the your maximum

threshold your virtual machine will be stopped.

‹#›
 Conclusion
● Continuous delivery and integration make the deployment
of rapid changes to code much more efficient.
● Using Docker within a continuous delivery system makes
life a lot easier.
● Jasmine is a good test environment to use for unit testing
of JavaScript code.
● Amazon Web Services has a lot of useful cloud services.

‹#›