Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Ember.js, DevOps, and You - MadisonRuby 2016
Search
Iheanyi Ekechukwu
July 08, 2016
Programming
0
260
Ember.js, DevOps, and You - MadisonRuby 2016
My talk on Ember.js, DevOps, and You given at MadisonRuby 2016.
Iheanyi Ekechukwu
July 08, 2016
Tweet
Share
More Decks by Iheanyi Ekechukwu
See All by Iheanyi Ekechukwu
Building a Canary Testing Framework
iheanyi
0
510
gRPC and Protobufs - JSCamp Romania
iheanyi
0
300
Ember.js, DevOps, and You - NPM Camp 2016
iheanyi
0
490
Ember.js, DevOps, and You - Wicked Good Ember 2016
iheanyi
1
860
Intro to Ember.js and Ember-CLI - ThunderPlainsConf 2015
iheanyi
0
290
Intro to Ember.js and Ember-CLI - Front Porch 2015
iheanyi
0
600
Ember.js and Ember-CLI
iheanyi
5
570
Other Decks in Programming
See All in Programming
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
1k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
270
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
910
Goで作る、開発・CI環境
sin392
0
260
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
670
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
420
The Niche of CDK Grant オブジェクトって何者?/the-niche-of-cdk-what-isgrant-object
hassaku63
1
500
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
GPUを計算資源として使おう!
primenumber
1
200
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
6.7k
型で語るカタ
irof
0
530
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
790
Featured
See All Featured
Writing Fast Ruby
sferik
628
62k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
980
Optimizing for Happiness
mojombo
379
70k
Speed Design
sergeychernyshev
32
1k
Documentation Writing (for coders)
carmenintech
72
4.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Transcript
Ember.js, DevOps, and You Iheanyi Ekechukwu Madison+Ruby 2016
Iheanyi Ekechukwu Software Engineer @ DigitalOcean @kwuchu
Defining DevOps What exactly is DevOps?
DevOps?
None
DevOps.
Development + Operations
DevOps is deploying.
DevOps is provisioning.
DevOps is versioning.
DevOps is complicated.
Automation is
Ember.js and DevOps What do Ember.js and DevOps have to
do with one another?
None
Ember-CLI-Deploy Plugins
An Ember-CLI-Deploy Plugin can implement up to 11 hooks
None
So, it doesn’t just deploy.
Ember-CLI-Deploy can provision.
Ember-CLI-Deploy can build.
Ember-CLI-Deploy can deploy.
Ember-CLI-Deploy can manage releases.
Ember-CLI-Deploy
Ember-CLI-DevOps
Building a Plugin
Create the Ember addon and install the Ember-CLI-Deploy base plugin.
STEP ONE
ember addon ember-cli-deploy-digitalocean
cd ember-cli-deploy-digitalocean npm install ember-cli-deploy-plugin --save
STEP TWO Manually deploy a Fastboot application, taking note of
each action. (Provisioning, Deployment, etc.)
Let’s go through the steps.
Create a Droplet.
SSH into the droplet.
Install Nginx, Node, NPM, and Ember-Fastboot-Server on droplet
On local machine, build the Fastboot application.
SCP the built Ember application onto the droplet
On droplet, go to the uploaded app and run the
Fastboot application.
Configure Nginx to proxy over the Fastboot’s server’s port and
serve static assets.
Reload Nginx.
And you’re done.
STEP THREE Translate each recorded step into code. (Automation)
None
Automation Problems and Solutions
PROBLEM How do I create a droplet for the user?
SOLUTION Use DigitalOcean’s API and create an Ember command that
creates the droplet.
None
export DO_ACCESS_TOKEN=<token>
ember do:provision
None
PROBLEM Installing all software dependencies on the droplet. (Provisioning)
WITHOUT FASTBOOT One package dependency. Web Server (NGINX) serves the
static assets.
WITH FASTBOOT More dependencies. It’s not only NGINX. We now
need Node, NPM, and Fastboot.
SOLUTION DigitalOcean Images and execution of commands via Node SSH2.
None
this.conn = new SSHClient(); this.sshConfig = { host: config.ipAddress, port:
22, username: config.dropletUsername, privateKey: require('fs').readFileSync(config.privateKeyPath), password: config.dropletPassword, passphrase: config.passphrase, };
willUpload: function() { var conn = this.conn; conn.on('ready', () =>
{ conn.exec(‘sudo apt-get update -y; sudo apt-get upgrade -y; sudo apt-get install -y nginx gcc build- essential; rm /etc/nginx/sites-enabled/default', (err, stream) => { if (err) throw err; stream.on('data', (data) => { this.log('STDOUT: ' + data); }).on('end', (data) => { resolve(); }); }) }).connect(this.sshConfig); })
PROBLEM How do I build my Ember application and get
it onto the droplet?
SOLUTION Use ember-cli-deploy-build to build the application, NPM install dependencies,
then SCP files onto the droplet.
None
configure: function() { //… this.scpConfig = { host: config.ipAddress, port:
22, username: process.env.DROPLET_USERNAME || 'root', privateKey: require('fs').readFileSync(process.env.PRIVATE_KEY_DIR), password: process.env.DROPLET_PASSWORD, passphrase: process.env.PASSPHRASE, path: '/etc/nginx/sites-enabled/ember-app' }; this.scpClient = SCPClient; },
willUpload: function(context) { var npmInstallTask = new NPMInstallTask({ log: this.log.bind(this),
distDir: context.distDir }); return npmInstallTask.run() // more code down here }
upload: function(context) { this.log('Uploading assets to the droplet!'); var scpClient
= this.scpClient; return new Promise((resolve, reject) => { scpClient.scp(context.distDir, this.scpConfig, (err) => { if (err) { throw err; } //… return resolve(); }); }); },
context.distDir
PROBLEM What if my droplet restarts and kills the Fastboot
server?
SOLUTION Create a Fastboot Upstart Service on the droplet.
description "A job file for starting up the Fastboot service
for Ember." author "Iheanyi Ekechukwu" start on filesystem or runlevel [2345] stop on shutdown pre-start script npm install -g ember-fastboot-server echo "Starting Fastboot server" >> /var/log/fastboot.log end script script export HOME echo $$ > /var/run/fastboot.pid exec ember-fastboot /etc/nginx/sites-enabled/ember-app >> /var/log/fastboot.log 2>&1 end script pre-stop script rm /var/run/fastboot.pid echo "Fastboot Server Stopping" >> /var/log/fastboot.log end script
didUpload: function(context) { // other code…upload fast boot fileClient.upload('./node_modules/ember-cli- deploy-digitalocean/templates/fastboot.conf',
'/ etc/init/fastboot.conf', err => { if (err) { this.log(err, {color: 'red'}); throw err; } // other code… });
PROBLEM How do I get the application up and served
up to the user?
SOLUTION Upload a custom NGINX config and restart everything.
http { include /etc/nginx/mime.types*; default_type application/octet-stream; sendfile on; tcp_nopush on;
tcp_nodelay on; keepalive_timeout 65; types_hash_max_size 2048; server { listen 80; root /etc/nginx/sites-enabled/ember-app; index index.html index.html; server_name localhost; location / { index index.html; proxy_pass http://127.0.0.1:3000; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; } location ~ \.(ttf|ttc|otf|eot|woff|font.css|css)$ { add_header Access-Control-Allow-Origin "*"; } location /assets { autoindex on; } } }
didUpload: function(context) { // upload nginx conf, other code left
out fileClient.upload('./node_modules/ember-cli-deploy-digitalocean/ templates/nginx.conf', '/etc/nginx/nginx.conf', (err) => { if (err) { this.log(err); throw err; } return resolve(); }); // other code… }
didUpload: function(context) { // restart nginx and fastboot service, other
code left out conn.exec("sudo service nginx restart; sudo service fastboot restart;", (err, stream) => { if (err) throw err; stream.on('data', (data) => { this.log('STDOUT: ' + data); }).on('end', (data) => { this.log("We're in business!"); return resolve(); }).stderr.on('data', (data) => { this.log('STDERR: ' + data); }); }); }
And we’re done automating.
None
One small NPM trick that makes building deploy plugins easier…
None
g
None
ember-cli-deploy-digitalocean (github.com/iheanyi/ember-cli-deploy- digitalocean)
Plugin Limitations
Deploys limited to one droplet.
Provisioning tasks get re-run unnecessarily.
No controlled release management.
Old Fastboot Serving Logic
Ideas for Future Enhancements
Zero Downtime Deployments
SSL Support?
Semantic Versioning (semantic-release)
The Future of DevOps?
None
+ ?
None
Thanks to… @tomdale @lukemelia @davidpett @digitalocean and others!
Thank you. @kwuchu