Docker swarm

Dockerfile

@@ -1,50 +1,45 @@
 FROM node:8.9
 
-ENV NODE_ENV production
-ENV API_URL http://api.quran.com:3000
-ENV SENTRY_KEY_CLIENT https://app.getsentry.com
-ENV SENTRY_KEY_SERVER https://app.getsentry.com
-
-ENV FACEBOOK_APP_ID appid
-ENV ONE_QURAN_URL https://one.quran.com
-ENV PORT 8000
-ENV NODE_PATH "./src"
-
-RUN apt-get -y update && apt-get -y install supervisor ssh rsync
-
-# logrotate
-RUN apt-get -y install logrotate
-COPY docker/supervisord.conf /etc/supervisor/supervisord.conf
-COPY docker/pm2.logrotate.conf /etc/logrotate.d/pm2
-RUN cp /etc/cron.daily/logrotate /etc/cron.hourly
-
-# cache npm install when package.json hasn't changed
-WORKDIR /tmp
-ADD package.json package.json
-RUN npm install --silent --no-progress
-RUN npm install -g pm2
+ARG node_env=production
 
-RUN mkdir /quran
-RUN cp -a /tmp/node_modules /quran
+ENV NODE_ENV $node_env
+ENV NODE_PATH ./src
 
+RUN mkdir /quran
 WORKDIR /quran
-ADD . /quran/
-
-RUN npm run build:client
-RUN npm run build:server
 
-# ssh keys
-WORKDIR /root
-RUN mv /quran/.ssh /root/
+# cache node_modules using docker layers
+# any change to package.json will rebuild modules
+ADD package.json /quran/package.json
+RUN if [ "$NODE_ENV" = "production" ]; then \
+      npm install --silent --production; \
+    else \
+      npm install; \
+    fi
 
-# upload js and css
-WORKDIR /quran/static/dist
-RUN rsync --update --progress -raz . [email protected]:zones/assets/
-
-# go back to /quran
-WORKDIR /quran
-
-ENV NODE_PATH "./dist"
+# you would typically mount ./src:/quran/src during dev
+ADD . /quran/
 
-EXPOSE 8000
-CMD ["supervisord", "--nodaemon", "-c", "/etc/supervisor/supervisord.conf"]
+ARG facebook_app_id
+ARG assets_url
+ARG fonts_url
+ARG public_api_url
+ARG one_quran_url
+ARG sentry_key_client
+
+ENV FACEBOOK_APP_ID $facebook_app_id
+ENV ASSETS_URL $assets_url
+ENV FONTS_URL $fonts_url
+ENV PUBLIC_API_URL $public_api_url
+ENV ONE_QURAN_URL $one_quran_url
+ENV SENTRY_KEY_CLIENT $sentry_key_client
+
+RUN if [ "$NODE_ENV" = "production" ]; then \
+      npm run build:client && \
+      npm run build:server; \
+    fi
+
+# port 8080 is needed in dev for the webpack live reload server
+EXPOSE 8000 8080
+
+CMD ["bin/server.sh"]

bin/server.js

@@ -1,4 +1,3 @@
-require('dotenv').load();
 require('app-module-path').addPath(__dirname);
 require('app-module-path').addPath('../src');
 require('isomorphic-fetch');

bin/server.prod.js

@@ -1,4 +1,3 @@
-require('dotenv').load();
 require('app-module-path').addPath(__dirname);
 require('app-module-path').addPath('../dist');
 require('isomorphic-fetch');

bin/server.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+if [ "$NODE_ENV" == "production" ]; then
+  node bin/server.prod.js
+else
+  # must add --host 0.0.0.0 to be accessible from outside docker container
+  # see https://github.com/webpack/webpack-dev-server/issues/183#issuecomment-128436301
+  node --expose-gc \
+    ./node_modules/webpack-dev-server/bin/webpack-dev-server.js \
+    --config ./webpack/dev.config.js \
+    --host 0.0.0.0 --progress  &
+  node --expose-gc ./bin/server.js
+fi

docker-compose.production.yml

@@ -0,0 +1,23 @@
+version: '3'
+services:
+  frontend:
+    build:
+      context: .
+      args:
+        - node_env=production
+        - facebook_app_id=1557596491207315
+        - assets_url=//azurequrancom-a79c.kxcdn.com/
+        - fonts_url=//azurequrancom-a79c.kxcdn.com/
+        - public_api_url=//azure.quran.com
+        - one_quran_url=//one.quran.com
+        - sentry_key_client=https://[email protected]/271092
+    image: frontend-prod:latest
+    environment:
+      # - INTERNAL_API_URL=http://api.quran.com
+      - INTERNAL_API_URL=http://api:3000
+      - SENTRY_KEY_SERVER=
+      - PORT=8000
+      - NODE_PATH=./dist
+    ports:
+      - "8000:8000"
+

docker-compose.yml

