Deploying containerized client-side web applications requires a different configuration strategy compared to system applications. The runtime of client-side web applications is the client-side web browser and, unlike other applications which can utilize environment values, configuration has to be hard-coded in the Javascript source code.
3. AgendaAgenda
Deploying backend containers
Web application con guration
Meta tags approach
Application level code
Deployment scripts
Kubernetes deployment
Local development
environment
Demo
Questions?
8. 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
10. 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
12. 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
13. 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
14. Build one image perBuild one image per
environmentenvironment
Adds clutter to the docker registry/daemon.
Changing con guration implies rebuilding Docker
images
15. 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
16. 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>
<!-- built files will be auto injected -->
</body>
</html>
17. 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
19. $ 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
20. $ 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)
21. 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