Full Stack

for

Frontend Engineers 2

Jem Young

Senior Software Engineer

​

Serious Business

• Slides
• jemyoung.com/fsfe2
• Part 1
• https://frontendmasters.com/courses/full-stack/
• jemyoung.com/fsfe

​

Things you’ll learn

• Learn how to use Node and Bash to create shell scripts
• Learn advanced Nginx configuration
• Common server vulnerabilities and how to mitigate them
• How to add HTTPS to your server
• Understand databases
• Containers and automating deployments

Full Stack For Frontend Recap

Recap

• How the internet works

Recap

• How the internet works

• Command line basics

ping

traceroute

vi

Recap

• Command line basics

• How the internet works

• How to create and manage a web server

Recap

• Build a basic web page

• Command line basics

• How the internet works

• How to create and manage a web server

• Create a deploy system for a Node app

Why full stack?

Part 1

Server setup

• Create a server
• Basic setup
• Adding nodejs

1. Create a new Ubuntu server
1. Use Ubuntu 16.04.x
2. Be sure to use an SSH key
2. Point domain to new server
3. Log into server as root

Create a server

Server setup

4. Update server

5. Add a new user ‘test’

6. Grant ‘test’ sudo access

7. Switch to ‘test’ user

Server setup - Node

update apt repo for nodejs

$ curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

​

https://explainshell.com/explain?cmd=curl+-sL

Server setup - Node

check npm directory

install nodejs and npm

$ npm config get prefix

$ sudo apt install nodejs

If the npm directory is not /usr/local, follow instructions here

WARNING

Server setup - Node

https://docs.npmjs.com/getting-started/fixing-npm-permissions#option-2-change-npms-default-directory-to-another-directory

Server setup - Node

install forever module

$ npm i -g forever

Server setup

Clone repo

$ git clone https://github.com/young/fsfe2.git

$ cd /var/www/

$ cd fsfe2

Change working directory

Change working directory

$ npm i

Install modules

Part 2

Server security

• Controlling access
• Securing applications

Server security

Control access

• Strong authentication
• firewalls
• user/file permissions�

Secure your applications

• Keep software up to date
• Limit application use

Server security - add ssh key

create a new directory

paste public key into authorized_keys file

$ mkdir -p ~/.ssh

$ vi ~/.ssh/authorized_keys

Be sure to test logging in with your new user

WARNING

Server security

• Add a password for root
• use the passwd command
• Disable root login
• Disable password login

​

Server security - firewalls

nmap

Exercise

nmap

$ nmap YOUR_SERVER_IP

Tales from real life

Server security - iptables

$ sudo iptables -A INPUT -p tcp --dport 22 -j ACCEPT

-A append rule

-p protocol (tcp, icmp)

--dport destination port

-j jump (DROP, REJECT, ACCEPT, LOG)

Creating iptable rules

Create an iptable rule to block all outgoing HTTP connections

Creating iptable rules

iptables -p tcp --dport 80 -j REJECT

Creating iptable rules

Create an iptable rule to only allow icmp connections on port 892 from the IP address 192.0.0.1

Creating iptable rules

iptables -A INPUT -s 192.0.0.1 -p icmp --dport 892 -j ACCEPT

There has to be a better way!

Server security - ufw

ufw - uncomplicated firewall

$ sudo ufw allow ssh

$ sudo ufw enable

Create ufw rules

Create a ufw rule to block all outgoing HTTP connections

Creating ufw rules

ufw reject out http

Server security - firewalls

Server security - firewalls

Automatic Updates

Server security - update software

$ sudo apt install unattended-upgrades

Server security - update software

/etc/apt/apt.conf.d/20auto-upgrades

https://wiki.debian.org/UnattendedUpgrades

Server security - update software

/etc/apt/apt.conf.d/50unattended-upgrades

Fail2ban

Exercise

Fail2ban

$ sudo apt install fail2ban

$ sudo cp /etc/fail2ban/jail.conf /etc/fail2ban/jail.local

​

Copy jail file

$ sudo vi /etc/fail2ban/jail.local

​

Install fail2ban

If you misconfigure fail2ban, you can lock yourself out of your server!

WARNING

Part 3

advanced shells

• Finding Things
• Redirection Operators
• Shells
• Shell Scripts

search file names

search file contents

Finding things

grep

find

Finding things

find

find

directory

option

file/folder

useful options

Finding things

find

• -name
• -type
• -empty
• -executable
• -writable

https://www.lifewire.com/uses-of-linux-command-find-2201100#billboard3-sticky_1-0

find

Exercise

Find all log files in /var/log/

$ find /var/log/ -type f -name *.log

Find all empty files in /etc

$ find /etc -type f -empty

Find all directories with the word log

$ find / -type d -name log

Searching contents

search inside gzip file

grep

grep - global regular expression print

$ grep -i ‘jem’ /var/www

grep

options

search

expression

directory

$ zgrep FILE

Find running node processes

ps aux | grep node

Redirection

Redirection operators

• |
• read from stdout
• >
• write stdout to file
• >>
• append stdout to file
• <
• read from stdin
• 2>
• read from stderr

Write to file

ps aux > foo

What does this do?

foo < bar > baz

Shells

What is a shell?

What is a shell?

show current shell

shell

application

kernel

$ echo $0

Changing shells

Exercise

Changing shells

list acceptable shells to change to

change shell to ‘sh’

login into new shell to see the change

change shell to ‘bash’

