Dockerize app and add deployment to AWS. Closes #80

.gitlab-ci.yml

@@ -1,94 +1,55 @@
+image: docker:latest
+services:
+- docker:dind
+
 stages:
-  - deploy
+- build
+# - test
+- deploy
+
+variables:
+
+before_script:
+  - docker login -u gitlab-ci-token -p $CI_JOB_TOKEN registry.gitlab.com
+
+Build:
+  stage: build
+  script:
+    - docker build --pull -t $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME .
+    - docker push $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME
+
+# test1:
+#   stage: test
+#   script:
+#     - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME
+#     - docker run $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME /script/to/run/tests
+
+# test2:
+#   stage: test
+#   script:
+#     - docker pull $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME
+#     - docker run $CI_REGISTRY_IMAGE:$CI_COMMIT_REF_NAME /script/to/run/another/test
 
 Staging:
   stage: deploy
-  variables:
-    PORT: "8102"
-  script:
-    - sudo mkdir -p /opt/staging.webcaptioner.com /opt/staging.webcaptioner.com.previous
-    - sudo rm -rf /opt/staging.webcaptioner.com.previous/*
-    - sudo npm --prefix ./app install ./app
-    - sudo npm --prefix ./app/blog install ./app/blog
-    - sudo wget https://github.com/gohugoio/hugo/releases/download/v0.29/hugo_0.29_Linux-64bit.deb
-    - sudo dpkg -i hugo*.deb # install Hugo
-    - hugo version
-    - sudo gulp --gulpfile ./app/Gulpfile.js
-    - cd ./static-site
-    - sed -i.original "s/baseURL.*/baseURL=\"https:\/\/staging.webcaptioner.com\"/g" config.toml # set the baseURL according to this server
-    - sudo hugo
-    - cd .. # back to repo root
-    - sudo truncate -s 0 ./app/env/.env || true # clear env file
-    - echo "COMMIT_ID=$CI_COMMIT_SHA" | sudo tee --append ./app/env/.env
-    - echo "PORT=$PORT" | sudo tee --append ./app/env/.env
-    - echo "GITLAB_API_KEY=$GITLAB_API_KEY" | sudo tee --append ./app/env/.env
-    - echo "$GOOGLE_APPLICATION_CREDENTIALS_STAGING" | sudo tee ./app/env/google-application.credentials.json
-    - sudo mv /opt/staging.webcaptioner.com/* /opt/staging.webcaptioner.com.previous
-    - sudo mv ./* /opt/staging.webcaptioner.com
-    #- sudo cp -r ./* /opt/staging.webcaptioner.com
-#    - sudo export GOOGLE_APPLICATION_CREDENTIALS_STAGING="/opt/staging.webcaptioner.com/app/env/google-application.credentials.json"
-    #- sudo sed -i -- 's/${PORT}/'$PORT'/g' nginx/staging.webcaptioner.com-ssl.conf
-    #- sudo cp nginx/staging.webcaptioner.com.conf /etc/nginx/sites-enabled
-    #- sudo rm /etc/nginx/sites-enabled/staging.webcaptioner.com-ssl.conf || true # because they may be referencing not-yet-created certs from an incomplete previous deployment
-    #- sudo service nginx restart
-    #- sudo apt-get -yq install software-properties-common
-    #- sudo add-apt-repository ppa:certbot/certbot
-    #- sudo apt-get update
-    #- sudo apt-get -yq install python-certbot-nginx 
-    #- sudo certbot certonly --cert-name staging.webcaptioner.com --non-interactive --webroot -w /opt/staging.webcaptioner.com --domains staging.webcaptioner.com,www.staging.webcaptioner.com -m curt@example.com --agree-tos
-    #- sudo cp nginx/staging.webcaptioner.com-ssl.conf /etc/nginx/sites-enabled # now that certs are in place, add SSL config
-    - sudo npm install pm2 -g
-    - sudo pm2 delete webcaptioner-staging || true # ignore if nothing to delete
-    - sudo pm2 start /opt/staging.webcaptioner.com/app/bin/www -n webcaptioner-staging --update-env -f
-    - sudo service nginx restart
+  services:
+    - docker:dind
   environment:
     name: staging
-    url: https://staging.webcaptioner.com
-  when: always
+    url: https://staging.webcaptioner.tv
+  script:
+    - source scripts/deploy.sh
+#  when: manual
+  except:
+    - master
 
 Production:
   stage: deploy
-  variables:
-    PORT: "8101"
-  script:
-    - sudo mkdir -p /opt/webcaptioner.com /opt/webcaptioner.com.previous
-    - sudo rm -rf /opt/webcaptioner.com.previous/*
-    - sudo npm --prefix ./app install ./app
-    - sudo npm --prefix ./app/blog install ./app/blog
-    - sudo wget https://github.com/gohugoio/hugo/releases/download/v0.29/hugo_0.29_Linux-64bit.deb
-    - sudo dpkg -i hugo*.deb # install Hugo
-    - hugo version
-    - sudo gulp --gulpfile ./app/Gulpfile.js
-    - cd ./static-site
-    - sed -i.original "s/baseURL.*/baseURL=\"https:\/\/webcaptioner.com\"/g" config.toml # set the baseURL according to this server
-    - sudo hugo
-    - cd .. # back to repo root
-    - sudo truncate -s 0 ./app/env/.env || true # clear env file
-    - echo "COMMIT_ID=$CI_COMMIT_SHA" | sudo tee --append ./app/env/.env
-    - echo "PORT=$PORT" | sudo tee --append ./app/env/.env
-    - echo "GITLAB_API_KEY=$GITLAB_API_KEY" | sudo tee --append ./app/env/.env
-    - echo "$GOOGLE_APPLICATION_CREDENTIALS_STAGING" | sudo tee ./app/env/google-application.credentials.json
-    - sudo mv /opt/webcaptioner.com/* /opt/webcaptioner.com.previous
-    - sudo mv ./* /opt/webcaptioner.com
-    #- sudo cp -r ./* /opt/webcaptioner.com
-#    - sudo export GOOGLE_APPLICATION_CREDENTIALS_STAGING="/opt/webcaptioner.com/app/env/google-application.credentials.json"
-    #- sudo sed -i -- 's/${PORT}/'$PORT'/g' nginx/webcaptioner.com-ssl.conf
-    #- sudo cp nginx/webcaptioner.com.conf /etc/nginx/sites-enabled
-    #- sudo rm /etc/nginx/sites-enabled/webcaptioner.com-ssl.conf || true # because they may be referencing not-yet-created certs from an incomplete previous deployment
-    #- sudo service nginx restart
-    #- sudo apt-get -yq install software-properties-common
-    #- sudo add-apt-repository ppa:certbot/certbot
-    #- sudo apt-get update
-    #- sudo apt-get -yq install python-certbot-nginx 
-    #- sudo certbot certonly --cert-name webcaptioner.com --non-interactive --webroot -w /opt/webcaptioner.com --domains webcaptioner.com,www.webcaptioner.com -m curt@example.com --agree-tos
-    #- sudo cp nginx/webcaptioner.com-ssl.conf /etc/nginx/sites-enabled # now that certs are in place, add SSL config
-    - sudo npm install pm2 -g
-    - sudo pm2 delete webcaptioner-prod || true # ignore if nothing to delete
-    - sudo pm2 start /opt/webcaptioner.com/app/bin/www -n webcaptioner-prod --update-env -f
-    - sudo service nginx restart
+  services:
+    - docker:dind
   environment:
     name: production
     url: https://webcaptioner.com
+  script:
+    - source scripts/deploy.sh
   when: manual
-  only:
-    - master

Dockerfile

@@ -0,0 +1,30 @@
+FROM node:8.1.2
+
+# Install Hugo
+ADD https://github.com/gohugoio/hugo/releases/download/v0.31.1/hugo_0.31.1_Linux-64bit.tar.gz /tmp
+
+RUN mkdir -p /usr/src/app \
+    && mkdir -p /usr/src/static-site \
+    && tar -xf /tmp/hugo_0.31.1_Linux-64bit.tar.gz -C /tmp \
+    && mkdir -p /usr/local/sbin \
+    && mv /tmp/hugo /usr/local/sbin/hugo \
+    && rm -rf /tmp/hugo_0.31.1_linux_amd64
+
+# Install app dependencies
+COPY app/package.json /usr/src/app/
+
+WORKDIR /usr/src/app
+RUN npm install
+
+# Bundle app source
+# (do this after dependencies so that when 
+# code changes, we don't need to repeat that step)
+COPY ./app /usr/src/app
+
+# ENV GOOGLE_APPLICATION_CREDENTIALS=/usr/src/app/env/google-application-credentials.json
+
+# Copy static site files
+COPY static-site /usr/src/static-site
+
+EXPOSE 8080
+CMD ["bin/startup.sh"]

app/app.js

@@ -11,8 +11,26 @@ var env = require('node-env-file');
 var index = require('./routes/index');
 var translate = require('./routes/translate');
 var feedback = require('./routes/feedback');
+var wlbc = require('./routes/wlbc');
+var healthCheck = require('./routes/healthCheck');
 
 var app = express();
+app.use('/health-check', healthCheck);
+
+
+if (process.env.NODE_ENV !== 'dev') {
+  // Redirect http to https
+  app.use(function(req, res, next) {
+    if((!req.secure) && (req.get('X-Forwarded-Proto') !== 'https')) {
+      // We're not on HTTPS. AWS sets the X-Forwarded-Proto header from the load balancer.
+      res.redirect('https://' + req.get('Host') + req.url);
+    }
+    else {
+      // No redirect necessary; already on HTTPS
+      next();
+    }
+  });
+}
 
 // Get environment variables output by CI deploy script
 env(path.join(__dirname, 'env/.env'));
@@ -46,6 +64,7 @@ app.use('/static/img', express.static(path.join(__dirname, 'static/img')));
 app.use('/', index);
 app.use('/translate', translate);
 app.use('/feedback', feedback);
+app.use('/wlbc', wlbc);
 
 // catch 404 and forward to error handler
 app.use(function(req, res, next) {

app/bin/startup.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+npm run gulp
+ls /usr/src/static-site
+hugo --source="../static-site" --baseURL $HUGO_BASE_URL
+npm start

app/bin/www

@@ -10,14 +10,15 @@ var http = require('http');
 var path = require('path');
 var env = require('node-env-file');
 
+
 // Get environment variables output by CI deploy script
 env(path.join(__dirname, '../env/.env'));
 
 /**
  * Get port from environment and store in Express.
  */
 
