Вы находитесь на странице: 1из 137

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
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 which must be learned.
Why should I care?
Because servers dont have GUIs 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