@@ -0,0 +1,29 @@
+version: '3'
+services:
+  frontend:
+    build:
+      context: .
+      args:
+        - node_env=development
+        - facebook_app_id=appid
+        - assets_url=/public/
+        - fonts_url=//localhost:3100/
+        - public_api_url=http://api.quran.com
+        - one_quran_url=https://one.quran.com
+        - sentry_key_client=https://app.getsentry.com
+    ports:
+      - "8080:8080"
+      - "8000:8000"
+    # volumes:
+    #  - ./src:/quran/src
+    environment:
+      - INTERNAL_API_URL=http://api.quran.com
+      # - INTERNAL_API_URL=http://api:3000
+      # - SEGMENTS_KEY=
+      # - SENTRY_KEY_CLIENT=https://app.getsentry.com
+      # - SENTRY_KEY_SERVER=https://app.getsentry.com
+      - PORT=8000
+  fonts:
+    image: quran/fonts:latest
+    ports:
+      - "3100:3000"

docker/README.md

@@ -0,0 +1,17 @@
+# Docker instructions
+
+## Development
+
+To build for development:
+
+    docker-compose up
+
+Then navigate to `http://localhost:8000`
+
+## Production
+
+To build for production:
+
+    docker-compose -f docker-compose.production.yml build
+
+Then tag and push the resulting `frontend-prod:latest` image to a docker registry.

package.json

@@ -84,7 +84,6 @@
     "css-loader": "0.26.1",
     "cssnano": "3.10.0",
     "debug": "2.2.0",
-    "dotenv": "2.0.0",
     "errorhandler": "1.4.3",
     "express": "4.14.0",
     "express-state": "1.4.0",

src/config.js

@@ -44,11 +44,13 @@ const locales = {
 const config = {
   host: process.env.HOST || 'localhost',
   port: process.env.PORT,
-  api: process.env.API_URL,
+  apiInternal: process.env.INTERNAL_API_URL,
+  apiPublic: process.env.PUBLIC_API_URL,
   oneQuran: process.env.ONE_QURAN_URL,
   sentryClient: process.env.SENTRY_KEY_CLIENT,
   sentryServer: process.env.SENTRY_KEY_SERVER,
   facebookAppId: process.env.FACEBOOK_APP_ID,
+  assetsURL: process.env.ASSETS_URL,
   fontsURL: process.env.FONTS_URL,
   locales,
   defaultLocale: 'en',
@@ -303,12 +305,12 @@ const config = {
         },
         {
           rel: 'preconnect',
-          href: 'https://quran-1f14.kxcdn.com',
+          href: process.env.ASSETS_URL,
           crossOrigin: ''
         },
         {
           rel: 'preconnect',
-          href: 'https://assets-1f14.kxcdn.com',
+          href: process.env.FONTS_URL,
           crossOrigin: ''
         },
         ...Object.keys(locales).map(key => ({

src/helpers/ApiClient.js

@@ -16,14 +16,14 @@ const formatUrl = (path) => {
       return config.oneQuran + adjustedPath.replace('/onequran', '');
     }
 
-    return `${config.api}${adjustedPath}`;
+    return `${config.apiInternal}${adjustedPath}`;
   }
 
   if (adjustedPath.startsWith('/onequran')) {
     return adjustedPath;
   }
 
-  return `/api${adjustedPath}`;
+  return `${config.apiPublic}${adjustedPath}`;
 };
 
 class ApiClient {

src/helpers/buildFontFaces.js

@@ -1,10 +1,12 @@
 /* eslint-disable max-len */
 
+import config from '../config';
+
 export const fontFaceStyle = fontClassName => (
   `@font-face {font-family: '${fontClassName}';
-  src: url('//quran-1f14.kxcdn.com/fonts/compressed/eot/${fontClassName}.eot?#iefix') format('embedded-opentype'),
-  url('//quran-1f14.kxcdn.com/fonts/ttf/${fontClassName}.ttf') format('truetype'),
-  url('//quran-1f14.kxcdn.com/fonts/woff/${fontClassName}.woff?-snx2rh') format('woff');}
+  src: url('${config.fontsURL}fonts/compressed/eot/${fontClassName}.eot?#iefix') format('embedded-opentype'),
+  url('${config.fontsURL}fonts/ttf/${fontClassName}.ttf') format('truetype'),
+  url('${config.fontsURL}fonts/woff/${fontClassName}.woff?-snx2rh') format('woff');}
   .${fontClassName} {font-family: '${fontClassName}';}
   .${fontClassName} {display: none;}`
 );
@@ -25,9 +27,9 @@ export function createFontFacesArray(verses) {
       fontFaces.push(font);
       fontFacesArray.push(
         `@font-face {font-family: '${font}';
-        src: url('//quran-1f14.kxcdn.com/fonts/compressed/eot/${font}.eot?#iefix') format('embedded-opentype'),
-        url('//quran-1f14.kxcdn.com/fonts/ttf/${font}.ttf') format('truetype'),
-        url('//quran-1f14.kxcdn.com/fonts/woff/${font}.woff?-snx2rh') format('woff');}
+        src: url('${config.fontsURL}fonts/compressed/eot/${font}.eot?#iefix') format('embedded-opentype'),
+        url('${config.fontsURL}fonts/ttf/${font}.ttf') format('truetype'),
+        url('${config.fontsURL}fonts/woff/${font}.woff?-snx2rh') format('woff');}
         .${font} {font-family: '${font}';}`
       );
     }