Full Stack for Front End Engineers
Introduction
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
Introduction Domains
frontendmasters.com is a domain
tech.frontendmasters.com is a sub domain
domains are just a high level wrapper on an IP address
DNS
- IP(Internet Protocol) Address - 127.0.0.1
- DNS(Domain Name System - “The internet phonebook”) - Maps IP addresses to domains
通常我们用tcp(transmission control protocol)/ip协议进行网络连接
www.jemyoung.com === 23.23.185.61
Exercise 1: Ping
ping google.com
1 | PING baidu.com (123.125.114.144): 56 data bytes |
DNS Caches
- Local cache
- LAN(Local Area Network) DNS server
- ISP(Internet Service Provider) DNS server
Security
DDoS(distributed denial of service)
Cache Poisoning
通过伪造dns指向的ip地址来使用户访问伪造的网站（用户访问jemyoung.com，本来应该指23.23.185.61，通过伪造dns信息来指向例如104.24.122.137来获取用户信息）
可以通过使用https来避免此类事情发生
Exercise 2: Traceroute
ping tells us is the server alive
traceroute tell us these are all the hops that your request took to get to a server.
Windows: tracert netflix.com
OSX: traceroute netflix.com
1 | traceroute: Warning: baidu.com has multiple addresses; using 220.181.57.216 |
ICMP - Internet Control Message Packet
Vim
Exercise 3: Introducing VIM
What is VIM(VI Improved)?
A ubiquitous text editor
Why should I care?
Because servers don’t have GUI’s
command line: vi
Exercise 4: Vim modes
VIM has three modes
- command mode
- insert mode
- last-line mode
VIM - insert mode
- press i
- type “Haha VIM is easy”
VIM Command Mode
u undo
control + r redo
dd delete the line
Exercise 5: Vim command mode
- type “Hello, world!”
- press enter
- type “Hello, class!”
- press esc
- type /Hello
- press enter
- press n to search forward
- press N to search backward
Vi Page Down
ctrl + fVi page down - Moves forward a pagectrl + d- Moves forward half a pageVi Page Up
ctrl + bVi page up - Moves back a pagectrl + u- Moves backward a half-pageVi Delete Line
ddVi delete line, regradless of the cursors position on the lineVi Save & Exit
:q- Vi exit - this will close Vi:wq- Vi save & exit:!q- Exits vi and discards and changes you mode
Editing and Saving in Vim
VIM - last-line mode
Quit without saving
- press esc
- press :
- type q
- :q!
Save and quit
- press esc
- press :
- type wq
Exercise 6: Editing & Saving in Vim
1 | <html> |
Servers
Exercise 7: Introducing Servers
Logging into a server
$ ssh student@138.197.253.87
SSH
SSH(Secure Socket Shell)
It’s a way of connecting to remote devices and there is two basic ways of doing that.
there is username/password which we just did, so student was the username, and there is also ssh key.
What’s wrong with logging in with a password?
easy passwords:
- 12345
- password
- qwerty
- qazwsx
- 12345678
A day in the life of a server
会看到一直会有用户试图破解登录
Public Key Authentication
We’re gonna use something called Public Key Authentication(公共密钥身份验证), instead of user name, password. Beaucase passwords are easily guessable even if you have a 21 character password, that’s not that secure.
your computer server
private key =================> public key
(secret) encrypted messages
<=================
Exercise 8: Creating an SSH Key
1 | cd ~/.ssh/ |
-t为指定加密类型，rsa为具体的加密类型
1 | Generating public/private rsa key pair. |
1 | less test_key.pub |
1 | less test_key |
Don’t lose your private key!
Setting up a VPS
VPS & Cloud Computing
servers
Web server
Database server
Storage server
Dedicated server
VPS(Virtual Private Server)
Advantages of the cloud
- flexible
- scalable
- on demand
Providers
- AWS
- Rackspace
- Digital Ocean
Exercise 9: Buy a VPS
1 | cat ~/.ssh/my_key.pub |
Exercise 10: Log onto your own server
1 | ssh -i ~/.ssh/my_key root@$YOUR_SERVER_IP |
Exercise 11: top
1 | top |
1 | top - 01:35:00 up 12 min, 1 user, load average: 0.00, 0.00, 0.00 |
1 | q |
1 | htop |
1 | CPU[ 0.0%] Tasks: 26, 12 thr; 1 running |
Exercise 12: Setting up your server
update software
1 | apt-get update |
create a new user
1 | adduser $USERNAME |
add user to sudo(super user do) group
1 | usermod -aG sudo $USERNAME |
switch user
1 | su $USERNAME |
make sure user has sudo access
1 | sudo cat /var/log/auth.log |
exit
1 | exit |
Logging In with SSH
In case of secure, we wanna use an SSH key instead of a password.
We can do it through SSH commands.
1 | cat ~/.ssh/my_key.pub | ssh $USERNAME@$SERVER_IP "mkdir -p ~/.ssh && cat >> ~/.ssh/authorized_keys" |
print the contents of my_key.pub and pipe the output to the next command
1 | cat ~/.ssh/my_key.pub | |
ssh into your server
1 | ssh $USERNAME@$SERVER_IP |
make a .ssh folder in your home directory if it doesn’t already exit
1 | mkdir -p ~/.ssh |
write the contents of the output to the file authorized_keys
1 | cat >> ~/.ssh/authorized_keys" |
log in
1 | ssh -i ~/.ssh/my_key.pub $USERNAME@$SERVER_IP |
Disable Root Access
1 | sudo vi /etc/ssh/sshd_config |
1 | PermitRootLogin no |
1 | sudo service ssh restart |
Getting a Domain Name
Buying a Domain
Associating the DNS
- Get the IP address of your VPS
- Add 2 A Records with your IP address
- @
- www
Using a CNAMEs
“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.”
Setting Up the Server
Introducing Unix Operating Systems
Two main types of server operating systems
- windows
- unix
Why Unix?
- ubiquity
- open-source
- (mostly) free
Common unix commands
- cd
- crontab
- ls
- mkdir
- pwd
- rm
Introducing Nginx
Nginx(engine X)
“A HTTP and reverse proxy server, a mail proxy server, and a generic TCP/UDP proxy server”
“一个HTTP和反向代理服务器，一个电子邮件代理服务器，和一个通用TCP/UDP代理服务器。”
- reverse proxy
- http server
Exercise 13: Nginx
install nginx
1 | sudo apt-get install nginx |
start nginx
1 | sudo service nginx start |
type your server’s IP address into a browser
Exercise 14: Nginx configuration
1 | sudo cat /etc/nginx/sites-available/default |
作者更推荐使用less
1 | sudo less /etc/nginx/sites-available/default |
cat dumps everything, less gives you more page by page.
jemyoung.com => 23.23.185.61 => Nginx/Apache
Installing Git, Node.js, and NPM
install git
1 | sudo apt-get install git |
install node and npm
1 | sudo apt-get install nodejs npm |
Making a Symbolic Link
symlink nodejs to node
新版本node似乎并不需要
1 | sudo ln -s /usr/bin/nodejs /usr/bin/node |
Creating a Web Directory
make a web directory(if it doesn’t already exit)
似乎也不需要
1 | sudo mkdir -p /var/www |
Changing Permisssions
change ownership of the web directory to the current user
1 | sudo chown -R $USER:$USER /var/www |
move into web directory
1 | cd /var/www |
Cloning a Git Repository
1 | git clone https://github.com/young/Dev-Ops-for-Frontend.git |
Rename directory and installing npm
remove directory to app/
1 | mv Dev-Ops-for-Frontend/ app/ |
move into to app directory
1 | cd app/ |
install npm packages
1 | npm i |
Starting the Server
start server
1 | node app.js |
type in your server’s IP address in a browser, port 3001.
Modifying the Server
Changing the Server Ports
1 | sudo vi /etc/nginx/sites-available/default |
1 | location / { |
restart nginx
1 | sudo service nginx restart |
start server
1 | node app.js |
html
move into a app directory
1 | cd /var/www/app/ |
make a new branch
1 | git checkout -b some_branch_name |
modify the html to you hearts content
1 | vi index.html |
Deploying Code
Deploying Code & Introduction Gulp
How do we build and deploy our app?
Gulp: a Javascript task runner
Similar:
- Grunt
- Broccoli
- Brunch
- Jake
Exercise 15: Creating Gulp Tasks
1 | gulp.task('default', function() { |
- Open gulpfile.js in VI. It’s in the root directory of the demo project.
- Fill in the gulp task clean-css so that any css files in the dist folder are removed.
- Add your new task to build task.
Create gulp tasks
- Create a gulp task to compile and concat your less files. The css should be placed in the dist folder.
- Add your new task to build task.
1 | // compile and concat less files to dist folder. |
1 | gulp.task('bulid', ['clean-js', 'clean-css', 'scripts', 'less']) |
Installing Gulp
install gulp
1 | npm i -g gulp |
Resolving EACCES permissions errors when installing packages globally
Keeping an app running
How do we keep our app up and running?
Forever- a process manager that keeps a process running indefinitely
Similar:
- Strong Loop Process Manager
- PM2
1 | pwd |
install forever globally
1 | npm i -g forever |
start forever
1 | forever start app.js |
stop forever
1 | forever stopall |
Log files
Logging files
create a log file for the forever process
1 | sudo mkdir /var/log/forever |
change owner to current user
1 | sudo chown -R $USER /var/log/forever |
start forever and log the output
1 | forever start app.js >> /var/log/forever/forever.log |
Exercise 16: Tailing a log file
1 | sudo tail -f /var/log/auth.log |
Putting it all together
Exercise 17: Putting it all together
package.json
1 | "scripts": { |