-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathhow-it-works.html
More file actions
310 lines (309 loc) · 18.6 KB
/
Copy pathhow-it-works.html
File metadata and controls
310 lines (309 loc) · 18.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
---
layout: default
title: Features
slug: features
lead: "Check out ElasticBox's features that help with managing all of your virtual infrastructure. Define and deploy applications in three easy steps."
base_url: "../"
---
<main id="content" role="main">
<div class="jumbotron slate hero-walkthrough">
<div class="container">
<div class="row">
<h2 class="features-hero text-center">ElasticBox Is Here To Help.</h2>
<h3 class="lead col-lg-10 col-lg-offset-1 text-center sub">With all the promise and potential of cloud computing, running an application in the cloud is still a pain in the PaaS. Welcome to a simplified, modular, service-based application development process, where fully configured application components are available as a service.</h3>
<div class="col-lg-10 col-lg-offset-1 hero-screenshot-block">
<div class="hero-screenshot">
<div class="hero-screenshot-inner">
<div class="hero-screenshot-placeholder"></div>
</div>
</div>
</div>
<div class="col-lg-12 hero-screenshot-base"></div>
</div>
</div>
</div>
<div class="container" id="box-overview">
<div class="row padding-2x">
<div class="text-center">
<h2 class="lead-color">Boxes Are Your New Best Friend.</h2>
<h4 class="lead sub">Create, reuse, and repurpose. Teams can assemble and launch n-tier applications by mixing and matching boxes. Launching applications from boxes gives you consistency and agility. Versioning means you can innovate without breaking things.</h4>
</div>
</div>
</div>
<img class="img-responsive img-box-block" src="https://dl.dropboxusercontent.com/u/11221717/boxes-best-friend-illustration.png"></img>
<div class="container"
<div class="row">
<div class="col-lg-4 box-overview">
<div class="box-overview-description" style="float:left;">
<h3 class="lead">Choose boxes from a service catalogue.</h3>
</div>
</div>
<div class="col-lg-4 box-overview">
<div class="box-overview-description" style="margin: 15px auto;">
<h3 class="lead">Customize boxes to fit the needs of your applications.</h3>
</div>
</div>
<div class="col-lg-4 box-overview">
<div class="box-overview-description" style="float:right;">
<h3 class="lead">Stack Boxes to create any application architecture.</h3>
</div>
</div>
</div>
</div>
<div class="deploy" id="deploy">
<div class="container">
<div class="row padding-2x">
<h2 class="text-center lead-color">Start Deploying Applications Right Away</h2>
<h4 class="col-lg-8 col-lg-offset-2 text-center sub">Configure and deploy applications using CM tools like <a class="more" href="">Docker</a>, <a class="more scripts-more" href="">Chef</a>, and <a class="more">Puppet</a> or standard scripting languages like Bash and PowerShell.</h4>
</div>
<div class="row padding-1x">
<div class="col-lg-10 col-lg-offset-1 text-center">
<div class="boxes-individual inline">
<div class="col-lg-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-docker.png"></img><h5>Docker</h5></div>
<div class="col-lg-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-chef.png"></img><h5>Chef</h5></div>
<div class="col-lg-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-puppet.png"></img><h5>Puppet</h5></div>
<div class="col-lg-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-docker.png"></img><h5>Bash</h5></div>
<div class="col-lg-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-chef.png"></img><h5>Powershell</h5></div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-12 col-sm-12 col-xs-12">
<div class="life-cycle-editor">
<div class="life-cycle-nav">
<button class="btn btn-md btn-lce">Events</button>
<button class="btn btn-md btn-lce">Variables</button>
<button class="btn btn-md btn-lce">Logs</button>
<button class="btn btn-md btn-lce"><span class="reconfigure-icon-container"><i class="fa fa-cog reconfigure-icon"></span></i>Reconfigue</button>
<button class="btn btn-md btn-lce btn-lce-close"><strong class="lce-close-icon">×</strong></button>
</div>
<div class="life-cycle-pad">
<img class="life-cycle-tab" src="https://dl.dropboxusercontent.com/u/11221717/Screenshot%202014-03-14%2001.56.57.png"></img>
</div>
<div class="life-cycle-inner">
<code>
$ if ! [ $(lsb_release -cs|grep raring|wc -c) -gt 1 ]; then echo "UNSUPPORTED IMAGE/AMI: This Box only works with Ubuntu 13.04 (Raring Ringtail)"; fi
<br>
$ sudo apt-key adv --keyserver keyserver.ubuntu.com
<br>
$ sudo sh -c "echo deb http://get.docker.io/ubuntu docker main > /etc/apt/sources.list.d/docker.list"
<br>
$ sudo apt-get update -y
<br>
$ sudo apt-get install lxc-docker-0.7.6 -y
<br>
$ run curl -L https://github.com/shykes/helloflask/archive/master.tar.gz | tar -xzv
</code>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="clouds" id="clouds">
<div class="clouds-inner">
<div class="container padding-4x">
<h2 class="text-center cloud-lead">Feel Free To Move About The Clouds</h2>
<h3 class="lead col-lg-8 col-lg-offset-2 text-center sub">ElasticBox supports all leading cloud providers, so you won't be boxed into any specific vendor. Move your apps between clouds with the click of a button. Public, private or hybrid clouds. You choose.</h3>
<div class="row cloud-row-1 text-center hidden-md hidden-xs padding-2x">
<div class="col-lg-4 cloud-ends">
<div class="floaty floaty-1">
<div class="floaty-inner">
<img class="cloud-provider" src="https://dl.dropboxusercontent.com/u/11221717/cloud-amazon.png"></img>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="floaty floaty-2">
<div class="floaty-inner">
<img class="cloud-provider" src="https://dl.dropboxusercontent.com/u/11221717/cloud-rackspace.png"></img>
</div>
</div>
</div>
<div class="col-lg-4 cloud-ends">
<div class="floaty floaty-3">
<div class="floaty-inner">
<img class="cloud-provider" src="https://dl.dropboxusercontent.com/u/11221717/cloud-vmware.png"></img>
</div>
</div>
</div>
</div>
<div class="row cloud-row-2 text-center hidden-md hidden-xs padding-4x xs-hidden">
<div class="col-lg-4 col-md-offset-2">
<div class="floaty floaty-4">
<div class="floaty-inner">
<img class="cloud-provider" src="https://dl.dropboxusercontent.com/u/11221717/cloud-google-compute.png"></img>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="floaty floaty-5">
<div class="floaty-inner">
<img class="cloud-provider" src="https://dl.dropboxusercontent.com/u/11221717/cloud-hp-public.png"></img>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron dark">
<div class="container">
<h2 class="text-center lead-color">Focus Entirely On Your Application</h2>
<h3 class="text-center lead col-lg-10 col-lg-offset-1">ElasticBox has solutions and features you've never seen before. Give them a try and you'll wonder how you survived without them.</h3>
<div class="row row-feature padding-4x" id="life-cycle-editor">
<div class="col-lg-5 feature-highlight">
<h2 class="feature-title">ElasticBox Lifecycle Editor</h2>
<h4 class="feature-supporting">Reconfigure and Deploy in one view.</h4>
<div class="lead">No product has a solution quite like the Lifecycle Editor. In one view, you can manage scripts and variables, deploy and then reconfigure or reinstall. It’s all the power you ever wished for, right at your fingertips.</div>
<ul class="feature-list">
<li>Develop without friction.</li>
<li>Effectively manage assets and dependencies.</li>
<li>Keep infrastructure fluid and manageable.</li>
<li>Audit and compare multiple deployment logs.</li>
<li>Increase deployment velocity by configuring<br> and installing on the fly.</li>
</ul>
</div>
<div class="col-lg-6 col-lg-offset-1">
<div class="browser-feature">
<div class="indicators">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="browser-window">
<img class="img-responsive feature-screenshot" src="https://dl.dropboxusercontent.com/u/11221717/Screenshot%202014-02-27%2023.47.03.png"></img>
</div>
</div>
</div>
</div>
<div class="row row-feature padding-4x" id="collaboration">
<div class="col-lg-6">
<div class="browser-feature">
<div class="indicators">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="browser-window">
<img class="img-responsive feature-screenshot" src="https://dl.dropboxusercontent.com/u/11221717/Screenshot%202014-02-27%2023.55.26.png"></img>
</div>
</div>
</div>
<div class="col-lg-5 col-lg-offset-1 feature-highlight">
<h2 class="feature-title">Collaboration That Scales</h2>
<h4 class="feature-supporting">Get your team up and running through collaboration.</h4>
<div class="lead">We know that collaboration leads to innovation and acceleration. ElasticBox is purposely built to center your team’s work on developing and maintaining applications, keeping everyone on the same page.</div>
<ul class="feature-list">
<li>Share service and provider resources.</li>
<li>Collaborate through sharing contained infrastructure.</li>
<li>Replicate infrastracture and apps across environments.</li>
<li>Incentivise sharing, agility and innovation.</li>
<li>Control access and control over application and infrastructure components.</li>
</ul>
</div>
</div>
</div>
</div>
<div class="jumbotron hidden-xs inline-account slate" id="inline-sign-up">
<div class="container">
<div class="row">
<h3 class="text-center">Build Applications, Not Infrastructure</h3>
<h4 class="text-center lead sub">See how ElasticBox can make your life easier.</h4>
<div class="col-lg-6 col-lg-offset-3">
<div class="col-lg-6">
<input class="form-control input-lg input-cta" placeholder="Enter Email"></input>
</div>
<div class="col-lg-6">
<button class="btn btn-danger btn-lg btn-block input-cta">REQUEST DEMO</button>
</div>
</div>
</div>
</div>
</div>
<div class="jumbotron text-center">
<div class="container padding-2x">
<h2 class="lead-color">See Why Boxes Are Awesome</h2>
<h4 class="lead sub">A Box is an encapsulated, fully configured, component of your application architecture. A Box contains scripts, variables, files, and other metadata required to deploy the application. It could be a database, webserver, middleware, language, runtime – really you can Box almost anything. A Box is reusable, can be versioned, and is fully mobile across cloud services.</h4>
<div class="row padding-4x">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><div class="box-detail-select"><span class="glyphicon glyphicon-chevron-left text-right"></span></div></div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<div class="box-explain">
<div class="box-large"></div>
<div class="box-contents">
<div class="box-data active">
<img class="box-data-icon" src="https://dl.dropboxusercontent.com/u/11221717/box-detail-code.png"></img>
</div>
<div class="box-data">
<img class="box-data-icon" src="https://dl.dropboxusercontent.com/u/11221717/box-detail-settings.png"></img>
</div>
<div class="box-data">
<img class="box-data-icon" src="https://dl.dropboxusercontent.com/u/11221717/box-detail-automate.png"></img>
</div>
<div class="box-data">
<img class="box-data-icon" src="https://dl.dropboxusercontent.com/u/11221717/box-detail-connections.png"></img>
</div>
<div class="box-data">
<img class="box-data-icon" src="https://dl.dropboxusercontent.com/u/11221717/box-detail-script.png"></img>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-3"><div class="box-detail-select"><span class="glyphicon glyphicon-chevron-right"></span></div></div>
</div>
<div class="row">
<h3 class="box-detail-title">Code</h3>
<p class="col-lg-8 col-lg-offset-2 lead sub">Boxes can contain code that might execute comands or configue application settings. Any thing that can be scipted can be contained in a box. The sky is the limit.</p>
</div>
</div>
</div>
<div class="container" id="box-library">
<div class="row padding-1x">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h3 class="lead-color">Runtimes</h3>
<h4 class="lead sub">Whatever language your application is written in, ElasticBox has you covered.</h4>
<div class="boxes-individual inline">
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-linux.png"></img><h5>Linux</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-ubuntu.png"></img><h5>Ubuntu</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-ruby.png"></img><h5>Ruby</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-php.png"></img><h5>PHP</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-java.png"></img><h5>Java</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-microsoft-net.png"></img><h5>.NET</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-perl.png"></img><h5>Perl</h5></div>
</div>
</div>
</div>
<div class="row padding-1x">
<div class="col-md-10 col-lg-offset-1 text-center">
<h3 class="lead-color">Middleware and Frameworks</h3>
<h4 class="lead sub">Run your applications on any environment by picking from one of our supported boxes. Create your own OS box and reuse it over and over again.</h4>
<div class="boxes-individual inline">
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-apache.png"></img><h5>Apache</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-tomcat.png"></img><h5>Tomcat</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-python.png"></img><h5>Python</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-node.png"></img><h5>Node JS</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-django.png"></img><h5>Django</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-nginx.png"></img><h5>Nginx</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-drupal.png"></img><h5>Drupal</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-rails.png"></img><h5>Rails</h5></div>
</div>
</div>
</div>
<div class="row padding-1x">
<div class="col-lg-10 col-lg-offset-1 text-center">
<h3 class="lead-color">Datastores</h3>
<h4 class="lead sub">Databases as Boxes means your datastores are plug and play. Versionable and fully mobile across clouds, environments and applications.</h4>
<div class="boxes-individual inline">
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-mysql.png"></img><h5>MySql</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-postgresql.png"></img><h5>PostgreSQL</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-mongoDB.png"></img><h5>MongoDB</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-microsoft-sql-server.png"></img><h5>Microsoft SQL Server</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-amazon-rds.png"></img><h5>Amazon RDS</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-amazon-s3.png"></img><h5>Amazon S3</h5></div>
<div class="col-md-2"><img height="80px" width="80px" src="https://dl.dropboxusercontent.com/u/11221717/boxes/box-oracleDB.png"></img><h5>Oracle DB</h5></div>
</div>
</div>
</div>
</div>
</main>