-var port = normalizePort(process.env.PORT || '8888');
+var port = normalizePort(process.env.PORT || '8080');
 app.set('port', port);
 
 /**
@@ -26,6 +27,12 @@ app.set('port', port);
 
 var server = http.createServer(app);
 
+/**
+ * Websocket
+ */
+
+app.wss = require('../websockets/websockets')(server);
+
 /**
  * Listen on provided port, on all network interfaces.
  */

app/docker-compose.yml

@@ -5,4 +5,4 @@ services:
     volumes:
      - ./:/usr/src/app/
     ports:
-     - "8101:8101"
+     - "8101:8101"

app/env/.env

@@ -2,6 +2,6 @@
 # The settings in this file are dev deployment settings
 
 COMMIT_ID=dev
-PORT=8102
+PORT=8080
 GITLAB_API_KEY=9m_ZG49cznLcbSyg7F7A
 GOOGLE_APPLICATION_CREDENTIALS=/Users/curt/webcaptioner/app/env/Google-Application-Credentials-Web-Captioner-8c16b1385860.json

app/js/index.js

@@ -12,6 +12,16 @@ function clear_saved() {
     }
 }
 
+var webSocketPath;
+if (window.location.protocol === "https:") {
+    webSocketPath = "wss:";
+} else {
+    webSocketPath = "ws:";
+}
+webSocketPath += "//" + window.location.host;
+
+var socket = new WebSocket(webSocketPath);
+
 var chromeExtensionId = 'fckappdcgnijafmmjkcmicdidflhelfe'; // production
 // var chromeExtensionId = 'ipngpifbnlijigdmhaoiepdlfjpfnajd'; // local
 var recognizing = false;
