Full Stack

for
Frontend Engineers
Frontend Masters
Jem Young
Senior Software Engineer
 ● Slides
Serious Business ○ jemyoung.com/fsfe
● Tools
○ Windows
■ Bash for Windows
○ MacOS/OSX
■ terminal
How does the internet work?
http://www.cisco1900router.com/wp-content/uploads/2013/03/1-tutorial-osi-7-layer-model.gif
Things you’ll learn

● Level up your command line skills

● How the internet works
● How to create and manage a web server
● Create a deploy system for a Node app
● Build a basic web page
 ● Domains
● DNS
Part 1 ● Command line basics
getting started
● VIM
● logging in
Domains
 DNS

IP Address - 127.0.0.1 IP - Internet Protocol

DNS - Maps IP addresses to domains DNS - Domain Name System

“The internet phonebook”

DNS

www.jemyoung.com === 23.23.185.61

Exercise
Ping
Ping

$ ping google.com
DNS

● Local cache
● LAN DNS server LAN - Local Area Network
● ISP DNS server
ISP - Internet Service Provider
DNS

DNS cache poisoning

23.23.185.61
X
jemyoung.com

104.24.122.137
Exercise
Trace Route
Trace Route

Windows OSX

$ tracert netflix.com $ traceroute netflix.com

ICMP - Internet Control Message Packet
Exercise
VIM
VIM
VIM - VI Improved

What is VIM?
“Vim isn't an editor
A ubiquitous text editor designed to hold its users'
hands. It is a tool, the use of
Why should I care? which must be learned.”

Because servers don’t have GUI’s http://www.vim.org/about.php

VIM

$ vi
VIM

VIM has three modes

● command mode
● insert mode
● last-line mode
VIM

esc command esc

mode
i :

last-line mode
insert mode
VIM - insert mode

1. press i
2. type “Haha VIM is easy”

https://vimgifs.com/i/
VIM - command mode

1. press esc
2. press u
3. press i
4. type “Haha VIM is ok”
5. press esc
6. press dd
https://vimgifs.com/u/
VIM - command mode

1. type “Hello, world!”

2. press enter
3. type “Hello, class!”
4. press esc
5. type /Hello
6. press enter
7. press n to search forward
8. press N to search backward
VIM
https://linuxmoz.com/vi-commands-cheat-sheet/

http://vim.wikia.com/wiki/Copy,_cut_and_paste
Exercise
editing and saving in VIM
VIM - last-line mode

Quit without saving Save and quit

1. press esc 1. press esc
2. press : 2. press :
3. type q 3. type wq
4. :q!
VIM

Take a few minutes to practice writing

and saving. We will be using VIM later.
Exercise
Logging into server
Logging into a server

*Updated 4/17/17

$ ssh [email protected]
 ● SSH
● servers
Part 2 ● VPS
servers ahoy
● (basic) server setup
● let’s buy a domain
SSH

Authentication

username/password ssh key

SSH

What’s wrong with logging in with a

password?
SSH

● 12345
● password
● qwerty
● qazwsx
● 12345678
SSH

A day in the life of a server

SSH
SSH - Secure Socket Shell

Public Key Authentication

SSH
your computer server

private key public key

(secret) encrypted messages
Exercise
Creating an SSH key
Creating an SSH Key

$ cd ~/.ssh/
$ ssh-keygen -t rsa
Don’t lose your private key!
 Servers

● Web server
● Database server
● Storage server
Server

● Dedicated server VPS - Virtual Private Server

● VPS
Server

Dedicated Server

VPS VPS VPS VPS

Server

VPS VPS VPS VPS

Server

Advantages of the cloud

● flexible
● scalable
● on demand

Providers
● AWS
● Rackspace
● Digital Ocean the cloud
Exercise
Buy a VPS
Buying a VPS

www.digitalocean.com
Buying a VPS
Buying a VPS
Buying a VPS
Buying a VPS
Buying a VPS

$ cat ~/.ssh/my_key.pub

paste your public key

Buying a VPS
 Exercise
Log into your very own server!
Log into your server

$ ssh -i ~/.ssh/my_key root@$YOUR_SERVER_IP

Exercise
top
Top

$ top
Exercise
Set up your server
Set up your server

$ apt-get update update software

$ apt-get upgrade

$ adduser $USERNAME create a new user

$ usermod -aG sudo $USERNAME add user to sudo group

Set up your server

$ su $USERNAME switch user

$ sudo cat /var/log/auth.log make sure user has sudo access

Set up your server

$ exit
$ exit
Set up your server

$ cat ~/.ssh/my_key.pub | ssh $USERNAME@$SERVER_IP "mkdir

-p ~/.ssh && cat >> ~/.ssh/authorized_keys"
Set up your server
print the contents of
$ cat ~/.ssh/my_key.pub | my_key.pub and pipe the
output to the next command

$ ssh $USERNAME@$SERVER_IP ssh into your server

Set up your server

make a .ssh folder in your

$ mkdir -p ~/.ssh home directory if it doesn’t
already exist

$ cat >> ~/.ssh/authorized_keys"

write the contents of the
output to the file
authorized_keys
Set up your server

$ cat ~/.ssh/my_key.pub | ssh $USERNAME@$SERVER_IP "mkdir

-p ~/.ssh && cat >> ~/.ssh/authorized_keys"
Set up your server

$ ssh -i ~/.ssh/my_key $USERNAME@$SERVER_IP

