In this post , we will dockerize a simple application designed in angular 7.
Tools used –
- Docker Toolbox
- Visual Code Studio
Steps required to dockerize the simple angular application are as below -Go to the folder where you want to create angular project
Step 1: Go to the folder where you want to create angular project
Step 2: You need to first install NodeJS and then angular CLI using below command –
npm install -g @angular/cli
Step 3: Once you install angular CLI package from node package manager, you will be able to execute angular commands on console. With below commands you can create new angular project and build it.
- Create new angular project –
ng new angular-docker-demo
- Switch to newly created folder by
- You can run the angular project using belwo command –
Running application can be access from – http://localhost:80/
Step 4: Now in this step , we will move towards dockerizing the application created in above steps. For that, you need to create docker file as below –
FROM nginx:1.13.3-alpine ## Remove default code for nginx website RUN rm -rf /usr/share/nginx/html/* ## Copy all build artifacts in dist folder generated after building project into default nginx public folder COPY /dist /usr/share/nginx/html #Expose port 80 of container EXPOSE 80 CMD ["nginx", "-g", "daemon off;"]
First line in docker file i.e. FROM nginx:1.13.3-alpine will download nginx server from docker hub. NGINX (Pronounced as Engine-X) is an open source, lightweight, high-performance web server or proxy server. We would need this server to host our application.
Second line will remove default NGINX website code present under /usr/share/nginx/html/ folder.
After we build our angular project ,build artifacts will be generated under /dist folder . Third line will copy contents of /dist under
/usr/share/nginx/html/ folder and will serve this web content on browser.
Step 5: Below commands will first build the angular application which is PROD ready. Then build the docker image and run that image.
ng build --prod
docker build -t angular-docker-demo.
docker run -p 8082:80 --name angular-docker-demo angular-docker-demo