Full stack for frontend kho tài liệu bách khoa

Nginx engine x“A HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server” ● reverse proxy ● http server... $ sudo apt-get install nginx install nginx $

Full Stack

for Frontend Engineers

Frontend Masters

Jem Young

Senior Software Engineer

How does the internet work?

http://www.cisco1900router.com/wp-content/uploads/2013/03/1-tutorial-osi-7-layer-model.gi f

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

www.jemyoung.com === 23.23.185.61

Ping

$ ping google.com

Trace Route

Trace Route

$ tracert netflix.com $ traceroute netflix.com

ICMP - Internet Control Message Packet

VIM

of which must be learned.”

http://www.vim.org/about.php

A ubiquitous text editor

Because servers don’t have GUI’s

$ vi

command modeinsert mode last-line mode

VIM - insert mode

1 press i

2 type “Haha VIM is easy”

https://vimgifs.com/i/

VIM - command mode

VIM - command mode

1 type “Hello, world!”

7 press n to search forward

8 press N to search backward

https://linuxmoz.com/vi-commands-cheat-sheet/

http://vim.wikia.com/wiki/Copy,_cut_and_paste

editing and saving in VIM

VIM - last-line mode

Take a few minutes to practice writing and saving We will be using VIM later.

Logging into server

Logging into a server

$ ssh student@138.197.253.87

*Updated 4/17/17

username/password

Authentication

ssh key

What’s wrong with logging in with a

password?

A day in the life of a server

Public Key Authentication

SSH - Secure Socket Shell

Creating an SSH key

Creating an SSH Key

$ cd ~/.ssh/

$ ssh-keygen -t rsa

Don’t lose your private key!

Servers

VPS - Virtual Private Server

● Dedicated server

● VPS

Dedicated Server

VPS VPS VPS VPS

VPS VPS VPS VPS

Buy a VPS

Buying a VPS

www.digitalocean.com

Buying a VPS

$ cat ~/.ssh/my_key.pub

paste your public key

Buying a VPS

Log into your very own server!

Log into your server

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

top

$ top

Set up your server

Set up your server

$ apt-get update

$ adduser $USERNAME

update software

create a new user

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

$ apt-get upgrade

Set up your server

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

$ cat ~/.ssh/my_key.pub |

print the contents of

my_key.pub and pipe the output to the next command

$ ssh $USERNAME@$SERVER_IP ssh into your server

Set up your server

$ mkdir -p ~/.ssh

make a ssh folder in your 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.pub $USERNAME@$SERVER_IP

Set up your server

disable root login!

Set up your server

$ sudo vi /etc/ssh/sshd_config

disable root login

PermitRootLogin no

$ sudo service sshd restart restart ssh

PasswordAuthentication no allow only ssh to login

Buy a domain

Buy a domain

www.namecheap.com

Buy a domain

1 Get the IP address of your VPS

2 Add 2 A Records with your IP address

○ @

○ www

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/

jemyoung.com

23.23.185.61

http://keycode.info/

https://github.com/wesbos/keycodes/blob/gh-pages/CNAME

Two main types of server operating systems

BSD linux* solarisfreeBSD

OSX/MacOS ubuntu red hat

* there are a lot more than 3

debian

Common unix commands

Ubuntu

Nginx (engine x)

“A HTTP and reverse

proxy server, a mail

proxy server, and a

generic TCP/UDP

proxy server”

● reverse proxy

● http server

PROXY

PROXY NODE

Nginx

$ sudo apt-get install nginx install nginx

$ sudo service nginx start start nginx

type your server's IP address into a browser

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

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

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 mkdir -p /var/www make a web directory (if

it doesn’t already exist)

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

symlink nodejs to node

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/

Setup continued

type in your server’s IP

address in a browser,

port 3001

type in your server’s IP address or domain name in a browser

$ sudo service nginx reload

Nginx jemyoung.com

23.23.185.61

Nginx/Apache

Node

html

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

$ git checkout -b some_branch_name make a new branch

$ vi index.html

modify the html to your hearts content

Part 5

Deploy

● Build a gulp file

● Build a deploy system

How do we build and

deploy our app?

Gulp

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

$ 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?

Run Forever

Run Forever

$ pwd/var/www/app

$ npm i -g forever

Run Forever

$ sudo mkdir /var/log/forever create a log file for the

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

tailing a log file

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

Putting it all together

Build and Deploy

$ npm run deploy

HOORAY!!