$ cat /etc/shells

$ chsh -s /bin/sh

$ su $USERNAME

$ chsh -s /bin/bash

Differences between shells

https://en.wikipedia.org/wiki/Comparison_of_command_shells

Shell scripting

Why shell scripting

• simple
• portable

​

Bash scripting

Exercise

Shell scripting - bash

$ vi load.sh

#!/bin/sh

cat /proc/loadavg | awk '{print $1"-"$2"-"$3}'

​

load.sh

Get load average

cat /proc/loadavg

awk '{print $1"-"$2"-"$3}'

Extract the 1st, 2nd, and 3rd columns of data

load average

1 minute

5 minute

15 minutes

chmod

$ sudo chmod 755 ./load.sh

Make executable

chmod

https://isabelcastillo.com/linux-chmod-permissions-cheat-sheet

Creating a shell script with Node

Exercise

Node shell scripting - setup

create a workspace folder

move into workspace folder

create index.js

$ mkdir ~/workspace

$ cd ~/workspace

$ touch index.js

Node shell scripting - setup

initialize project

add reference to script

$ npm init

$ vi package.json

Node shell scripting

$ vi index.js

#!/usr/bin/node

​

const exec = require('child_process').exec;

const stat = exec(`cat /proc/loadavg | awk '{print $1"-"$2"-"$3}'`);

​

​

stat.stdout.on('data', function(data) {

console.log(data);

});

​

​

https://frontendmasters.com/courses/bash-vim-regex/

Part 4

HTTPS

• Nginx setup
• Why HTTPS
• Getting a certificate
• Cron

​

Nginx setup

• Install nginx
• Proxy traffic to node server
• Add domain name
• Open port 443
• Reload nginx

​

Nginx setup - adding domain name

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

server_name jem.party www.jem.party;

Add domain name to nginx conf

Why HTTPS

• Security
• Technology
• Service Workers
• Web Bluetooth
• HTTP/2

​

https://github.com/diafygi/acme-tiny

https://certbot.eff.org/

HTTPS

$ sudo add-apt-repository ppa:certbot/certbot

$ sudo apt update

$ sudo apt install python-certbot-nginx

Add the certbot repository

Pull in new repository information

Install certbot with nginx plugin

HTTPS

$ sudo certbot --nginx

Use certbot to get certificate

$ sudo certbot renew --dry-run

Test auto renew

How to do we run periodic tasks?

hour

minute

day of month

month

day of week

command to execute

https://crontab.guru/

cron

Exercise

cron

Open crontab for editing

$ sudo crontab -e

Renew certificate every week at 12pm on Monday

Part 5

Nginx tuning

• gzip
• Websockets
• http/2

Nginx - gzip

Nginx - gzip

/etc/nginx/nginx.conf

Nginx - gzip

increase compression level

gzip_comp_level 6

http://nginx.org/en/docs/http/ngx_http_gzip_module.html

/var/etc/nginx/nginx.conf

Expires headers

Nginx - expires headers

Nginx - expires headers

expire static assets in 30 days

location /static/ {

expires 30d;

proxy_pass http://127.0.0.1:3001/static/;

}

/etc/nginx/sites-available/default

Nginx - expires headers

caching

Nginx - cache

proxy_cache_path /tmp/nginx levels=1:2 keys_zone=slowfile_cache:10m inactive=60m use_temp_path=off;

​

​

proxy_cache_key "$request_uri";

/etc/nginx/sites-available/default

Nginx - cache

location /slowfile {

proxy_cache_valid 1m;

proxy_ignore_headers Cache-Control;

add_header X-Proxy-Cache $upstream_cache_status;

proxy_cache slowfile_cache;

proxy_pass http://127.0.0.1:3001/slowfile;

}

​

/etc/nginx/sites-available/default

websockets

Nginx - websockets

location / {

proxy_set_header Upgrade $http_upgrade;

proxy_set_header Connection "upgrade";

​

proxy_pass http://127.0.0.1:3001;

}

/etc/nginx/sites-available/default

http/2

Nginx - http/2

listen 443 http2 ssl; # managed by Certbot

/etc/nginx/sites-available/default

https://http2.akamai.com/demo

Nginx - http/2

Redirect

Redirect request to new url

location /help {

return 301 https://developer.mozilla.org/en-US/;

}

​

/etc/nginx/sites-available/default

Part 6

databases

• Database types
• MySQL

​

Database types

relational

non-relational

SQL

NoSQL

MySQL

Exercise

MySQL

Install mysql

$ sudo apt install mysql-server

$ mysql_secure_installation

$ mysql -u root -p

Run setup script

Login as root

Database tips

1. Back up your database
2. Use a strong root password
3. Don’t expose the database outside the network
4. Sanitize your SQL
5. Back up your database

https://github.com/mysqljs/mysql

Part 7

Containers and more

• Containers
• Orchestration
• Automating deployments

​

Containers

Dedicated Server

VPS

VPS

VPS

VPS

Containers

the cloud

Containers

Dedicated Server

VPS

node

mysql

nginx

• shared resources
• no OS
• fast deployment

Containers

Containers

Installing Postgres on Docker

https://www.linux.com/news/8-open-source-CONTAINER-ORCHESTRATION-TOOLS-KNOW

Automating deployments

Automating deployments

HOORAY!!

Links

https://frontendmasters.com/courses/bash-vim-regex/

https://frontendmasters.com/courses/full-stack/

Part 1

Bash course