annotatAR lo-fi augmented reality for the mobile web

Week 14 MUP, NGINX, HTTPS

Deploying the Meteor app to a production webserver with NGINX and HTTPS, using Let’s Encrypt CA.

Create a Digital Ocean droplet for the app

  • create an ubuntu droplet
    • add your SSH key
    • networking -> add DNS records for the domain name & IP address of new droplet
  • regenerate password - will send an email
  • ssh root@ipaddress
  • change password
  • apt-get update
  • apt-get install nginx
  • apt-get install git

Obtain SSL Cert from Let’s Encrypt

Let’s Encrypt Docs

  • Install letsencrypt
  • cd to letsencrypt dir
  • Run ./letsencrypt-auto certonly —standalone-supported-challenges tls-sni-01 (to use port 443)
  • Follow prompts to obtain cert (you might have to temporarily disable other web services - such as node - if they use port 443)
  • Add the certs to your nginx server config (see below)
    • ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;
    • ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;

Set up nginx

  • sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example

  • sudo nano /etc/nginx/sites-available/example

Example nginx config file, from How To Deploy a Meteor.js Application on Ubuntu 14.04 with Nginx:

server_tokens off; # for security-by-obscurity: stop displaying nginx version

# this section is needed to proxy web-socket connections
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

# HTTP
server {
    listen 80 default_server; # if this is not a default server, remove "default_server"
    listen [::]:80 default_server ipv6only=on;

    root /usr/share/nginx/html; # root is irrelevant
    index index.html index.htm; # this is also irrelevant

    server_name annotatar.xyz; # the domain on which we want to host the application. Since we set "default_server" previously, nginx will answer all hosts anyway.


    # redirect non-SSL to SSL
    location / {
       rewrite     ^ https://$server_name$request_uri? permanent;
    }
}

# HTTPS server
server {
    listen 443 spdy; 
    ssl on;
    server_name annotatar.xyz; # this domain must match Common Name (CN) in the SSL certificate

    root html; # irrelevant
    index index.html; # irrelevant

    ssl_certificate /etc/letsencrypt/live/annotatar.xyz/fullchain.pem; # full path to SSL certificate and CA certificate concatenated together
    ssl_certificate_key /etc/letsencrypt/live/annotatar.xyz/privkey.pem; # full path to SSL key

    # performance enhancement for SSL
    ssl_stapling on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 5m;

    # safety enhancement to SSL: make sure we actually use a safe cipher
    ssl_prefer_server_ciphers on;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers 'ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES256-GCM-SHA384:kEDH+AESGCM:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA:ECDHE-ECDSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-DSS-AES256-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:ECDHE-RSA-RC4-SHA:ECDHE-ECDSA-RC4-SHA:RC4-SHA:HIGH:!aNULL:!eNULL:!EXPORT:!DES:!3DES:!MD5:!PSK';

    # config to enable HSTS(HTTP Strict Transport Security) https://developer.mozilla.org/en-US/docs/Security/HTTP_Strict_Transport_Security
    # to avoid ssl stripping https://en.wikipedia.org/wiki/SSL_stripping#SSL_stripping
    add_header Strict-Transport-Security "max-age=31536000;";

    # If your application is not compatible with IE <= 10, this will redirect visitors to a page advising a browser update
    # This works because IE 11 does not present itself as MSIE anymore
    if ($http_user_agent ~ "MSIE" ) {
        return 303 https://browser-update.org/update.html;
    }

    # pass all requests to Meteor
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade; # allow websockets
        proxy_set_header Connection $connection_upgrade;
        proxy_set_header X-Forwarded-For $remote_addr; # preserve client IP
        proxy_set_header X-Forward-Proto https;

        # this setting allows the browser to cache the application in a way compatible with Meteor
        # on every applicaiton update the name of CSS and JS file is different, so they can be cache infinitely (here: 30 days)
        # the root path (/) MUST NOT be cached
        if ($uri != '/') {
            expires 30d;
        }
   }
}
  • rm /etc/nginx/sites-enabled/default remove default config
  • ln -s /etc/nginx/sites-available/todos /etc/nginx/sites-enabled/todos enable vhost by linking config file
  • nginx -t test out the config
  • nginx -s reload depoloy – also service nginx startup

How to Create Self-signed Certs, if you dont want to use Let’s Encrypt

Note on NGINX config

** proxy_pass http://127.0.0.1:8080; :8080 —> this should match the mup.json env PORT (see below)

MUP

  • install MUP on local machine
  • mup init —in proj directory
  • edit mup.json config file — use password & ip address of droplet or ssh id
  • mup setup —- configures remote server, run this every time the config file changes
  • mup deploy —– run this to update app files on the remote server

Example mup.json:

{
  // Server authentication info
  "servers": [
    {
      "host": "104.236.3.79", // your droplet's IP
      "username": "root",
      //"password": “passwordyness"
      // or pem file (ssh based authentication)
      "pem": "~/.ssh/id_rsa"
    }
  ],

  // Install MongoDB in the server, does not destroy local MongoDB on future setup
  "setupMongo": true,

  // WARNING: Node.js is required! Only skip if you already have Node.js installed on server.
  "setupNode": true,

  // WARNING: If nodeVersion omitted will setup 0.10.36 by default. Do not use v, only version number.
  "nodeVersion": "0.10.40", // Meteor requires at least 0.10.40

  // Install PhantomJS in the server
  // "setupPhantom": true,

  // Show a progress bar during the upload of the bundle to the server.
  // Might cause an error in some rare cases if set to true, for instance in Shippable CI
  "enableUploadProgressBar": false,

  // Application name (No spaces)
  "appName": "annotatar",

  // Location of app (local directory)
  "app": ".",

  // Configure environment
  "env": {
    "PORT": 3000,
    "ROOT_URL": "http://104.236.3.79" // your droplet's IP -- don't use https, nginx will take care of routing
  },

  // Meteor Up checks if the app comes online just after the deployment
  // before mup checks that, it will wait for no. of seconds configured below
  "deployCheckWaitTime": 15
}

Next steps

Prior to deploying the app to a Digital Ocean server, I also implemented a Google Maps view of the Hashtags collection as part of the documentation page. With only a few days left, I’m working away at (mostly-stylistic) remaining tasks, and my presentation.

  • Normalizing age-til-die-off
  • Styling the documentation page
  • Using accelerometer data to change the tweet positions
  • Styling the tweets
  • Auto-selecting back-facing camera on the device