Deploying configurable frontend web application containers

BioBio
Software Engineer @ Container Solutions
Full-stack developer but mostly backend
Passionate about architecture and
infrastructure
❤ containers

Deploying con gurable frontend web application
containers

AgendaAgenda
Deploying backend containers
Web application con guration
Meta tags approach
Application level code
Deployment scripts
Kubernetes deployment
Local development
environment
Demo
Questions?

My experiences deploying webMy experiences deploying web
applicationsapplications

Deploying backend containersDeploying backend containers
# docker-compose.yaml
version: '3'
services:
backend:
image: example/api:latest
ports:
- "8080:8080"
environment:
- DB_USER=user
- DB_PASS=secret_password
- DB_NAME=exampledb
depends_on:
- db
db:
image: sameersbn/postgresql:10
ports:
- "5432:5432"
environment:
- DB_USER=user
- DB_PASS=secret_password
- DB_NAME=exampledb

Docker imagesDocker images
Build once, run anywhere

Treating frontend containersTreating frontend containers
like backend containerslike backend containers

How client-side applicationsHow client-side applications
workwork
Runtime is the client Web browser
Client-side applications cannot read environment
variables or con guration les
Source code is bundled and served from CDN or
application web servers
Con guration values are “hardcoded” at build time

Web Application con gurationWeb Application con guration
pointspoints
Con guration values change per environment
(development, staging, production):
API URLs
API tokens
Analytics tracking codes (client
IDs)
Application parameters

Deploying web applicationDeploying web application
with containerswith containers
Some approaches to con guration per environment

Docker leDocker le
FROM node:8.11.4-jessie
RUN mkdir /app
WORKDIR /app
COPY package.json .
RUN npm install
COPY . .
ENV NODE_ENV production
RUN npm run build
CMD npm run dev

Rebuild assets beforeRebuild assets before
deployment (inside Dockerdeployment (inside Docker
container)container)
Adds to deployment time. Depending on deployment
rate and size of the project, the deployment time
overhead might be considerable.
Is prone to build failures at end of deployment pipeline
(network conditions)
Might a ect rollback speed

Build one image perBuild one image per
environmentenvironment
Adds clutter to the docker registry/daemon.
Changing con guration implies rebuilding Docker
images

Loading con g from HTTPLoading con g from HTTP
endpointendpoint
Web app requests con guration from a dynamically
generated https://myapp.com/js/config.js le.
Extra request per page load implies higher tra c load
Web app cannot start business logic before loading
con guration

Meta tags approachMeta tags approach
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1
<meta property="DOOM_STATE_SERVICE_URL" content="http://localhost
<meta property="DOOM_ENGINE_SERVICE_URL" content="http://localhos
<link rel="icon" href="./favicon.ico">
<title>frontend</title>
</head>
<body>
<noscript>
<strong>We're sorry but frontend doesn't work properly without
</noscript>
<div id="app"></div>

</body>
</html>

Con guration meta tags are added to index.html
During deployment, meta tag values are rewritten based
on environment variables (or mounted con guration
les)
Javascript application reads con guration from meta
tags on page load

Abstracting the con gurationAbstracting the con guration
layerlayer

$ cat src/config/loader.js
/**
*
* Get config value with precedence:
* - check `process.env`
* - check current web page meta tags
* @param {string} key Configuration key name
*/
function getConfigValue (key) {
let value = null
if (process.env && process.env[`${key}`] !== undefined) {
// get env var value
value = process.env[`${key}`]
} else {
// get value from meta tag
return getMetaValue(key)
}
return value
}
// ommited rest of code