@@ -320,6 +330,14 @@ function initRecognition() {
                 sendToVmixThrottled();
             }
         }
+
+        // Send to socket
+        if (socket) {
+            socket.send(JSON.stringify({
+                interim: interim_transcript,
+                final: final_transcript
+            }));
+        }
     };
 
     return recognition;
@@ -546,7 +564,7 @@ function levelCheckLoop() {
 
 
 $(function () {
-    if ($('#onboardingModal').length) {
+    if ($('#onboardingModal').length && !$('body[data-view-only-mode]').length) {
         $('#onboardingModal').modal();
     }
 

app/js/viewOnlyMode.js

@@ -0,0 +1,50 @@
+$(function(){
+    $('#viewOnlyZoom').on('click', function(){
+        if (parseFloat($('.captions').css('font-size').split('px')[0]) > 130) {
+            return;
+        }
+
+        $('.captions')
+            .css(
+                'font-size',
+                parseFloat($('.captions').css('font-size').split('px')[0]) * 1.1
+            )
+            .css('line-height','normal');
+    });
+    $('#viewOnlyShrink').on('click', function(){
+        if (parseFloat($('.captions').css('font-size').split('px')[0]) < 20) {
+            return;
+        }
+
+        $('.captions')
+            .css(
+                'font-size',
+                parseFloat($('.captions').css('font-size').split('px')[0]) * 0.9090909090909091
+            )
+            .css('line-height','normal');
+    });
+
+    if ($('body[data-view-only-mode]').length) {
+        // var permalink = $(body[data-view-only-mode]).length;
+        var webSocketPath;
+        if (window.location.protocol === "https:") {
+            webSocketPath = "wss:";
+        } else {
+            webSocketPath = "ws:";
+        }
+        webSocketPath += "//" + window.location.host;
+
+        var socket = new WebSocket(webSocketPath);
+
+        socket.addEventListener('message', function (event) {
+            var message = JSON.parse(event.data);
+            if (message.final) {
+                final_span.insertAdjacentHTML('beforeend', ' ' + message.final);
+                interim_span.innerHTML = '';
+            }
+            if (message.interim) {
+                interim_span.innerHTML = message.interim;
+            }
+        });
+    }
+});

app/package.json

@@ -3,7 +3,9 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "start": "node ./bin/www"
+    "start": "node ./bin/www",
+    "start-dev": "NODE_ENV=dev node ./bin/www",
+    "gulp": "gulp"
   },
   "dependencies": {
     "@google-cloud/translate": "^0.8.2",
@@ -29,6 +31,8 @@
     "morgan": "~1.8.1",
     "node-env-file": "^0.1.8",
     "request": "^2.81.0",
-    "serve-favicon": "~2.4.2"
+    "serve-favicon": "~2.4.2",
+    "socket.io": "^2.0.4",
+    "ws": "^3.3.1"
   }
 }

app/routes/healthCheck.js

@@ -0,0 +1,8 @@
+var express = require('express');
+var router = express.Router();
+
+router.get('/', function(req, res, next) {
+  res.sendStatus(200);
+});
+
+module.exports = router;