As specified by 12 factor application, a strict separation of config and code is required.
But in pre-built Web application (like vue.js) code is compiled and every referecnce to environement variable are resolved at compile time.
This container allow you to use both : run-time and build-time configuration :
In your code use {{ .MY_ENV_VARIABLE }} to inject run time varaible that will be replaced on container startup.
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<title>{{ .TITLE }}</title>
</head>
<body>
<h1>{{ .TITLE }}</h1>
</body>
</html>Dockerfile
# Build application
FROM node:alpine as build-stage
WORKDIR /app
# Install package as a separate layer for improved docker caching
COPY package*.json ./
RUN npm install
# Build the application
COPY . .
RUN npm run build
# Runnable image
FROM tinou98/vue-12factor
COPY --from=build-stage /app/dist /srv/http
CMD ["js/*.js", "index.html"] # List file that contain run-time variableThen build and run the image:
docker build -t vue-12factor-example .
docker run -it --rm -p8080:80 -e TITLE="Changeable title" vue-12factor-exampleNow a server is running on port 8080, serving the page with injected environement.