$ cat src/config/index.js
anywhere on the source code
import loader from './loader'
export default {
DOOM_STATE_SERVICE_URL: loader.getConfigValue('DOOM_STATE_SERVICE_U
DOOM_ENGINE_SERVICE_URL: loader.getConfigValue('DOOM_ENGINE_SERVICE
}
import config from './config'
console.log(config.DOOM_ENGINE_SERVICE_URL)

Kubernetes deploymentKubernetes deployment
Deployment helper script:
Deletes existing les from public directory
Copies dist assets from Docker image to public
directory
Rewrites con g meta tags on public directory
index.html

$cat bin/rewrite-config.js
#!/usr/bin/env node
const cheerio = require('cheerio')
const copy = require('recursive-copy')
const fs = require('fs')
const rimraf = require('rimraf')
const DIST_DIR = process.env.DIST_DIR
const WWW_DIR = process.env.WWW_DIR
const DOOM_STATE_SERVICE_URL = process.env.DOOM_STATE_SERVICE_URL
const DOOM_ENGINE_SERVICE_URL = process.env.DOOM_ENGINE_SERVICE_URL
// ommited rest of code

Kubernetes deploymentKubernetes deployment
manifestmanifest

Kubernetes init containerKubernetes init container
initContainers:
- name: doom-client
image: "doom-client:latest"
command: ["/app/bin/rewrite-config.js"]
imagePullPolicy: IfNotPresent
env:
- name: DIST_DIR
value: "/app/dist"
- name: WWW_DIR
value: "/tmp/www"
- name: DOOM_ENGINE_SERVICE_URL
value: "http://localhost:8081/"
- name: DOOM_STATE_SERVICE_URL
value: "http://localhost:8082/"
volumeMounts:
- name: www-data
mountPath: /tmp/www

Kubernetes ContainerKubernetes Container
containers:
- name: nginx
image: nginx:1.14
imagePullPolicy: IfNotPresent
volumeMounts:
- name: www-data
mountPath: /usr/share/nginx/html
- name: doom-client-nginx-vol
mountPath: /etc/nginx/conf.d

Kubernetes shared persistentKubernetes shared persistent
volumevolume
volumes:
- name: www-data
emptyDir: {}
- name: doom-client-nginx-vol
configMap:
name: doom-client-nginx

Local developmentLocal development
environmentenvironment
Docker Compose services:
webpack dev server
backend API services
NGINX instance for production build
testing

UI service (webpackUI service (webpack
dev server)dev server)
version: '3'
services:
ui:
build: .
command: ["npm", "run", "dev", ]
ports:
- "8080:8080"
environment:
- HOST=0.0.0.0
- PORT=8080
- NODE_ENV=development
- DOOM_ENGINE_SERVICE_URL=http://localhost:8081/
- DOOM_STATE_SERVICE_URL=http://localhost:8082/
volumes:
- .:/app
# bind volume inside container for source mount not shadow image d
- /app/node_modules
- /app/dist

Backend servicesBackend services
doom-engine:
image: microservice-doom/doom-engine:latest
environment:
- DOOM_STATE_SERVICE_URL=http://doom-state:8080/
- DOOM_STATE_SERVICE_PASSWORD=enginepwd
ports:
- "8081:8080"
doom-state:
image: microservice-doom/doom-state:latest
ports:
- "8082:8080"

Production build test servicesProduction build test services
ui-deployment:
build: .
command: ["/app/bin/rewrite-config.js"]
environment:
- NODE_ENV=production
- DIST_DIR=/app/dist
- WWW_DIR=/tmp/www
- DOOM_ENGINE_SERVICE_URL=http://localhost:8081/
- DOOM_STATE_SERVICE_URL=http://localhost:8082/
volumes:
- .:/app
# bind volume inside container for source mount not shadow image d
- /app/node_modules
- /app/dist
# shared NGINX static files dir
- www-data:/tmp/www
depends_on:
- nginx

Test production build withTest production build with
NGINXNGINX
nginx:
image: nginx:1.14
ports:
- "8090:80"
volumes:
- www-data:/usr/share/nginx/html
# shared persistent volume
volumes:
www-data:

Shameless plugShameless plug
https://container-solutions.com/deploying-con gurable-
frontend-web-application-containers/

Keep in touch!Keep in touch!
Twitter: @zemanel
E-mail: jose.moreira@container-solutions.com
LinkedIn:
https://www.linkedin.com/in/josemoreira

Deploying configurable frontend web application containers

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Deploying configurable frontend web application containers

Similar to Deploying configurable frontend web application containers (20)

Recently uploaded

Recently uploaded (20)

Deploying configurable frontend web application containers