Docker Assignments #21: Dockerizing an Angular Application using Multi-stage build

Multi-stage builds is a new feature used to optimize Dockerfiles while keeping them easy to read and maintain

Before multi-stage build, developers used to maintain two dockerfiles (i.e. Dockerfile.dev and Dockerfile.prod) to build and deploy an application. But it is hard to maintain and it may increase image size also.

With multi-stage builds, you can use multiple FROM statements in your Dockerfile. Each FROM instruction can use a different base, and each of them begins a new stage of the build. So, we can selectively copy artifacts from one stage to another without keeping everything in final image. 

In the last two previous articles, we created two Dockerfiles and docker-compose yml files to generate dist folder and service application using Nginx respectively. 

Check http://millionvisit.blogspot.com/2020/10/docker-assignments-19-dockerizing.html

Check http://millionvisit.blogspot.com/2020/10/docker-assignments-20-deploy-angular.html

With help of multi-stage builds, we can create a single Dockerfile to build and serve an angular application

1.  Create new scaffolding angular application using ng new command
2.  Validate folder structure as per below image in the host machine
3. 

   
   
4. Set default host for ng serve in package.json file
5. Configure Dockerfile with below instructions
• set base image as "node:12.7-alpine" and stage name as "build"
• set working directory as "/usr/app"
• write command to copy package.json
• write command to run npm install
• write command to copy all files from host machine into an image
• expose Port 4200
•  set CMD command to execute npm run build
• set second From base image as "nginx:1.17.1-alpine"
• copy dist folder from previous stage to nginx/html folder
      6. Write following instructions in docker-compose yml file
• Configure "dockerangular-multistage-service" service by specifying build context as Dockerfile
• specify bindmount to /usr/app container path
• specify volume mount to /usr/app/node_modules
• Expose port 8081
    7. Spin up container using docker-compose up command
    8. check http://localhost:8081 




Step 1: 
   > ng new docker-angular-multi-stage


Step 4: 
"scripts": {    
    "start": "ng serve --host 0.0.0.0"    
  }
 
Step 5:
FROM node:12.7-alpine AS build
WORKDIR /usr/app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 4200
CMD ["npm", "run", "build"]


FROM nginx:1.17.1-alpine
COPY --from=build /usr/app/dist/docker-angular-multi-stage /usr/share/nginx/html






Step 6:
version: '3'
services:
    dockerangular-multistage-service:
      build: .
      volumes:
        - .:/usr/app
        - /usr/app/node_modules
      environment:
        NODE_ENV: production
      ports:
        - 8081:80




Step 7:
  > docker-compose up

we can even spin up docker containers by right click on docker-compose.yml in vscode and select "Compose up" option

Source code available under https://github.com/ramasubbareddy1224/docker-angular-multi-stage

Happy Coding :)