As we have seen in my previous post, we can do dynamic configuration in angular. A great use of it is in a docker container ! We will create a multi step docker build to have minimal size possible and have with dynamic configuration. But first, we need to create the nginx config for our application.
Prerequisites
- NodeJS +8
- Angular CLI (
npm i -g @angular/cli@latestoryarn global add @angular/cli@latest) - Anguler runtime configuration as seen in my previous post
- Docker +17.05
- Basic understanding of Docker and Angular CLI commands
NGINX config
Our first step will be to configure our NGINX server to serve our application and gzip it so we have a better performance :
# ./docker/nginx/default.conf
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6]\.";
gzip_min_length 1100;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
}
}
Once we have it, we can make the docker container !
Dockerfile
Our dockerfile will have two stages. One will build our application and the other stage will have the build application with only NGINX running on it.
This is how we can achieve that :
### STAGE 1: Build ###
# We label our stage as 'builder'
FROM node:9 as builder
COPY package.json yarn.lock ./
## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN yarn install && mkdir /ng-app && mv ./node_modules ./ng-app/
## Move to /ng-app (eq: cd /ng-app)
WORKDIR /ng-app
# Copy everything from host to /ng-app in the container
COPY . .
## Build the angular app in production mode and store the artifacts in dist folder
RUN yarn build --prod --output-path=dist
### STAGE 2: Setup ###
FROM nginx:1.13.3-alpine
## Copy our default nginx config
COPY docker/nginx/default.conf /etc/nginx/conf.d/
## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*
## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist /usr/share/nginx/html
CMD ["nginx", "-g", "daemon off;"]
Our final step will be to create a docker-compose with the config !
Docker compose
Here is our docker-compose.yml :
version: '3.1'
services:
web-app:
build: .
ports:
- 8090:80
volumes:
- ./front-config/local.json:/usr/share/nginx/html/assets/config.json
Here, I build a local image, but you can use the image tag instead to use a build image.
Here we have it! A fully configurable docker image with an Angular application!
Top comments (0)