\n|
<\/p>\n 1<\/p>\n 2<\/p>\n 3<\/p>\n 4<\/p>\n 5<\/p>\n 6<\/p>\n 7<\/p>\n 8<\/p>\n 9<\/p>\n 10<\/p>\n 11<\/p>\n 12<\/p>\n 13<\/p>\n 14<\/p>\n 15<\/p>\n 16<\/p>\n 17<\/p>\n 18<\/p>\n 19<\/p>\n 20<\/p>\n 21<\/p>\n
\n <\/td>\n
<\/p>\n | \n <!DOCTYPE html><\/p>\n <html lang=”en”><\/p>\n <head><\/p>\n <meta charset=”utf-8″><\/p>\n <meta http-equiv=”X-UA-Compatible” content=”IE=edge”><\/p>\n <meta name=”viewport” content=”width=device-width,initial-scale=1.0″><\/p>\n <meta property=”DOOM_STATE_SERVICE_URL” content=”http:\/\/localhost:8081\/” \/><\/p>\n <meta property=”DOOM_ENGINE_SERVICE_URL” content=”http:\/\/localhost:8082\/” \/><\/p>\n <link rel=”icon” href=”.\/favicon.ico”><\/p>\n <title>frontend<\/title><\/p>\n <\/head><\/p>\n <body><\/p>\n <noscript><\/p>\n <strong>We’re sorry but frontend doesn’t work properly without JavaScript enabled. Please enable it to continue.<\/strong><\/p>\n <\/noscript><\/p>\n <div id=”app”><\/div><\/p>\n <!– built files will be auto injected –><\/p>\n <\/body><\/p>\n <\/html><\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n For reading configuration values from meta tags (and other sources), I wrote a simple Javascript module (\u201c\/src\/config.loader.js\u201d):<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n|
<\/p>\n 1<\/p>\n 2<\/p>\n 3<\/p>\n 4<\/p>\n 5<\/p>\n 6<\/p>\n 7<\/p>\n 8<\/p>\n 9<\/p>\n 10<\/p>\n 11<\/p>\n 12<\/p>\n 13<\/p>\n 14<\/p>\n 15<\/p>\n 16<\/p>\n 17<\/p>\n 18<\/p>\n 19<\/p>\n 20<\/p>\n 21<\/p>\n 22<\/p>\n 23<\/p>\n 24<\/p>\n 25<\/p>\n 26<\/p>\n 27<\/p>\n 28<\/p>\n 29<\/p>\n 30<\/p>\n 31<\/p>\n
\n <\/td>\n
<\/p>\n | \n \/**<\/p>\n * Get config value with precedence:<\/p>\n * – check `process.env`<\/p>\n * – check current web page meta tags<\/p>\n * @param key Configuration key name<\/p>\n *\/<\/p>\n function getConfigValue (key) {<\/p>\n let value = null<\/p>\n if (process.env && process.env[`$`] !== undefined) {<\/p>\n \/\/ get env var value<\/p>\n value = process.env[`$`]<\/p>\n } else {<\/p>\n \/\/ get value from meta tag<\/p>\n return getMetaValue(key)<\/p>\n }<\/p>\n return value<\/p>\n }<\/p>\n \/**<\/p>\n * Get value from HTML meta tag<\/p>\n *\/<\/p>\n function getMetaValue (key) {<\/p>\n let value = null<\/p>\n const node = document.querySelector(`meta[property=$]`)<\/p>\n if (node !== null) {<\/p>\n value = node.content<\/p>\n }<\/p>\n return value<\/p>\n }<\/p>\n export default { getConfigValue, getMetaValue }<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n This module will read configuration \u201ckeys\u201d by looking them up in the available environment variables (\u201cprocess.env\u201d) first, so that configuration can be overridden with environment variables when developing locally (webpack dev server) and then the current document meta tags.<\/p>\n I also abstracted the configuration layer by adding a \u201csrc\/config\/index.js\u201d that exports an object with the proper values:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n
\n
\n <\/td>\n
<\/p>\n | \n import loader from ‘.\/loader’<\/p>\n export default {<\/p>\n DOOM_STATE_SERVICE_URL: loader.getConfigValue(‘DOOM_STATE_SERVICE_URL’),<\/p>\n DOOM_ENGINE_SERVICE_URL: loader.getConfigValue(‘DOOM_ENGINE_SERVICE_URL’)<\/p>\n }<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n which can then be utilised in the main application by importing the \u201csrc\/config\u201d module and accessing the configuration keys transparently:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n
\n
\n <\/td>\n
<\/p>\n | \n import config from ‘.\/config’<\/p>\n console.log(config.DOOM_ENGINE_SERVICE_URL)<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n There is some room for improvement in the current code as it not DRY (list of required configuration variables is duplicated in several places in the project) and I\u2019ve considered writing a simple Javascript package to simplify this approach as I\u2019m not aware if something already exists. Writing the Docker & Docker Compose files The Dockerfile for the SPA adds source-code to the container to the \u2018\/app\u2019 directory, installs dependencies and runs a production webpack build (\u201cNODE_ENV=production\u201d). Assets bundles are written to the \u201c\/app\/dist\u201d directory of the image:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n
\n
\n <\/td>\n
<\/p>\n | \n FROM node:8.11.4-jessie<\/p>\n RUN mkdir \/app<\/p>\n WORKDIR \/app<\/p>\n COPY package.json .<\/p>\n RUN npm install<\/p>\n COPY . .<\/p>\n ENV NODE_ENV production<\/p>\n RUN npm run build<\/p>\n CMD npm run dev<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n The docker image contains a Node.js script (\u201c\/app\/bin\/rewrite-config.js\u201d) which copies \u201c\/app\/dist\u201d assets to another target directory before rewriting the configuration. Assets will be served by NGINX and therefore copied to a directory that NGINX can serve, in this case, a shared (persistent) volume. Source and destination directories can be defined through container environment variables:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n|
<\/p>\n 1<\/p>\n 2<\/p>\n 3<\/p>\n 4<\/p>\n 5<\/p>\n 6<\/p>\n 7<\/p>\n 8<\/p>\n 9<\/p>\n 10<\/p>\n 11<\/p>\n 12<\/p>\n 13<\/p>\n 14<\/p>\n 15<\/p>\n 16<\/p>\n 17<\/p>\n 18<\/p>\n 19<\/p>\n 20<\/p>\n 21<\/p>\n 22<\/p>\n 23<\/p>\n 24<\/p>\n 25<\/p>\n 26<\/p>\n 27<\/p>\n 28<\/p>\n 29<\/p>\n 30<\/p>\n 31<\/p>\n 32<\/p>\n 33<\/p>\n 34<\/p>\n 35<\/p>\n 36<\/p>\n 37<\/p>\n 38<\/p>\n 39<\/p>\n 40<\/p>\n 41<\/p>\n 42<\/p>\n 43<\/p>\n 44<\/p>\n 45<\/p>\n 46<\/p>\n 47<\/p>\n 48<\/p>\n 49<\/p>\n 50<\/p>\n 51<\/p>\n 52<\/p>\n 53<\/p>\n 54<\/p>\n 55<\/p>\n 56<\/p>\n 57<\/p>\n 58<\/p>\n 59<\/p>\n
\n <\/td>\n
<\/p>\n | \n #!\/usr\/bin\/env node<\/p>\n const cheerio = require(‘cheerio’)<\/p>\n const copy = require(‘recursive-copy’)<\/p>\n const fs = require(‘fs’)<\/p>\n const rimraf = require(‘rimraf’)<\/p>\n const DIST_DIR = process.env.DIST_DIR<\/p>\n const WWW_DIR = process.env.WWW_DIR<\/p>\n const DOOM_STATE_SERVICE_URL = process.env.DOOM_STATE_SERVICE_URL<\/p>\n const DOOM_ENGINE_SERVICE_URL = process.env.DOOM_ENGINE_SERVICE_URL<\/p>\n \/\/ – Delete existing files from public directory<\/p>\n \/\/ – Copy `dist` assets to public directory<\/p>\n \/\/ – Rewrite config meta tags on public directory `index.html`<\/p>\n rimraf(WWW_DIR + ‘\/*’, {}, function() {<\/p>\n copy(`$`, `$`, , function(error, results) {<\/p>\n if (error) {<\/p>\n console.error(‘Copy failed: ‘ + error);<\/p>\n } else {<\/p>\n console.info(‘Copied ‘ + results.length + ‘ files’);<\/p>\n rewriteIndexHTML(`$\/index.html`, {<\/p>\n DOOM_STATE_SERVICE_URL: DOOM_STATE_SERVICE_URL,<\/p>\n DOOM_ENGINE_SERVICE_URL: DOOM_ENGINE_SERVICE_URL<\/p>\n })<\/p>\n }<\/p>\n });<\/p>\n })<\/p>\n \/**<\/p>\n * Rewrite meta tag config values in “index.html”.<\/p>\n * @param file<\/p>\n * @param values<\/p>\n *\/<\/p>\n function rewriteIndexHTML(file, values) {<\/p>\n console.info(`Reading ‘$’`)<\/p>\n fs.readFile(file, ‘utf8’, function (error, data) {<\/p>\n if (!error) {<\/p>\n const $ = cheerio.load(data)<\/p>\n console.info(`Rewriting values ‘$’`)<\/p>\n for (let [key, value] of Object.entries(values)) {<\/p>\n console.log(key, value);<\/p>\n $(`[property=$]`).attr(“content”, value);<\/p>\n }<\/p>\n fs.writeFile(file, $.html(), function (error) {<\/p>\n if (!error) {<\/p>\n console.info(`Wrote ‘$’`)<\/p>\n } else {<\/p>\n console.error(error)<\/p>\n }<\/p>\n });<\/p>\n } else {<\/p>\n console.error(error)<\/p>\n }<\/p>\n });<\/p>\n }<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n The script utilises CheerioJS to read the \u201cindex.html\u201d into memory, replaces values of meta tags according to environment variables and overwrites \u201cindex.html\u201d. Although \u201csed\u201d would have been sufficient for search & replace, I chose CherioJS as a more reliable solution that also allows expanding into more complex solutions like script injections.<\/p>\n Deployment with Kubernetes<\/h2>\nLet\u2019s jump into the Kubernetes Deployment manifest:<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n \n\n|
<\/p>\n 1<\/p>\n 2<\/p>\n 3<\/p>\n 4<\/p>\n 5<\/p>\n 6<\/p>\n 7<\/p>\n 8<\/p>\n 9<\/p>\n 10<\/p>\n 11<\/p>\n 12<\/p>\n 13<\/p>\n 14<\/p>\n 15<\/p>\n 16<\/p>\n 17<\/p>\n 18<\/p>\n 19<\/p>\n 20<\/p>\n 21<\/p>\n 22<\/p>\n 23<\/p>\n 24<\/p>\n 25<\/p>\n 26<\/p>\n 27<\/p>\n 28<\/p>\n 29<\/p>\n 30<\/p>\n 31<\/p>\n 32<\/p>\n 33<\/p>\n 34<\/p>\n 35<\/p>\n 36<\/p>\n 37<\/p>\n 38<\/p>\n 39<\/p>\n 40<\/p>\n 41<\/p>\n 42<\/p>\n 43<\/p>\n 44<\/p>\n 45<\/p>\n 46<\/p>\n 47<\/p>\n 48<\/p>\n 49<\/p>\n 50<\/p>\n
\n <\/td>\n
<\/p>\n | \n —<\/p>\n # Source: doom-client\/templates\/deployment.yaml<\/p>\n apiVersion: apps\/v1beta2<\/p>\n kind: Deployment<\/p>\n metadata:<\/p>\n name: doom-client<\/p>\n labels:<\/p>\n name: doom-client<\/p>\n spec:<\/p>\n replicas: 1<\/p>\n selector:<\/p>\n matchLabels:<\/p>\n name: doom-client<\/p>\n template:<\/p>\n metadata:<\/p>\n labels:<\/p>\n name: doom-client<\/p>\n spec:<\/p>\n initContainers:<\/p>\n – name: doom-client<\/p>\n image: “doom-client:latest”<\/p>\n command: [“\/app\/bin\/rewrite-config.js”]<\/p>\n imagePullPolicy: IfNotPresent<\/p>\n env:<\/p>\n – name: DIST_DIR<\/p>\n value: “\/app\/dist”<\/p>\n – name: WWW_DIR<\/p>\n value: “\/tmp\/www”<\/p>\n – name: DOOM_ENGINE_SERVICE_URL<\/p>\n value: “http:\/\/localhost:8081\/”<\/p>\n – name: DOOM_STATE_SERVICE_URL<\/p>\n value: “http:\/\/localhost:8082\/”<\/p>\n volumeMounts:<\/p>\n – name: www-data<\/p>\n mountPath: \/tmp\/www<\/p>\n containers:<\/p>\n – name: nginx<\/p>\n image: nginx:1.14<\/p>\n imagePullPolicy: IfNotPresent<\/p>\n volumeMounts:<\/p>\n – name: www-data<\/p>\n mountPath: \/usr\/share\/nginx\/html<\/p>\n – name: doom-client-nginx-vol<\/p>\n mountPath: \/etc\/nginx\/conf.d<\/p>\n volumes:<\/p>\n – name: www-data<\/p>\n emptyDir: {}<\/p>\n – name: doom-client-nginx-vol<\/p>\n configMap:<\/p>\n name: doom-client-nginx<\/p>\n<\/td>\n
\n <\/tr>\n<\/table>\n
\n
\n
<\/p>\n The Deployment manifest defines an \u201cinitContainer\u201d which executes the \u201crewrite-config.js\u201d Node.js script to prepare and update the shared storage volume with the asset bundles. It also defines an NGINX container for serving our static assets. Finally, it also creates a shared Persistent Volume which is mounted on both of the above containers. In the NGINX container the mount point is \u201c\/var\/www\/share\/html\u201d but on the frontend container \u201c\/tmp\/www\u201d for avoiding creating extra directories. \u201c\/tmp\/www\u201d will be the directory where the Node.js script will copy asset bundles to and rewrite the \u201cindex.html\u201d. Local development with Docker Compose<\/p>\n The final piece of our puzzle is the local Docker Compose development environment. I\u2019ve included several services that allow both developing the web application with the development server and testing the application when serving production static assets through NGINX. It is perfectly possible to separate these services into several YAML files (\u201cdocker-compose.yaml\u201d, \u201cdocker-compose.dev.yaml\u201d and \u201cdocker-compose.prod.yaml\u201d) and do some composition but I\u2019ve added a single file for the sake of simplicity.<\/p>\n Apart from the \u201cdoom-state\u201d and \u201cdoom-engine\u201d services which are our backend APIs, the \u201cui\u201d service starts the webpack development server with \u201cnpm run dev\u201d and the \u201cui-deployment\u201d service, which runs a container based on the same Dockerfile, runs the configuration deployment script. The \u201cnginx\u201d service serves static assets from a persistent volume (\u201cwww-data\u201d) which is also mounted on the \u201cui-deployment\u201d script.<\/p>\n
\n
\n
\n
\n
\n
\n
\n
<\/p>\n | | | | | | |
![\"Alternative](\"https:\/\/container-solutions.com\/content\/uploads\/2018\/09\/IMG_3965-150x150.jpg\")
by Jos\u00e9 Moreira<\/a> <\/p>\n![\"Download](\"https:\/\/no-cache.hubspot.com\/cta\/default\/2252258\/79038edb-11db-4edf-a310-cfe87e3d3670.png\")
<\/a><\/p>\n![\"\"](\"http:\/\/container-solutions.com\/content\/uploads\/2018\/09\/configurable-frontend-application-architecture.png\")
<\/a><\/p>\n