Full Stack

for
Frontend Engineers
Frontend Masters
Jem Young
Senior Software Engineer
 Slides
jemyoung.com/fefs

Serious Business Tools

Windows

Github for Desktop

github shell

Powershell

MacOS/OSX
How does the internet work?
http://www.cisco1900router.com/wp-content/uploads/2013/03/1-tutorial-osi-7-layer-model.gif
Things youll 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 - Local Area Network
LAN DNS server

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
What is VIM?
A ubiquitous text editor
Why should I care?
Because servers dont have GUIs
VIM - VI Improved
Vim isn't an editor
designed to hold its users'
hands. It is a tool, the use
of which must be learned.
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 Save and quit

saving
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
Exercise
Logging into server
Logging into a server

*Updated 4/17/17

$ ssh student@138.197.253.87
 SSH

servers
Part 2 VPS
servers ahoy
(basic) server setup

lets buy a domain

SSH

Authentication

username/password ssh key

SSH

Whats 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
Dont 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 doesnt
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.pub $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
Ubuntu
Nginx (engine x)

A HTTP and reverse

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

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 doesnt 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 servers IP

address in a browser,
port 3001
 Part 4 Setup nginx

you are a webmaster Build a web page

Nginx

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

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

type in your servers 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 hearts 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. Its 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