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.
- NodeJS +8
- Angular CLI (
npm i -g @angular/cli@latestor
yarn 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
Our first step will be to configure our NGINX server to serve our application and gzip it so we have a better performance :
Once we have it, we can make the docker container !
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 !
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!