setup HTTPS(SSL) on local development environment (Ubuntu)

Edit hosts file

location: /etc/hosts

# e.g:
# add a local domain
127.0.0.1 xllily.com

Install nginx

apt-get update
apt-get install nginx

# create folder 'ssl' for subsequent use
cd /etc/nginx
mkdir ssl

Control:

nginx -s [ stop | quit | reopen | reload ]

# or

sudo systemctl [ stop | start | restart | reload | disable ] nginx

Generate self-signed TLS certificate using OpenSSL

A great guy wrote a bash script

loganstellway/self-signed-ssl

Just execute the script and pass in the options

Options:

• -c | --country

  Country Name (2 letter code)

• -s | --state

  State or Province Name (full name)

• -l | --locality

  Locality Name (eg, city)

• -o | --organization

  Organization Name (eg, company)

• -u | --unit

  Organizational Unit Name (eg, section)

• -n | --common-name

  Common Name (e.g. server FQDN or YOUR name)

• -e | --email

  Email Address

• -p | --path

  Path to output generated keys

• -h | --help

  Display help and exit

• -v | --verbose
  Verbose output

Usage:

# Generate the certificate in the previously created directory 'ssl'

# e.g
$ sudo ./self-signed-tls -c=CN -s=Shang-Hai -l=shanghai -o=xllily -u=dev -n=xllily.com -e=xllily@email.com -p=/etc/nginx/ssl/

Import the crt to the browser and restart

Chrome:

Setting

-> (Advanced) Manage Certificates

-> toggle to the 'Authorities'(Tab)

-> Import

# eg: import the
/etc/nginx/ssl/xllily.com_CA.pem

-> Restart the browser

Configure nginx and reload

Edit /etc/nginx/nginx.conf

# ...

http {
# ...
	server {
		listen 80;
		listen 443 ssl http2;
		server_name xllily.com;
		ssl_certificate /etc/nginx/ssl/xllily.com.crt;
		ssl_certificate_key /etc/nginx/ssl/xllily.com.key;
		location / {
			root html;
			index index.html index.htm;
            # you can open the proxy
            # proxy_pass http://....;
		}
	}
# ...
}

# ...

Done