Set up your server

disable root login!

Set up your server

$ sudo vi /etc/ssh/sshd_config

PermitRootLogin no disable root login

allow only ssh to login
PasswordAuthentication no

$ sudo service sshd restart restart ssh

Exercise
Buy a domain
Buy a domain

www.namecheap.com
Buy a domain
Buy a domain

1. Get the IP address of your VPS

2. Add 2 A Records with your IP address
○ @
○ www
Buy a domain
 Buy a domain

“The A record maps a name to one or more IP

addresses, when the IP are known and stable.”

“The CNAME record maps a name to another

name.”

https://support.dnsimple.com/articles/differences-between-a-cname-alias-url/
Servers

jemyoung.com

23.23.185.61
Servers

http://keycode.info/

https://github.com/wesbos/keycodes/blob/gh-pages/CNAME
 ● Ubuntu
Part 3 ● Nginx
setting up your server
● Node
Ubuntu

Two main types of server operating systems

windows unix

BSD linux* solaris

freeBSD
ubuntu debian red hat
OSX/MacOS

*there are a lot more than 3

Ubuntu

● ubiquity
Why Unix? ● open-source
● (mostly) free
Ubuntu

Common unix
commands
● cd
Why Unix? ● crontab
● ls
● mkdir
● pwd
● rm
Ubuntu
Nginx (engine x)

“A HTTP and reverse

proxy server, a mail
● reverse proxy
proxy server, and a ● http server
generic TCP/UDP
proxy server”
Nginx

PROXY
Nginx

PROXY
NODE
Exercise
Nginx
 Nginx

$ sudo apt-get install nginx install nginx

start nginx
$ sudo service nginx start

type your server's IP address into a browser

Nginx

$ sudo cat /etc/nginx/sites-available/default

$ sudo less /etc/nginx/sites-available/default

Nginx
jemyoung.com

23.23.185.61

Nginx/Apache
Setup continued

$ sudo apt-get install git install git

$ sudo apt-get install nodejs npm install node and npm

Setup continued

$ sudo ln -s /usr/bin/nodejs /usr/bin/node

symlink nodejs to node

$ sudo mkdir -p /var/www make a web directory (if

it doesn’t already exist)
Setup continued

$ sudo chown -R $USER:$USER /var/www

change ownership of the web

directory to the current user

$ cd /var/www move into to web directory

 Setup continued

$ git clone https://github.com/young/Dev-Ops-for-Frontend.git

clone the git repo

Setup continued

$ mv Dev-Ops-for-Frontend/ app/ rename directory to app/

$ cd app/ move into to app directory

install npm packages

$ npm i
Setup continued

$ node app.js start server

type in your server’s IP

address in a browser,
port 3001
 Part 4 ● Setup nginx
● Build a web page
you are a webmaster
Nginx

$ sudo vi /etc/nginx/sites-available/default

location / {
proxy_pass http://127.0.0.1:3001/;
}
Nginx

type in your server’s IP address or

domain name in a browser
Nginx

$ sudo service nginx reload

Nginx jemyoung.com

23.23.185.61

Nginx/Apache

Node
Exercise
html
html

$ cd /var/www/app/ move into to app directory

$ git checkout -b some_branch_name make a new branch

modify the html to your

$ vi index.html heart's content
Part 5 ● Build a gulp file
● Build a deploy system
Deploy
How do we build and
deploy our app?
Gulp
Gulp - a JavaScript task runner

Similar:

● Grunt
● Broccoli
● Brunch
● Jake
Gulp
Exercise
Create gulp tasks
Create gulp tasks

1. Open gulpfile.js in VI. It’s in the root directory of the demo

project.
2. Fill in the gulp task clean-css so that any css files in the dist
folder are removed.
3. Add your new task to build task.
Create gulp tasks

1. Create a gulp task to compile and concat your less files. The css should be
placed in the dist folder.
2. Add your new task to build task.
Gulp

$ npm i -g gulp install Gulp

Gulp

$ sudo mkdir -p /usr/local/lib/node_modules

https://docs.npmjs.com/getting-started/fixing-npm-permissions
How do we keep our app up
and running?
 Forever

Forever- a process manager that keeps a

process running indefinitely

Similar:

● Strong Loop Process Manager

● PM2
Exercise
Run Forever
Run Forever

$ pwd
/var/www/app
$ npm i -g forever
 Run Forever

create a log file for the

$ sudo mkdir /var/log/forever
forever process

$ sudo chown -R $USER /var/log/forever

change owner to current
user
 Run Forever

$ forever start app.js >> /var/log/forever/forever.log

start forever and log the output

Exercise
tailing a log file
Tail

$ sudo tail -f /var/log/auth.log

Exercise
Putting it all together
 package.json

"scripts": {
"deploy": "gulp deploy && forever stopall && forever start app.js
>> /var/log/forever/forever.log"
}

https://github.com/young/Full-Stack-For-Frontend/blob/master/package.json#L7
Build and Deploy

$ npm run deploy

HOORAY!!
Further Exploration

● Complete project
○ https://github.com/young/Full-Stack-For-Frontend
● Make your site secure with Lets Encrypt and Acme Tiny
○ https://github.com/diafygi/acme-tiny
● Use Fail2Ban to prevent attackers from brute forcing
○ https://www.digitalocean.com/community/tutorials/how-to-protect-ssh
-with-fail2ban-on-ubuntu-14-04